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.
