Demystifying Proto...........      types
types
null     undefined   numberstring   boolean    object
null     undefined   numberstring   boolean    object
b.name     b[“name”]       “a” in b  for (var i in b) …b.hasOwnProperty(“a”)   b instanceof d
functionfunction f() {};f();new f;
functionfunction f() {};f();new f;
functionfunction f() {};f();new f;
ObjectNumberStringBooleanFunctionArrayRegExpDate
Afunction A() {};
constructor: A       Afunction A() {};
constructor: A       A              bfunction A() {};var b = new A;
constructor: A       A             x: 1               bfunction A() {};var b = new A;A.prototype.x = 1;
constructor: A       A             x: 1               b     y: 2function A() {};var b = new A;A.prototype.x = 1;b.y = 2;
constructor: A       A             x: 1        c      b     y: 2function A() {};var b = new A;A.prototype.x = 1;b.y = 2;va...
constructor: A        A           x: 1        c      b    y: 2function A() {};var b = new A;A.prototype.x = 1;b.y = 2;var ...
v: 1                       constructor: Aw: 2               A           x: 1               c      b    y: 2       function...
v: 1                       constructor: Aw: 2               A           x: 1       d       c      b    y: 2       function...
v: 1                    constructor: A  w: 2               A     P    x: 1         d     c     b    y: 2P.hasOwnProperty(“...
null           Object            Ac   d
null                              Objectfunction A() {};function B() {};B.prototype = new A;                              ...
null                                    Objectfunction A() {…};function B() {};var Z = function () {};                    ...
null                                    Objectfunction A() {…};function B() {};var Z = function () {};                    ...
goog.inherits = function(childCtor, parentCtor) {   /** @constructor */   function tempCtor() {};   tempCtor.prototype = p...
exports.inherits = function(ctor, superCtor) {   ctor.super_ = superCtor;   ctor.prototype = Object.create(superCtor.proto...
null        Object       FunctionA
null        Object       FunctionA
JavaScript ParadoxFunction.constructor === Function
Thank Youdmitry@baranovskiy.com
Demystifying Prototypes
Upcoming SlideShare
Loading in …5
×

Demystifying Prototypes

12,805 views

Published on

Published in: Technology, Business, Education

Demystifying Prototypes

  1. 1. Demystifying Proto........... types
  2. 2. types
  3. 3. null undefined numberstring boolean object
  4. 4. null undefined numberstring boolean object
  5. 5. b.name b[“name”] “a” in b for (var i in b) …b.hasOwnProperty(“a”) b instanceof d
  6. 6. functionfunction f() {};f();new f;
  7. 7. functionfunction f() {};f();new f;
  8. 8. functionfunction f() {};f();new f;
  9. 9. ObjectNumberStringBooleanFunctionArrayRegExpDate
  10. 10. Afunction A() {};
  11. 11. constructor: A Afunction A() {};
  12. 12. constructor: A A bfunction A() {};var b = new A;
  13. 13. constructor: A A x: 1 bfunction A() {};var b = new A;A.prototype.x = 1;
  14. 14. constructor: A A x: 1 b y: 2function A() {};var b = new A;A.prototype.x = 1;b.y = 2;
  15. 15. constructor: A A x: 1 c b y: 2function A() {};var b = new A;A.prototype.x = 1;b.y = 2;var c = new A;
  16. 16. constructor: A A x: 1 c b y: 2function A() {};var b = new A;A.prototype.x = 1;b.y = 2;var c = new A;A.prototype = {v: 1, w: 2};
  17. 17. v: 1 constructor: Aw: 2 A x: 1 c b y: 2 function A() {}; var b = new A; A.prototype.x = 1; b.y = 2; var c = new A; A.prototype = {v: 1, w: 2};
  18. 18. v: 1 constructor: Aw: 2 A x: 1 d c b y: 2 function A() {}; var b = new A; A.prototype.x = 1; b.y = 2; var c = new A; A.prototype = {v: 1, w: 2}; var d = new A;
  19. 19. v: 1 constructor: A w: 2 A P x: 1 d c b y: 2P.hasOwnProperty(“constructor”)“constructor” in cfor (var i in P) alert(i);c.constructorc instanceof Ad instanceof Ad.constructor
  20. 20. null Object Ac d
  21. 21. null Objectfunction A() {};function B() {};B.prototype = new A; Avar d = new B; B d
  22. 22. null Objectfunction A() {…};function B() {};var Z = function () {}; AZ.prototype = A.prototype;B.prototype = new Z;var d = new B; B d
  23. 23. null Objectfunction A() {…};function B() {};var Z = function () {}; AZ.prototype = A.prototype;B.prototype = new Z; Zvar d = new B; B d
  24. 24. goog.inherits = function(childCtor, parentCtor) { /** @constructor */ function tempCtor() {}; tempCtor.prototype = parentCtor.prototype; childCtor.superClass_ = parentCtor.prototype; childCtor.prototype = new tempCtor(); childCtor.prototype.constructor = childCtor;};
  25. 25. exports.inherits = function(ctor, superCtor) { ctor.super_ = superCtor; ctor.prototype = Object.create(superCtor.prototype, { constructor: { value: ctor, enumerable: false } });};
  26. 26. null Object FunctionA
  27. 27. null Object FunctionA
  28. 28. JavaScript ParadoxFunction.constructor === Function
  29. 29. Thank Youdmitry@baranovskiy.com

×