JAVA SCRIPT PROTOTYPE VISUALIZED

come and bite me if you still don’t understand the concept of prototype after
this presentation
 PROTOTYPE OF FUNCTION

Every function is born with a prototype object, it’s used as the shared prototype(parent) of the
objects created by this function( invoked as constructor function).
The prototype is initially an empty object, you can add members to it. Such all its “children” have
access to these members( properties, methods ) as well.

F.prototype prototyp constructo

e r
F.prototype.constructor
PROTOTYPE OF OBJECT

Every Object is born referencing to a prototype object(parent) by a secret property

proto .

proto
WHAT’S THE RELATIONSHIP?

What’s the relationship between these two concept?

F
? proto
prototyp constructo
e r
 CONSTRUCT A NEW OBJECT

let’s walk through the following simple code to understand the whole process

var Person = function(name, age){ this.name = name;

this.age = age;
name: Bob
}; age: 18

Person.prototype.sayMyName = function(){ Person

console.log("I'm " + this.name);
}; new
prototyp constructo
name: Alice
e r
age: 17
var linus = new Person('Linus Torvalds'); proto
linus.sayMyName();

name: Linus sayMyName

Toe
ag rv:a4lds
6
linus.sayMyName
CONSTRUCT A NEW OBJECT

there’re 3 steps are done by the javascript engine whenever a new instance is
created, let’s see them in action.

1. Create a bare object

2. create a link “ proto ” points to the prototype of the constructor function
3. execute the function body of the
4. constructor function
PROTOTYPE CHAIN

built-
in
F Object
ne
w
prototyp constructo prototyp constructo
e r e r

proto proto proto

This is the prototype chain

Object.prototype is the top of

prototype chain, Object.prototype
doesn’t have prototype
OBJECT LITERAL

var anObject = {}; built-In

// is equal to
var anObject = new Object(); Object
ne
w
prototyp constructo
e r

proto
anObjec
t
 RESOLVE PROPERTY
let’s see how javascript engine resolve
var value = anObject.someProperty; property lookup

built-
in
Lookup “someProperty” on F2 F1 Object
anObject
1
prototyp constructo prototyp constructo prototyp constructo
e r e r e r

proto proto proto

anObject
3
2 4 5
b b b b
not found, continue not found, continue 4a not found, continue 5a not found, return
2a 3a
lookup “someProperty” on
its proto object
lookup “someProperty” on lookup “someProperty” on undefined
its proto object its proto object

found, return found, return found, return found, return

value value value value
 MODIFY PROPERTY

anObject.someProperty = “some property”;

built-
in
F2 F1 Object

prototyp constructo prototyp constructo prototyp constructo

e r e r e r

proto proto proto

anObject

somePropert somePropert
y y

When you do changes to a property of

an object, it always affect the current
object only. If the property doesn’t
exist, property is added to the object. It
won’t look up to the prototype chain.
 PSEUDO-CLASSICAL INHERITANCE
I put the prototype and function up down just to leave
let’s walk through the following code to see how room for following animation, don’t be confused
here, it’s the same stuff
classical inheritance is achieved Now we’ve achieved pseudo-classical
inheritance !!!

Inheritance

prototyp
e r

Develope prototyp constructo

Person
r e r

prototyp constructo
F
prototyp constructo
e r e r
new prototyp
e
proto

let’s remove the irrelevant part now

 WRONG PSEUDO-CLASSICAL INHERITANCE

let’s look at a frequent mistake of doing classical Why is the first example is wrong ? Well, I
wouldn’t say it’s always wrong, but in most
Developer Person cases, it’s wrong. Because the subclass
new
Developer’s prototype is an
prototyp constructo prototyp constructo
instance of Person Class, that means it’s a
e r e r Wrong special individual person. And in most
proto case, the Person Constructor would
require some arguments to initialize a
Person instance, such as: name, age … Do
we want these properties on the prototype
Developer Person of Developer ? No ! What we want is a bare
object which just has a “ proto ” points
F to the prototype of Person Class. That’s
prototyp constructo prototyp constructo correc
e r e r exactly how the second example does.
new prototyp t Through a temporary constructor function
e
proto F which does nothing in its constructor, it
will create a bare object points to the
prototype of F which is equal to prototype
OBJECT.CREATE

In ES5, a method is included to implement inheritance:

our simple version ES5 version, more

powerful
// utility function for inheritance
var inherit = function(proto){
function F(){} Object.create
F.prototype = proto;
return new F();
};
 PROTOTYPAL INHERITANCE
let’s walk through the following code to see how
prototypal inheritance is achieved That’s it, we accomplished prototypal inheritance. You
can see how much easier prototypal inheritance is than
Classical inheritance. That’s because it completely
discard Constructor parts. And more importantly, in
javascript, the essence of inheritance is through the
“ proto ” link between objects, aka. prototype chain.
At the heart of the classical inheritance, it’s also using
the prototype chain achieving inheritance. Only it add
an extra layer of “Constructor” to simulate the “Class”
concept from other language: java, c#... to make it more
comfortable for developers from those languages. Even
it feels somehow comfortable at first, but without truly
understanding of the essence of prototypal inheritance,
You’ll get lost and confused at last !!! So that’s why a lot
proto proto
linuos f javascript gurus advoDecvaelotpee prototypal inheritancePerasonn d
r
recommend avoid using of classical inheritance.
 __PROTO__ OF FUNCTION

Every function is a “child” of Function.prototype

built- built-
in in
Fu nction Object
proto

prototyp constructo prototyp constructo

e r e r

proto proto
F function
Empty(){}

ne
w
prototyp constructo
e r proto

proto
JAVASCRIPT OBJECT LAYOUT

This is a graph of object layout I grab it

from some online website. If you
understand the prototype concept
correctly, you can easily understand the
graph. But personally, I feel it’s a little
messy with all the arrows floating around.
Anyway, it’s a great graph for your
reference when you forget the
relationship.