Demystifying Prototypes

Demystifying
Proto...........
types

null undeﬁned number

string boolean object

b.name
b[“name”]
“a” in b
for (var i in b) …
b.hasOwnProperty(“a”)
b instanceof d

function

function f() {};

f();
new f;

Object
Number
String
Boolean
Function
Array
RegExp
Date

constructor: A
A

function A() {};

constructor: A
A

b

function A() {};
var b = new A;

constructor: A
A x: 1

b

function A() {};
var b = new A;
A.prototype.x = 1;

constructor: A
A x: 1

b y: 2

function A() {};
var b = new A;
A.prototype.x = 1;
b.y = 2;

constructor: A
A x: 1

c b y: 2

function A() {};
var b = new A;
A.prototype.x = 1;
b.y = 2;
var c = new A;

constructor: A
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};

v: 1 constructor: A
w: 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;

v: 1 constructor: A
w: 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;
var d = new A;

v: 1 constructor: A
w: 2
A P x: 1

d c b y: 2

P.hasOwnProperty(“constructor”)
“constructor” in c
for (var i in P) alert(i);
c.constructor
c instanceof A
d instanceof A
d.constructor

null

Object

A

c d

null

Object
function A() {};
function B() {};
B.prototype = new A;
A
var d = new B;

B

d

null

Object
function A() {…};
function B() {};
var Z = function () {};
A
Z.prototype = A.prototype;
B.prototype = new Z;
var d = new B;
B

d

null

Object
function A() {…};
function B() {};
var Z = function () {};
A
Z.prototype = A.prototype;
B.prototype = new Z; Z
var d = new B;
B

d

goog.inherits = function(childCtor, parentCtor) {
/** @constructor */
function tempCtor() {};
tempCtor.prototype = parentCtor.prototype;
childCtor.superClass_ = parentCtor.prototype;
childCtor.prototype = new tempCtor();
childCtor.prototype.constructor = childCtor;
};

exports.inherits = function(ctor, superCtor) {
ctor.super_ = superCtor;
ctor.prototype = Object.create(superCtor.prototype, {
constructor: { value: ctor, enumerable: false }
});
};

null

Object

Function

A

JavaScript Paradox

Function.constructor === Function

Thank You

dmitry@baranovskiy.com

Demystifying Prototypes

More Related Content

What's hot

Similar to Demystifying Prototypes

More from Dmitry Baranovskiy

Recently uploaded

In this document

Demystifying Prototypes