Top Banner
199

Oop in java script

Nov 11, 2014

Download

Technology

Pierre Spring

Presentation on Classical Inheritance Patterns in JavaScript.
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Oop in java script
Page 2: Oop in java script
Page 3: Oop in java script
Page 4: Oop in java script
Page 5: Oop in java script
Page 6: Oop in java script
Page 7: Oop in java script

{}

Page 8: Oop in java script

{}1'nelm.io'true

undefinednull

Page 9: Oop in java script

{}

Page 10: Oop in java script

new Object();

Page 11: Oop in java script

{}// v.s.new Object();

Page 12: Oop in java script

(function (){ var Object = function () { this.changed = true; } console.log(new Object());}());

// {changed: true}

Page 13: Oop in java script

(function (){ var Object = function () { this.changed = true; } console.log(new Object());}());

// {changed: true}

Page 14: Oop in java script

(function (){ var Object = function () { this.changed = true; } console.log(new Object());}());

// {changed: true}

Page 15: Oop in java script

(function (){ var Object = function () { this.changed = true; } console.log(new Object());}());

// {changed: true}

Page 16: Oop in java script

(function (){ var Object = function () { this.changed = true; } console.log(new Object());}());

// {changed: true}

Page 17: Oop in java script

(function (){ var Object = function () { this.changed = true; } console.log(new Object());}());

// {changed: true}

Page 18: Oop in java script

{}new Object();

Page 19: Oop in java script

var o = new Object(1);console.log(o.constructor);

// function Number() { }// new Number(1);

Page 20: Oop in java script

var o = new Object('1');console.log(o.constructor);

// function String() { }// new String('1');

Page 21: Oop in java script

var o = new Object(true);console.log(o.constructor);

// function Boolean() { }// new Boolean(true);

Page 22: Oop in java script

var a = {};var b = new Object();var c = Object();

Page 23: Oop in java script

var a = {};var b = new Object();var c = Object();

Page 24: Oop in java script

var a = {};var b = new Object();var c = Object();

Page 25: Oop in java script

new

Page 26: Oop in java script

new Object();

Page 27: Oop in java script

var Car, myCar;

Car = function (brand) { this.brand = brand;};

myCar = new Car('Fiat');

// {brand: 'Fiat'}

Page 28: Oop in java script

var Car, myCar;

Car = function (brand) { this.brand = brand;};

myCar = new Car('Fiat');

// {brand: 'Fiat'}

Page 29: Oop in java script

var Car, myCar;

Car = function (brand) { this.brand = brand;};

myCar = new Car('Fiat');

// {brand: 'Fiat'}

Page 30: Oop in java script

var Car, myCar;

Car = function (brand) { this.brand = brand;};

myCar = new Car('Fiat');

// {brand: 'Fiat'}

Page 31: Oop in java script

var Car, myCar;

Car = function (brand) { this.brand = brand;};

myCar = Car('Fiat');

// undefined

Page 32: Oop in java script

var Car, myCar;

Car = function (brand) { this.brand = brand;};

myCar = Car('Fiat');

// undefined

Page 33: Oop in java script

var Car, myCar;

Car = function (brand) { this.brand = brand;};

myCar = new Car('Fiat');

// {brand: 'Fiat'}

Page 34: Oop in java script

var Car, myCar;

Car = function (brand) { this.brand = brand;};

myCar = new Car('Fiat');

// {brand: 'Fiat'}

Page 35: Oop in java script

var Car, myCar;

Car = function (brand) { this.brand = brand; console.log( this.constructor === Car ); // true};

myCar = new Car('Fiat');

Page 36: Oop in java script

var Car, myCar;

Car = function (brand) { this.brand = brand; console.log( this.constructor === Car ); // undefined};

myCar = Car('Fiat');

Page 37: Oop in java script

var Car, myCar;

Car = function (brand) { if (this.constructor !== Car) { return new Car(brand); } this.brand = brand;};

myCar = Car('Fiat');

Page 38: Oop in java script

var Car, myCar;

Car = function (brand) { if (this.constructor !== Car) { return new Car(brand); } this.brand = brand;};

myCar = new Car('Fiat');

Page 39: Oop in java script

prototype

Page 40: Oop in java script

{}prototype

Page 41: Oop in java script

var C = function () {};

console.log(C.prototype);

{ constructor: C, __proto__: Object.prototype}

Page 42: Oop in java script

var C = function () {};

console.log(C.prototype);

{ constructor: C, __proto__: Object.prototype}

Page 43: Oop in java script

var C = function () {};

console.log(C.prototype);

{ constructor: C, __proto__: Object.prototype}

Page 44: Oop in java script

var C = function () {};

console.log(C.prototype);

{ constructor: C, __proto__: Object.prototype}

Page 45: Oop in java script

var C = function () {};

console.log(C.prototype);

{ constructor: C, __proto__: Object.prototype}

Page 46: Oop in java script

var C = function () {};C.prototype = { a: "A", b: "B", constructor: C};

console.log(C.prototype);

{ a: "A", b: "B", constructor: C, __proto__: Object.prototype}

Page 47: Oop in java script

var C = function () {};C.prototype = { a: "A", b: "B", constructor: C};

console.log(C.prototype);

{ a: "A", b: "B", constructor: C, __proto__: Object.prototype}

Page 48: Oop in java script

var C = function () {};C.prototype = { a: "A", b: "B", constructor: C // !!!};

console.log(C.prototype);

{ a: "A", b: "B", constructor: C, __proto__: Object.prototype}

Page 49: Oop in java script

var C = function () {};C.prototype = { a: "A", b: "B", constructor: C};

console.log(C.prototype);

{ a: "A", b: "B", constructor: C, __proto__: Object.prototype}

Page 50: Oop in java script

var C = function () {};C.prototype = { a: "A", b: "B", constructor: C};

console.log(C.prototype);

{ a: "A", b: "B", constructor: C, __proto__: Object.prototype}

Page 51: Oop in java script

var C = function () {};C.prototype = { a: "A", b: "B", constructor: C};

console.log(C.prototype);

{ a: "A", b: "B", constructor: C, __proto__: Object.prototype}

Page 52: Oop in java script

var C = function () {};C.prototype = { a: "A", b: "B", constructor: C};

console.log(C.prototype);

{ a: "A", b: "B", constructor: C, __proto__: Object.prototype}

Page 53: Oop in java script

var C = function () {};

C.prototype.a = "A";C.prototype.b = "B";

console.log(C.prototype);

{ a: "A", b: "B", constructor: C, __proto__: Object.prototype}

Page 54: Oop in java script

var C = function () {};

C.prototype.a = "A";C.prototype.b = "B";

console.log(C.prototype);

{ a: "A", b: "B", constructor: C, __proto__: Object.prototype}

Page 55: Oop in java script

{}prototype

Page 56: Oop in java script

propertyv.s.

attribute

Page 57: Oop in java script

var Car, myCar;

Car = function (brand) { this.brand = brand;};

myCar = new Car('Fiat');

Car.prototype; // { /* ... */ }myCar.prototype; // undefined

Page 58: Oop in java script

var Car, myCar;

Car = function (brand) { this.brand = brand;};

myCar = new Car('Fiat');

Car.prototype; // { /* ... */ }myCar.prototype; // undefined

Page 59: Oop in java script

var Car, myCar;

Car = function (brand) { this.brand = brand;};

myCar = new Car('Fiat');

Car.prototype; // { /* ... */ }myCar.prototype; // undefined

Page 60: Oop in java script

var Car, myCar;

Car = function (brand) { this.brand = brand;};

myCar = new Car('Fiat');

Car.prototype; // { /* ... */ }myCar.prototype; // undefined

Page 61: Oop in java script

var Car, myCar;

Car = function (brand) { this.brand = brand;};

myCar = new Car('Fiat');

Car.prototype; // { /* ... */ }myCar.prototype; // undefined

Page 62: Oop in java script

var Car, myCar;

Car = function (brand) { this.brand = brand;};

myCar = new Car('Fiat');

Car.prototype; // { /* ... */ }myCar.prototype; // undefined

Page 63: Oop in java script

propertyv.s.

attribute

Page 64: Oop in java script

var Car, myCar;

Car = function (brand) { this.brand = brand;};

Car.prototype.getBrand = function () { return this.brand;};

myCar = new Car('Fiat');myCar.brand;myCar.getBrand();

Page 65: Oop in java script

var Car, myCar;

Car = function (brand) { this.brand = brand;};

Car.prototype.getBrand = function () { return this.brand;};

myCar = new Car('Fiat');myCar.brand;myCar.getBrand();

Page 66: Oop in java script

var Car, myCar;

Car = function (brand) { this.brand = brand;};

Car.prototype.getBrand = function () { return this.brand;};

myCar = new Car('Fiat');myCar.brand;myCar.getBrand();

Page 67: Oop in java script

var Car, myCar;

Car = function (brand) { this.brand = brand;};

Car.prototype.getBrand = function () { return this.brand;};

myCar = new Car('Fiat');myCar.brand;myCar.getBrand();

Page 68: Oop in java script

var Car, myCar;

Car = function (brand) { this.brand = brand;};

Car.prototype.getBrand = function () { return this.brand;};

myCar = new Car('Fiat');myCar.brand;myCar.getBrand();

Page 69: Oop in java script

var Car, myCar;

Car = function (brand) { this.brand = brand;};

Car.prototype.getBrand = function () { return this.brand;};

myCar = new Car('Fiat');myCar.brand;myCar.getBrand();

Page 70: Oop in java script
Page 71: Oop in java script
Page 72: Oop in java script

var Car, myCar;

Car = function (brand) { this.brand = brand;};

Car.prototype.getBrand = function () { return this.brand;};

myCar = new Car('Fiat');myCar.brand;myCar.getBrand();

Page 73: Oop in java script

{}prototype

Page 74: Oop in java script

inheritance

Page 75: Oop in java script

classicalinheritance

modern

Page 76: Oop in java script

classicalinheritance

Page 77: Oop in java script

var Car, ItalianCar, myCar;

Car = function (brand) { this.brand = brand || 'Homemade';}Car.prototype.getBrand = function () { return this.brand;}

ItalianCar = function (brand) {};

inherit(ItalianCar, Car);

myCar = new ItalianCar('Fiat');

Page 78: Oop in java script

var Car, ItalianCar, myCar;

Car = function (brand) { this.brand = brand || 'Homemade';}Car.prototype.getBrand = function () { return this.brand;}

ItalianCar = function (brand) {}

inherit(ItalianCar, Car);

myCar = new ItalianCar('Fiat');

Page 79: Oop in java script

var Car, ItalianCar, myCar;

Car = function (brand) { this.brand = brand || 'Homemade';}Car.prototype.getBrand = function () { return this.brand;}

ItalianCar = function (brand) {}

inherit(ItalianCar, Car);

myCar = new ItalianCar('Fiat');

Page 80: Oop in java script

var Car, ItalianCar, myCar;

Car = function (brand) { this.brand = brand || 'Homemade';}Car.prototype.getBrand = function () { return this.brand;}

ItalianCar = function (brand) {};

inherit(ItalianCar, Car);

myCar = new ItalianCar('Fiat');

Page 81: Oop in java script

var Car, ItalianCar, myCar;

Car = function (brand) { this.brand = brand || 'Homemade';}Car.prototype.getBrand = function () { return this.brand;}

ItalianCar = function (brand) {}

inherit(ItalianCar, Car);

myCar = new ItalianCar('Fiat');

Page 82: Oop in java script

var Car, ItalianCar, myCar;

Car = function (brand) { this.brand = brand || 'Homemade';}Car.prototype.getBrand = function () { return this.brand;}

ItalianCar = function (brand) {}

inherit(ItalianCar, Car);

myCar = new ItalianCar('Fiat');

Page 83: Oop in java script

var Car, ItalianCar, myCar;

Car = function (brand) { this.brand = brand || 'Homemade';}Car.prototype.getBrand = function () { return this.brand;}

ItalianCar = function (brand) {};

inherit(ItalianCar, Car);

myCar = new ItalianCar('Fiat');

Page 84: Oop in java script

classical inheritance1. Default Pattern2. Rent-a-Constructor3. Rent and Set Prototype4. Share Prototype5. Temp. Constructor

Page 85: Oop in java script

classical inheritance1. Default Pattern2. Rent-a-Constructor3. Rent and Set Prototype4. Share Prototype5. Temp. Constructor

Page 86: Oop in java script

var inherit = function (Child, Parent) { Child.prototype = new Parent();}

Page 87: Oop in java script

var inherit = function (Child, Parent) { Child.prototype = new Parent();}myCar = new ItalianCar();

myCar.getBrand();// 'Homemade'

Page 88: Oop in java script

var inherit = function (Child, Parent) { Child.prototype = new Parent();}myCar = new ItalianCar();

myCar.getBrand();// 'Homemade'

Page 89: Oop in java script

var inherit = function (Child, Parent) { Child.prototype = new Parent();}myCar = new ItalianCar();

myCar.getBrand();// 'Homemade'

Page 90: Oop in java script

var inherit = function (Child, Parent) { Child.prototype = new Parent();}myCar = new ItalianCar();

myCar.getBrand();// 'Homemade'

Page 91: Oop in java script

myCar.brand = "Fiat";myCar.getBrand(); // 'Fiat'

Page 92: Oop in java script

myCar.getBrand();// 'Fiat'

Page 93: Oop in java script

myCar = new ItalianCar();myCar.brand = 'Fiat';

Page 94: Oop in java script

myCar = new ItalianCar('Fiat')

Page 95: Oop in java script

myCar = new ItalianCar('Fiat')myCar.getBrand(); // 'Homemade'

Page 96: Oop in java script

var Car, ItalianCar, myCar;

Car = function (brand) { this.brand = brand || 'Homemade';}Car.prototype.getBrand = function () { return this.brand;}

ItalianCar = function (brand) {}

inherit(ItalianCar, Car);// ItalianCar.prototype = new Car();

Page 97: Oop in java script

classical inheritance1. Default Pattern2. Rent-a-Constructor3. Rent and Set Prototype4. Share Prototype5. Temp. Constructor

Page 98: Oop in java script

ItalianCar = function (brand) { Car.apply(this, [brand]);}

Page 99: Oop in java script

var Car, ItalianCar, myCar;Car = function (brand) { this.brand = brand || 'Homemade';}Car.prototype.getBrand = function () { return this.brand;}

ItalianCar = function (brand) { Car.apply(this, [brand]);}

myCar = new ItalianCar('Fiat');myCar.brand; // 'Fiat';

Page 100: Oop in java script

var Car, ItalianCar, myCar;Car = function (brand) { this.brand = brand || 'Homemade';}Car.prototype.getBrand = function () { return this.brand;}

ItalianCar = function (brand) { Car.apply(this, [brand]);}

myCar = new ItalianCar('Fiat');myCar.brand; // 'Fiat';

Page 101: Oop in java script

var Car, ItalianCar, myCar;Car = function (brand) { this.brand = brand || 'Homemade';}Car.prototype.getBrand = function () { return this.brand;}

ItalianCar = function (brand) { Car.apply(this, [brand]);}

myCar = new ItalianCar('Fiat');myCar.brand; // 'Fiat';

Page 102: Oop in java script

var Car, ItalianCar, myCar;Car = function (brand) { this.brand = brand || 'Homemade';}Car.prototype.getBrand = function () { return this.brand;}

ItalianCar = function (brand) { Car.apply(this, [brand]);}

myCar = new ItalianCar('Fiat');myCar.brand; // 'Fiat';

Page 103: Oop in java script

var Car, ItalianCar, myCar;Car = function (brand) { this.brand = brand || 'Homemade';}Car.prototype.getBrand = function () { return this.brand;}

ItalianCar = function (brand) { Car.apply(this, [brand]);}

myCar = new ItalianCar('Fiat');myCar.brand; // 'Fiat';

Page 104: Oop in java script

var Car, ItalianCar, myCar;Car = function (brand) { this.brand = brand || 'Homemade';}Car.prototype.getBrand = function () { return this.brand;}

ItalianCar = function (brand) { Car.apply(this, [brand]);}

myCar = new ItalianCar('Fiat');myCar.brand; // 'Fiat';myCar.getBrand; // 'undefined'

Page 105: Oop in java script

var Car, ItalianCar, myCar;Car = function (brand) { this.brand = brand || 'Homemade';}Car.prototype.getBrand = function () { return this.brand;}

ItalianCar = function (brand) { Car.apply(this, [brand]);}

myCar = new ItalianCar('Fiat');myCar.brand; // 'Fiat';myCar.getBrand; // 'undefined'

Page 106: Oop in java script

var Car, ItalianCar, myCar;Car = function (brand) { this.brand = brand || 'Homemade';}Car.prototype.getBrand = function () { return this.brand;}

ItalianCar = function (brand) { Car.apply(this, [brand]);}

myCar = new ItalianCar('Fiat');myCar.brand; // 'Fiat';myCar.getBrand; // 'undefined'

Page 107: Oop in java script
Page 108: Oop in java script

classical inheritance1. Default Pattern2. Rent-a-Constructor3. Rent and Set Prototype4. Share Prototype5. Temp. Constructor

Page 109: Oop in java script

ItalianCar = function (brand) { Car.apply(this, [brand]);}ItalianCar.prototype = new Car();

Page 110: Oop in java script

ItalianCar = function (brand) { Car.apply(this, [brand]);}ItalianCar.prototype = new Car();

Page 111: Oop in java script

ItalianCar = function (brand) { Car.apply(this, [brand]);}ItalianCar.prototype = new Car();

Page 112: Oop in java script

ItalianCar = function (brand) { Car.apply(this, [brand]);}ItalianCar.prototype = new Car();

Page 113: Oop in java script

var Car, ItalianCar, myCar;Car = function (brand) { this.brand = brand || 'Homemade';}Car.prototype.getBrand = function () { return this.brand;}

ItalianCar = function (brand) { Car.apply(this, [brand]);}ItalianCar.prototype = new Car();

myCar = new ItalianCar('Fiat');myCar.brand; // 'Fiat';myCar.getBrand(); // 'Fiat'delete myCar.brand;myCar.getBrand(); // 'Homemade'

Page 114: Oop in java script

var Car, ItalianCar, myCar;Car = function (brand) { this.brand = brand || 'Homemade';}Car.prototype.getBrand = function () { return this.brand;}

ItalianCar = function (brand) { Car.apply(this, [brand]);}ItalianCar.prototype = new Car();

myCar = new ItalianCar('Fiat');myCar.brand; // 'Fiat';myCar.getBrand(); // 'Fiat'delete myCar.brand;myCar.getBrand(); // 'Homemade'

Page 115: Oop in java script

var Car, ItalianCar, myCar;Car = function (brand) { this.brand = brand || 'Homemade';}Car.prototype.getBrand = function () { return this.brand;}

ItalianCar = function (brand) { Car.apply(this, [brand]);}ItalianCar.prototype = new Car();

myCar = new ItalianCar('Fiat');myCar.brand; // 'Fiat';myCar.getBrand(); // 'Fiat'delete myCar.brand;myCar.getBrand(); // 'Homemade'

Page 116: Oop in java script

var Car, ItalianCar, myCar;Car = function (brand) { this.brand = brand || 'Homemade';}Car.prototype.getBrand = function () { return this.brand;}

ItalianCar = function (brand) { Car.apply(this, [brand]);}ItalianCar.prototype = new Car();

myCar = new ItalianCar('Fiat');myCar.brand; // 'Fiat';myCar.getBrand(); // 'Fiat'delete myCar.brand;myCar.getBrand(); // 'Homemade'

Page 117: Oop in java script

var Car, ItalianCar, myCar;Car = function (brand) { this.brand = brand || 'Homemade';}Car.prototype.getBrand = function () { return this.brand;}

ItalianCar = function (brand) { Car.apply(this, [brand]);}ItalianCar.prototype = new Car();

myCar = new ItalianCar('Fiat');myCar.brand; // 'Fiat';myCar.getBrand(); // 'Fiat'delete myCar.brand;myCar.getBrand(); // 'Homemade'

Page 118: Oop in java script

var Car, ItalianCar, myCar;Car = function (brand) { this.brand = brand || 'Homemade';}Car.prototype.getBrand = function () { return this.brand;}

ItalianCar = function (brand) { Car.apply(this, [brand]);}ItalianCar.prototype = new Car();

myCar = new ItalianCar('Fiat');myCar.brand; // 'Fiat';myCar.getBrand(); // 'Fiat'delete myCar.brand;myCar.getBrand(); // 'Homemade'

Page 119: Oop in java script

var Car, ItalianCar, myCar;Car = function (brand) { this.brand = brand || 'Homemade';}Car.prototype.getBrand = function () { return this.brand;}

ItalianCar = function (brand) { Car.apply(this, [brand]);}ItalianCar.prototype = new Car();

myCar = new ItalianCar('Fiat');myCar.brand; // 'Fiat';myCar.getBrand(); // 'Fiat'delete myCar.brand;myCar.getBrand(); // 'Homemade'

Page 120: Oop in java script

var Car, ItalianCar, myCar;Car = function (brand) { this.brand = brand || 'Homemade';}Car.prototype.getBrand = function () { return this.brand;}

ItalianCar = function (brand) { Car.apply(this, [brand]);}ItalianCar.prototype = new Car();

myCar = new ItalianCar('Fiat');myCar.brand; // 'Fiat';myCar.getBrand(); // 'Fiat'delete myCar.brand;myCar.getBrand(); // 'Homemade'

Page 121: Oop in java script

var Car, ItalianCar, myCar;Car = function (brand) { this.brand = brand || 'Homemade';}Car.prototype.getBrand = function () { return this.brand;}

ItalianCar = function (brand) { Car.apply(this, [brand]);}ItalianCar.prototype = new Car();

myCar = new ItalianCar('Fiat');myCar.brand; // 'Fiat';myCar.getBrand(); // 'Fiat'delete myCar.brand;myCar.getBrand(); // 'Homemade'

Page 122: Oop in java script

var Car, ItalianCar, myCar;Car = function (brand) { this.brand = brand || 'Homemade';}Car.prototype.getBrand = function () { return this.brand;}

ItalianCar = function (brand) { Car.apply(this, [brand]);}

myCar = new ItalianCar('Fiat');myCar.brand; // 'Fiat';myCar.getBrand; // 'undefined'

Page 123: Oop in java script
Page 124: Oop in java script

classical inheritance1. Default Pattern2. Rent-a-Constructor3. Rent and Set Prototype4. Share Prototype5. Temp. Constructor

Page 125: Oop in java script

var inherit = function (Child, Parent) { Child.prototype = Parent.prototype;}

Page 126: Oop in java script
Page 127: Oop in java script

classical inheritance1. Default Pattern2. Rent-a-Constructor3. Rent and Set Prototype4. Share Prototype5. Temp. Constructor

Page 128: Oop in java script

var inherit = function (Child, Parent) { var F = function () {}; F.prototype = Parent.prototype; Child.prototype = new F();}

Page 129: Oop in java script

var inherit = function (Child, Parent) { var F = function () {}; F.prototype = Parent.prototype; Child.prototype = new F();}

Page 130: Oop in java script

var inherit = function (Child, Parent) { var F = function () {}; F.prototype = Parent.prototype; Child.prototype = new F();}

Page 131: Oop in java script

var inherit = function (Child, Parent) { var F = function () {}; F.prototype = Parent.prototype; Child.prototype = new F();}

Page 132: Oop in java script

var inherit = function (Child, Parent) { var F = function () {}; F.prototype = Parent.prototype; Child.prototype = new F();}

Page 133: Oop in java script
Page 134: Oop in java script

inherit(ItalianCar, Car);myCar = new ItalianCar();myCar.brand; // undefinedmyCar.getBrand; // function

Page 135: Oop in java script

inherit(ItalianCar, Car);myCar = new ItalianCar();myCar.brand; // undefinedmyCar.getBrand; // function

Page 136: Oop in java script

inherit(ItalianCar, Car);myCar = new ItalianCar();myCar.brand; // undefinedmyCar.getBrand; // function

Page 137: Oop in java script

inherit(ItalianCar, Car);myCar = new ItalianCar();myCar.brand; // undefinedmyCar.getBrand; // function

Page 138: Oop in java script

inherit(ItalianCar, Car);myCar = new ItalianCar();myCar.brand; // undefinedmyCar.getBrand; // function

Page 139: Oop in java script

inherit(ItalianCar, Car);myCar = new ItalianCar();myCar.brand; // undefinedmyCar.getBrand; // function

Page 140: Oop in java script

var inherit = function (Child, Parent) { var F = function () {}; F.prototype = Parent.prototype; Child.prototype = new F(); Child.uber = Parent.prototype;}

Page 141: Oop in java script

var inherit = function (Child, Parent) { var F = function () {}; F.prototype = Parent.prototype; Child.prototype = new F(); Child.uber = Parent.prototype;}

Page 142: Oop in java script

var inherit = function (Child, Parent) { var F = function () {}; F.prototype = Parent.prototype; Child.prototype = new F(); Child.uber = Parent.prototype; Child.prototype.constructor = Child;}

Page 143: Oop in java script

var inherit = function (Child, Parent) { var F = function () {}; F.prototype = Parent.prototype; Child.prototype = new F(); Child.uber = Parent.prototype; Child.prototype.constructor = Child;}

Page 144: Oop in java script

classical inheritance1. Default Pattern2. Rent-a-Constructor3. Rent and Set Prototype4. Share Prototype5. Temp. Constructor

Page 145: Oop in java script

classical inheritance1. Default Pattern2. Rent-a-Constructor3. Rent and Set Prototype4. Share Prototype5. Temp. Constructorklass

Page 146: Oop in java script

var Parent = klass( null, { __construct: function () {}, someMethod: function () {} });

var Child = klass( Parent, { __construct: function () {}, childMethod: function () {} });

Page 147: Oop in java script

var Parent = klass( null, { __construct: function () {}, someMethod: function () {} });

var Child = klass( Parent, { __construct: function () {}, childMethod: function () {} });

Page 148: Oop in java script

var Parent = klass( null, { __construct: function () {}, someMethod: function () {} });

var Child = klass( Parent, { __construct: function () {}, childMethod: function () {} });

Page 149: Oop in java script

var Parent = klass( null, { __construct: function () {}, someMethod: function () {} });

var Child = klass( Parent, { __construct: function () {}, childMethod: function () {} });

Page 150: Oop in java script

var Parent = klass( null, { __construct: function () {}, someMethod: function () {} });

var Child = klass( Parent, { __construct: function () {}, childMethod: function () {} });

Page 151: Oop in java script

var Parent = klass( null, { __construct: function () {}, someMethod: function () {} });

var Child = klass( Parent, { __construct: function () {}, childMethod: function () {} });

Page 152: Oop in java script

var Parent = klass( null, { __construct: function () {}, someMethod: function () {} });

var Child = klass( Parent, { __construct: function () {}, childMethod: function () {} });

Page 153: Oop in java script

var Man = klass( null, { __construct: function (what) { console.log('man constructor'); this.name = what; }, getName: function () { return this.name; } });

Page 154: Oop in java script

var Man = klass( null, { __construct: function (what) { console.log('man constructor'); this.name = what; }, getName: function () { return this.name; } });

Page 155: Oop in java script

var Man = klass( null, { __construct: function (what) { console.log('man constructor'); this.name = what; }, getName: function () { return this.name; } });

Page 156: Oop in java script

var Man = klass( null, { __construct: function (what) { console.log('man constructor'); this.name = what; }, getName: function () { return this.name; } });

Page 157: Oop in java script

var Man = klass( null, { __construct: function (what) { console.log('man constructor'); this.name = what; }, getName: function () { return this.name; } });

Page 158: Oop in java script

var Man = klass( null, { __construct: function (what) { console.log('man constructor'); this.name = what; }, getName: function () { return this.name; } });

Page 159: Oop in java script

var Man = klass( null, { __construct: function (what) { console.log('man constructor'); this.name = what; }, getName: function () { return this.name; } });

Page 160: Oop in java script

var first = new Man('Adam');// logs 'man constructor'first.getName();// 'Adam'

Page 161: Oop in java script

var first = new Man('Adam');// logs 'man constructor'first.getName();// 'Adam'

Page 162: Oop in java script

var first = new Man('Adam');// logs 'man constructor'first.getName();// 'Adam'

Page 163: Oop in java script

var first = new Man('Adam');// logs 'man constructor'first.getName();// 'Adam'

Page 164: Oop in java script

var SuperMan = klass( Man, { __construct: function (what) { console.log('super man constructor'); }, getName: function () { var name = SuperMan.uber.getName.call(this); return 'I am ' + name; } });

Page 165: Oop in java script

var SuperMan = klass( Man, { __construct: function (what) { console.log('super man constructor'); }, getName: function () { var name = SuperMan.uber.getName.call(this); return 'I am ' + name; } });

Page 166: Oop in java script

var SuperMan = klass( Man, { __construct: function (what) { console.log('super man constructor'); }, getName: function () { var name = SuperMan.uber.getName.call(this); return 'I am ' + name; } });

Page 167: Oop in java script

var SuperMan = klass( Man, { __construct: function (what) { console.log('super man constructor'); }, getName: function () { var name = SuperMan.uber.getName.call(this); return 'I am ' + name; } });

Page 168: Oop in java script

var SuperMan = klass( Man, { __construct: function (what) { console.log('super man constructor'); }, getName: function () { var name = SuperMan.uber.getName.call(this); return 'I am ' + name; } });

Page 169: Oop in java script

var SuperMan = klass( Man, { __construct: function (what) { console.log('super man constructor'); }, getName: function () { var name = SuperMan.uber.getName.call(this); return 'I am ' + name; } });

Page 170: Oop in java script

var SuperMan = klass( Man, { __construct: function (what) { console.log('super man constructor'); }, getName: function () { var name = SuperMan.uber.getName.call(this); return 'I am ' + name; } });

Page 171: Oop in java script

var clark = new SuperMan('Clark Kent');// logs 'man constructor'// and 'super man constructor'clark.getName();// 'I am Clark Kent'

Page 172: Oop in java script

var clark = new SuperMan('Clark Kent');// logs 'man constructor'// and 'super man constructor'clark.getName();// 'I am Clark Kent'

Page 173: Oop in java script

var clark = new SuperMan('Clark Kent');// logs 'man constructor'// and 'super man constructor'clark.getName();// 'I am Clark Kent'

Page 174: Oop in java script

var clark = new SuperMan('Clark Kent');// logs 'man constructor'// and 'super man constructor'clark.getName();// 'I am Clark Kent'

Page 175: Oop in java script

var clark = new SuperMan('Clark Kent');// logs 'man constructor'// and 'super man constructor'clark.getName();// 'I am Clark Kent'

Page 176: Oop in java script

var klass = function (Parent, props) { var Child, F, i; Child = function () { if (Child.uber && Child.uber.hasOwnProperty('__construct')) { Child.uber.__construct.apply(this, arguments); } if (Child.prototype.hasOwnProperty('__construct')) { Child.prototype.__construct.apply(this, arguments); } }; Parent = Parent || Object; F = function () {}; F.prototype = Parent.prototype; Child.prototype = new F(); Child.uber = Parent.prototype; Child.prototype.constructor = Child; for (i in props) { if (props.hasOwnProperty(i)) { Child.prototype[i] = props[i]; } } return Child;};

Page 177: Oop in java script

var klass = function (Parent, props) { var Child, F, i; Child = function () { if (Child.uber && Child.uber.hasOwnProperty('__construct')) { Child.uber.__construct.apply(this, arguments); } if (Child.prototype.hasOwnProperty('__construct')) { Child.prototype.__construct.apply(this, arguments); } }; Parent = Parent || Object; F = function () {}; F.prototype = Parent.prototype; Child.prototype = new F(); Child.uber = Parent.prototype; Child.prototype.constructor = Child; for (i in props) { if (props.hasOwnProperty(i)) { Child.prototype[i] = props[i]; } } return Child;};

Page 178: Oop in java script

var klass = function (Parent, props) { var Child, F, i; Child = function () { if (Child.uber && Child.uber.hasOwnProperty('__construct')) { Child.uber.__construct.apply(this, arguments); } if (Child.prototype.hasOwnProperty('__construct')) { Child.prototype.__construct.apply(this, arguments); } }; Parent = Parent || Object; F = function () {}; F.prototype = Parent.prototype; Child.prototype = new F(); Child.uber = Parent.prototype; Child.prototype.constructor = Child; for (i in props) { if (props.hasOwnProperty(i)) { Child.prototype[i] = props[i]; } } return Child;};

Page 179: Oop in java script

var klass = function (Parent, props) { var Child, F, i; Child = function () { if (Child.uber && Child.uber.hasOwnProperty('__construct')) { Child.uber.__construct.apply(this, arguments); } if (Child.prototype.hasOwnProperty('__construct')) { Child.prototype.__construct.apply(this, arguments); } }; Parent = Parent || Object; F = function () {}; F.prototype = Parent.prototype; Child.prototype = new F(); Child.uber = Parent.prototype; Child.prototype.constructor = Child; for (i in props) { if (props.hasOwnProperty(i)) { Child.prototype[i] = props[i]; } } return Child;};

Page 180: Oop in java script

var klass = function (Parent, props) { var Child, F, i; Child = function () { if (Child.uber && Child.uber.hasOwnProperty('__construct')) { Child.uber.__construct.apply(this, arguments); } if (Child.prototype.hasOwnProperty('__construct')) { Child.prototype.__construct.apply(this, arguments); } }; Parent = Parent || Object; F = function () {}; F.prototype = Parent.prototype; Child.prototype = new F(); Child.uber = Parent.prototype; Child.prototype.constructor = Child; for (i in props) { if (props.hasOwnProperty(i)) { Child.prototype[i] = props[i]; } } return Child;};

Page 181: Oop in java script

Child = function () { if (Child.uber && Child.uber.hasOwnProperty('__construct')) { Child.uber.__construct.apply(this, arguments); } if (Child.prototype.hasOwnProperty('__construct')) { Child.prototype.__construct.apply(this, arguments); } };

Page 182: Oop in java script

Child = function () { if (Child.uber && Child.uber.hasOwnProperty('__construct')) { Child.uber.__construct.apply(this, arguments); } if (Child.prototype.hasOwnProperty('__construct')) { Child.prototype.__construct.apply(this, arguments); } };

Page 183: Oop in java script

Child = function () { if (Child.uber && Child.uber.hasOwnProperty('__construct')) { Child.uber.__construct.apply(this, arguments); } if (Child.prototype.hasOwnProperty('__construct')) { Child.prototype.__construct.apply(this, arguments); } };

Page 184: Oop in java script

Child = function () { if (Child.uber && Child.uber.hasOwnProperty('__construct')) { Child.uber.__construct.apply(this, arguments); } if (Child.prototype.hasOwnProperty('__construct')) { Child.prototype.__construct.apply(this, arguments); } };

Page 185: Oop in java script

Child = function () { if (Child.uber && Child.uber.hasOwnProperty('__construct')) { Child.uber.__construct.apply(this, arguments); } if (Child.prototype.hasOwnProperty('__construct')) { Child.prototype.__construct.apply(this, arguments); } };

Page 186: Oop in java script

Parent = Parent || Object; F = function () {}; F.prototype = Parent.prototype; Child.prototype = new F(); Child.uber = Parent.prototype; Child.prototype.constructor = Child;

Page 187: Oop in java script

Parent = Parent || Object; F = function () {}; F.prototype = Parent.prototype; Child.prototype = new F(); Child.uber = Parent.prototype; Child.prototype.constructor = Child;

Page 188: Oop in java script

Parent = Parent || Object; F = function () {}; F.prototype = Parent.prototype; Child.prototype = new F(); Child.uber = Parent.prototype; Child.prototype.constructor = Child;

Page 189: Oop in java script

Parent = Parent || Object; F = function () {}; F.prototype = Parent.prototype; Child.prototype = new F(); Child.uber = Parent.prototype; Child.prototype.constructor = Child;

Page 190: Oop in java script

Parent = Parent || Object; F = function () {}; F.prototype = Parent.prototype; Child.prototype = new F(); Child.uber = Parent.prototype; Child.prototype.constructor = Child;

Page 191: Oop in java script

Parent = Parent || Object; F = function () {}; F.prototype = Parent.prototype; Child.prototype = new F(); Child.uber = Parent.prototype; Child.prototype.constructor = Child;

Page 192: Oop in java script

var klass = function (Parent, props) {

/* ... */

for (i in props) { if (props.hasOwnProperty(i)) { Child.prototype[i] = props[i]; } }

return Child;};

Page 193: Oop in java script

var klass = function (Parent, props) {

/* ... */

for (i in props) { if (props.hasOwnProperty(i)) { Child.prototype[i] = props[i]; } }

return Child;};

Page 194: Oop in java script

var klass = function (Parent, props) {

/* ... */

for (i in props) { if (props.hasOwnProperty(i)) { Child.prototype[i] = props[i]; } }

return Child;};

Page 195: Oop in java script

var klass = function (Parent, props) {

/* ... */

for (i in props) { if (props.hasOwnProperty(i)) { Child.prototype[i] = props[i]; } }

return Child;};

Page 196: Oop in java script

var klass = function (Parent, props) {

/* ... */

for (i in props) { if (props.hasOwnProperty(i)) { Child.prototype[i] = props[i]; } }

return Child;};

Page 197: Oop in java script

var klass = function (Parent, props) {

/* ... */

for (i in props) { if (props.hasOwnProperty(i)) { Child.prototype[i] = props[i]; } }

return Child;};

Page 198: Oop in java script

var klass = function (Parent, props) { var Child, F, i; Child = function () { if (Child.uber && Child.uber.hasOwnProperty('__construct')) { Child.uber.__construct.apply(this, arguments); } if (Child.prototype.hasOwnProperty('__construct')) { Child.prototype.__construct.apply(this, arguments); } }; Parent = Parent || Object; F = function () {}; F.prototype = Parent.prototype; Child.prototype = new F(); Child.uber = Parent.prototype; Child.prototype.constructor = Child; for (i in props) { if (props.hasOwnProperty(i)) { Child.prototype[i] = props[i]; } } return Child;};

Page 199: Oop in java script

X