Oop in java script

8.
{} 1 'nelm.io' true undefined null

10.
new Object();

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

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

13.

14.

15.

16.

17.

18.
{} new Object();

19.
var o =new Object(1); console.log(o.constructor); // function Number() { } // new Number(1);

20.
var o =new Object('1'); console.log(o.constructor); // function String() { } // new String('1');

21.
var o =new Object(true); console.log(o.constructor); // function Boolean() { } // new Boolean(true);

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

23.

24.

25.
new

26.
new Object();

27.
var Car, myCar; Car= function (brand) { this.brand = brand; }; myCar = new Car('Fiat'); // {brand: 'Fiat'}

28.

29.

30.

31.
var Car, myCar; Car= function (brand) { this.brand = brand; }; myCar = Car('Fiat'); // undefined

32.
var Car, myCar; Car= function (brand) { this.brand = brand; }; myCar = Car('Fiat'); // undefined

33.

34.

35.
var Car, myCar; Car= function (brand) { this.brand = brand; console.log( this.constructor === Car ); // true }; myCar = new Car('Fiat');

36.
var Car, myCar; Car= function (brand) { this.brand = brand; console.log( this.constructor === Car ); // undefined }; myCar = Car('Fiat');

37.
var Car, myCar; Car= function (brand) { if (this.constructor !== Car) { return new Car(brand); } this.brand = brand; }; myCar = Car('Fiat');

38.
var Car, myCar; Car= function (brand) { if (this.constructor !== Car) { return new Car(brand); } this.brand = brand; }; myCar = new Car('Fiat');

39.
prototype

40.
{} prototype

41.
var C =function () {}; console.log(C.prototype); { constructor: C, __proto__: Object.prototype }

42.

43.

44.

45.

46.
var C =function () {}; C.prototype = { a: "A", b: "B", constructor: C }; console.log(C.prototype); { a: "A", b: "B", constructor: C, __proto__: Object.prototype }

47.

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

49.

50.

51.

52.

53.
var C =function () {}; C.prototype.a = "A"; C.prototype.b = "B"; console.log(C.prototype); { a: "A", b: "B", constructor: C, __proto__: Object.prototype }

54.
var C =function () {}; C.prototype.a = "A"; C.prototype.b = "B"; console.log(C.prototype); { a: "A", b: "B", constructor: C, __proto__: Object.prototype }

55.
{} prototype

56.
property v.s. attribute

57.
var Car, myCar; Car= function (brand) { this.brand = brand; }; myCar = new Car('Fiat'); Car.prototype; // { /* ... */ } myCar.prototype; // undefined

58.

59.

60.

61.

62.

63.
property v.s. attribute

64.
var Car, myCar; Car= function (brand) { this.brand = brand; }; Car.prototype.getBrand = function () { return this.brand; }; myCar = new Car('Fiat'); myCar.brand; myCar.getBrand();

65.

66.

67.

68.

69.

72.

73.
{} prototype

74.
inheritance

75.
classical inheritance modern

76.
classical inheritance

77.
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');

78.
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');

79.

80.

81.

82.

83.

84.
classical inheritance 1. Default Pattern 2. Rent-a-Constructor 3. Rent and Set Prototype 4. Share Prototype 5. Temp. Constructor

85.

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

87.
var inherit =function (Child, Parent) { Child.prototype = new Parent(); } myCar = new ItalianCar(); myCar.getBrand(); // 'Homemade'

88.

89.

90.

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

92.
myCar.getBrand(); // 'Fiat'

93.
myCar = newItalianCar(); myCar.brand = 'Fiat';

94.
myCar = newItalianCar('Fiat')

95.
myCar = newItalianCar('Fiat') myCar.getBrand(); // 'Homemade'

96.
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();

97.

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

99.
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';

100.

101.

102.

103.

104.
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'

105.

106.

108.

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

110.

111.

112.

113.
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'

114.

115.

116.

117.

118.

119.

120.

121.

122.

124.

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

127.

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

129.

130.

131.

132.

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

135.

136.

137.

138.

139.

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

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

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

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

144.

145.
classical inheritance 1. Default Pattern klass 2. Rent-a-Constructor 3. Rent and Set Prototype 4. Share Prototype 5. Temp. Constructor

146.
var Parent =klass( null, { __construct: function () {}, someMethod: function () {} } ); var Child = klass( Parent, { __construct: function () {}, childMethod: function () {} } );

147.

148.

149.

150.

151.

152.

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

154.

155.

156.

157.

158.

159.

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

161.

162.

163.

164.
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; } } );

165.

166.

167.

168.

169.

170.

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

172.

173.

174.

175.

176.
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; };

177.

178.

179.

180.

181.
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); } };

182.

183.

184.

185.

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

187.

188.

189.

190.

191.

192.
var klass =function (Parent, props) { /* ... */ for (i in props) { if (props.hasOwnProperty(i)) { Child.prototype[i] = props[i]; } } return Child; };

193.

194.

195.

196.

197.

198.

199.
X

Oop in java script

More Related Content

What's hot

Similar to Oop in java script

More from Pierre Spring

Recently uploaded

Oop in java script