Download - Understanding Prototypal Inheritance
![Page 1: Understanding Prototypal Inheritance](https://reader035.vdocuments.site/reader035/viewer/2022081414/54b79ed84a79590e758b45eb/html5/thumbnails/1.jpg)
Understanding Prototypal Inheritance
Guy Royse@guyroyse
![Page 2: Understanding Prototypal Inheritance](https://reader035.vdocuments.site/reader035/viewer/2022081414/54b79ed84a79590e758b45eb/html5/thumbnails/2.jpg)
WhoIs
ThisGuy?
![Page 3: Understanding Prototypal Inheritance](https://reader035.vdocuments.site/reader035/viewer/2022081414/54b79ed84a79590e758b45eb/html5/thumbnails/3.jpg)
RULES OF ENGAGEMENT
![Page 4: Understanding Prototypal Inheritance](https://reader035.vdocuments.site/reader035/viewer/2022081414/54b79ed84a79590e758b45eb/html5/thumbnails/4.jpg)
GetYour
HandsUp!
![Page 5: Understanding Prototypal Inheritance](https://reader035.vdocuments.site/reader035/viewer/2022081414/54b79ed84a79590e758b45eb/html5/thumbnails/5.jpg)
Aren’t Prototypes Hard?
![Page 6: Understanding Prototypal Inheritance](https://reader035.vdocuments.site/reader035/viewer/2022081414/54b79ed84a79590e758b45eb/html5/thumbnails/6.jpg)
What’san
Object?
![Page 7: Understanding Prototypal Inheritance](https://reader035.vdocuments.site/reader035/viewer/2022081414/54b79ed84a79590e758b45eb/html5/thumbnails/7.jpg)
Object or Not?var foo = new Object();var foo = {};var foo = new String(‘foo’);var foo = ‘foo’;var foo = new Number(42);var foo = 42;
var foo = new Boolean(false);var foo = false;var foo = null;var foo = undefined;var foo = function() {};var foo = [1, 2, 3];
![Page 8: Understanding Prototypal Inheritance](https://reader035.vdocuments.site/reader035/viewer/2022081414/54b79ed84a79590e758b45eb/html5/thumbnails/8.jpg)
Objects are Hashesvar alice = {
name : ‘Alice Bone-crusher’,class : ‘Fighter’,level : 5,hitPoints : 57,shield : true
};
![Page 9: Understanding Prototypal Inheritance](https://reader035.vdocuments.site/reader035/viewer/2022081414/54b79ed84a79590e758b45eb/html5/thumbnails/9.jpg)
Reading Propertiesalice.name; //
‘Alice…’
alice[‘class’]; // ‘Fighter’
var property = ‘hitPoints’;alice[property]; //
57;
![Page 10: Understanding Prototypal Inheritance](https://reader035.vdocuments.site/reader035/viewer/2022081414/54b79ed84a79590e758b45eb/html5/thumbnails/10.jpg)
Writing Propertiesalice.name =
‘Alice Spellster’;
alice[‘class’] = ‘Wizard’;
var property = ‘hitPoints’;alice[property] = 24;
![Page 11: Understanding Prototypal Inheritance](https://reader035.vdocuments.site/reader035/viewer/2022081414/54b79ed84a79590e758b45eb/html5/thumbnails/11.jpg)
Adding Propertiesalice.spell = ‘fireball’;
alice[‘spellLevel’] = 3;
var property = ‘damage’;alice[property] = ‘5d6’;
![Page 12: Understanding Prototypal Inheritance](https://reader035.vdocuments.site/reader035/viewer/2022081414/54b79ed84a79590e758b45eb/html5/thumbnails/12.jpg)
Removing Propertiesdelete alice.shield;
delete alice[‘spellLevel’];
var property = ‘damage’;delete alice[property];
![Page 13: Understanding Prototypal Inheritance](https://reader035.vdocuments.site/reader035/viewer/2022081414/54b79ed84a79590e758b45eb/html5/thumbnails/13.jpg)
Undefined & Objectsalice.shield; //
undefined
![Page 14: Understanding Prototypal Inheritance](https://reader035.vdocuments.site/reader035/viewer/2022081414/54b79ed84a79590e758b45eb/html5/thumbnails/14.jpg)
Undefined & Objectsalice.shield = undefined;
alice.shield; // undefined
![Page 15: Understanding Prototypal Inheritance](https://reader035.vdocuments.site/reader035/viewer/2022081414/54b79ed84a79590e758b45eb/html5/thumbnails/15.jpg)
Undefined & Objectsdelete alice.shield;
![Page 16: Understanding Prototypal Inheritance](https://reader035.vdocuments.site/reader035/viewer/2022081414/54b79ed84a79590e758b45eb/html5/thumbnails/16.jpg)
They’re Just Keysalice[‘spell level’] = 3;
alice[‘1234’] = 5;
alice[‘%foo%’] = true;
![Page 17: Understanding Prototypal Inheritance](https://reader035.vdocuments.site/reader035/viewer/2022081414/54b79ed84a79590e758b45eb/html5/thumbnails/17.jpg)
ObjectsAre
Hashes
![Page 18: Understanding Prototypal Inheritance](https://reader035.vdocuments.site/reader035/viewer/2022081414/54b79ed84a79590e758b45eb/html5/thumbnails/18.jpg)
Prototypes
![Page 19: Understanding Prototypal Inheritance](https://reader035.vdocuments.site/reader035/viewer/2022081414/54b79ed84a79590e758b45eb/html5/thumbnails/19.jpg)
What’s a Prototype?
![Page 20: Understanding Prototypal Inheritance](https://reader035.vdocuments.site/reader035/viewer/2022081414/54b79ed84a79590e758b45eb/html5/thumbnails/20.jpg)
How It Workschild.firstName; // “Bobby”child.lastName; // “Tables”child.hasCandy; // true
parent.firstName; // “Bob”parent.lastName; // “Tables”parent.hasCandy; // undefined
![Page 21: Understanding Prototypal Inheritance](https://reader035.vdocuments.site/reader035/viewer/2022081414/54b79ed84a79590e758b45eb/html5/thumbnails/21.jpg)
The Prototype Chain
![Page 22: Understanding Prototypal Inheritance](https://reader035.vdocuments.site/reader035/viewer/2022081414/54b79ed84a79590e758b45eb/html5/thumbnails/22.jpg)
Setting the Prototypevar parent = {};parent.firstName = “Bob”;parent.lastName = “Tables”;
var child = Object.create(parent);child.firstName = “Bobby”;child.hasCandy = true;
![Page 23: Understanding Prototypal Inheritance](https://reader035.vdocuments.site/reader035/viewer/2022081414/54b79ed84a79590e758b45eb/html5/thumbnails/23.jpg)
So Why DidWe Think This
Was So Complex?
![Page 24: Understanding Prototypal Inheritance](https://reader035.vdocuments.site/reader035/viewer/2022081414/54b79ed84a79590e758b45eb/html5/thumbnails/24.jpg)
What’s at the Top?var parent = new Object();parent.firstName = “Bob”; parent.lastName = “Tables”;
var child = Object.create(parent);child.firstName = “Bobby”;child.hasCandy = true;
![Page 25: Understanding Prototypal Inheritance](https://reader035.vdocuments.site/reader035/viewer/2022081414/54b79ed84a79590e758b45eb/html5/thumbnails/25.jpg)
Object.create = function(parent) {var fn = function() {};fn.prototype = parent;return new fn();
};
![Page 26: Understanding Prototypal Inheritance](https://reader035.vdocuments.site/reader035/viewer/2022081414/54b79ed84a79590e758b45eb/html5/thumbnails/26.jpg)
What’sa
Class?
![Page 27: Understanding Prototypal Inheritance](https://reader035.vdocuments.site/reader035/viewer/2022081414/54b79ed84a79590e758b45eb/html5/thumbnails/27.jpg)
Classesare an
InconvenientFiction
![Page 28: Understanding Prototypal Inheritance](https://reader035.vdocuments.site/reader035/viewer/2022081414/54b79ed84a79590e758b45eb/html5/thumbnails/28.jpg)
A Simple Class
var Character = function(name, level) {this.name = name;this.level = level;
};
var alice = new Character(‘Alice’, 5);
![Page 29: Understanding Prototypal Inheritance](https://reader035.vdocuments.site/reader035/viewer/2022081414/54b79ed84a79590e758b45eb/html5/thumbnails/29.jpg)
Anatomy of Character
Characterprototype : {}
functioncall : function() {}apply : function() {}
Object.prototypetoString : function() {}valueOf : function() {}
Character.prototype
Prot
otyp
e Ch
ain var Character = function(name, level) {
this.name = name; this.level = level;}
![Page 30: Understanding Prototypal Inheritance](https://reader035.vdocuments.site/reader035/viewer/2022081414/54b79ed84a79590e758b45eb/html5/thumbnails/30.jpg)
Now Call New
Characterprototype : {}
functioncall : function() {}apply : function() {}
Prot
otyp
e Ch
ain
alicename : ‘Alice’level : 5
new
Character.prototype
Object.prototypetoString : function() {}valueOf : function() {}
var Character = function(name, level) {this.name = name;this.level = level;
}
var alice = new Character(‘Alice’, 5);
![Page 31: Understanding Prototypal Inheritance](https://reader035.vdocuments.site/reader035/viewer/2022081414/54b79ed84a79590e758b45eb/html5/thumbnails/31.jpg)
A More Complex Classvar Character = function(name, level) {
this.name = name;this.level = level;
};
Character.prototype.hitPoints = function() {return this.level * 5;
};
var alice = new Character(alice, 5);
alice.hitPoints(); // 25
![Page 32: Understanding Prototypal Inheritance](https://reader035.vdocuments.site/reader035/viewer/2022081414/54b79ed84a79590e758b45eb/html5/thumbnails/32.jpg)
Anatomy of Character
Characterprototype : {}
functioncall : function() {}apply : function() {}
Object.prototypetoString : function() {}valueOf : function() {}
Character.prototypehitPoints : function() {}
Prot
otyp
e Ch
ain var Character = function(name, level) {
this.name = name; this.level = level;}
Character.prototype.hitPoints = function() { return this.level * 5; };
![Page 33: Understanding Prototypal Inheritance](https://reader035.vdocuments.site/reader035/viewer/2022081414/54b79ed84a79590e758b45eb/html5/thumbnails/33.jpg)
Now Call New
Characterprototype : {}
functioncall : function() {}apply : function() {}
Prot
otyp
e Ch
ain
alicename : ‘Alice’level : 5
new
Character.prototypehitPoints : function() {}
Object.prototypetoString : function() {}valueOf : function() {}
var Character = function(name, level) { this.name = name; this.level = level;}
var alice = new Character(‘Alice’, 5);
Character.prototype.hitPoints = function() { return this.level * 5;};
![Page 34: Understanding Prototypal Inheritance](https://reader035.vdocuments.site/reader035/viewer/2022081414/54b79ed84a79590e758b45eb/html5/thumbnails/34.jpg)
Object.create = function(parent) {var fn = function() {};fn.prototype = parent;return new fn();
};
![Page 35: Understanding Prototypal Inheritance](https://reader035.vdocuments.site/reader035/viewer/2022081414/54b79ed84a79590e758b45eb/html5/thumbnails/35.jpg)
Anatomy of Object.create
fnprototype : {}
functioncall : function() {}apply : function() {}
Object.prototypetoString : function() {}valueOf : function() {}
fn.prototype
Prot
otyp
e Ch
ain var fn = function() {};
fn.prototype = parent;
![Page 36: Understanding Prototypal Inheritance](https://reader035.vdocuments.site/reader035/viewer/2022081414/54b79ed84a79590e758b45eb/html5/thumbnails/36.jpg)
Object.create = function(parent) {var fn = function() {};fn.prototype = parent;return new fn();
};
![Page 37: Understanding Prototypal Inheritance](https://reader035.vdocuments.site/reader035/viewer/2022081414/54b79ed84a79590e758b45eb/html5/thumbnails/37.jpg)
Now Call New
fnprototype : {}
functioncall : function() {}apply : function() {}
Prot
otyp
e Ch
ain
childnew
fn.prototype
Object.prototypetoString : function() {}valueOf : function() {}
return new fn();
var fn = function() {};
fn.prototype = parent;
![Page 38: Understanding Prototypal Inheritance](https://reader035.vdocuments.site/reader035/viewer/2022081414/54b79ed84a79590e758b45eb/html5/thumbnails/38.jpg)
Whew!
![Page 39: Understanding Prototypal Inheritance](https://reader035.vdocuments.site/reader035/viewer/2022081414/54b79ed84a79590e758b45eb/html5/thumbnails/39.jpg)
In Summary
• Objects are Hashes• Use Object.create to define prototypes• Prototypes aren’t hard…
…but the plumbing that makes it work is.
![Page 40: Understanding Prototypal Inheritance](https://reader035.vdocuments.site/reader035/viewer/2022081414/54b79ed84a79590e758b45eb/html5/thumbnails/40.jpg)
Questions?
![Page 42: Understanding Prototypal Inheritance](https://reader035.vdocuments.site/reader035/viewer/2022081414/54b79ed84a79590e758b45eb/html5/thumbnails/42.jpg)
Image Credits
• http://www.flickr.com/photos/justin_case/1525042316• http://www.flickr.com/photos/tim_d/155441805• http://www.flickr.com/photos/sybrenstuvel/2335168467• http://www.flickr.com/photos/stawarz/3683017780