Date post: | 15-Jan-2015 |
Category: |
Technology |
Upload: | guy-royse |
View: | 97 times |
Download: | 0 times |
Understanding Prototypal Inheritance
Guy Royse@guyroyse
WhoIs
ThisGuy?
RULES OF ENGAGEMENT
GetYour
HandsUp!
Aren’t Prototypes Hard?
What’san
Object?
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];
Objects are Hashesvar alice = {
name : ‘Alice Bone-crusher’,class : ‘Fighter’,level : 5,hitPoints : 57,shield : true
};
Reading Propertiesalice.name; //
‘Alice…’
alice[‘class’]; // ‘Fighter’
var property = ‘hitPoints’;alice[property]; //
57;
Writing Propertiesalice.name =
‘Alice Spellster’;
alice[‘class’] = ‘Wizard’;
var property = ‘hitPoints’;alice[property] = 24;
Adding Propertiesalice.spell = ‘fireball’;
alice[‘spellLevel’] = 3;
var property = ‘damage’;alice[property] = ‘5d6’;
Removing Propertiesdelete alice.shield;
delete alice[‘spellLevel’];
var property = ‘damage’;delete alice[property];
Undefined & Objectsalice.shield; //
undefined
Undefined & Objectsalice.shield = undefined;
alice.shield; // undefined
Undefined & Objectsdelete alice.shield;
They’re Just Keysalice[‘spell level’] = 3;
alice[‘1234’] = 5;
alice[‘%foo%’] = true;
ObjectsAre
Hashes
Prototypes
What’s a Prototype?
How It Workschild.firstName; // “Bobby”child.lastName; // “Tables”child.hasCandy; // true
parent.firstName; // “Bob”parent.lastName; // “Tables”parent.hasCandy; // undefined
The Prototype Chain
Setting the Prototypevar parent = {};parent.firstName = “Bob”;parent.lastName = “Tables”;
var child = Object.create(parent);child.firstName = “Bobby”;child.hasCandy = true;
So Why DidWe Think This
Was So Complex?
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;
Object.create = function(parent) {var fn = function() {};fn.prototype = parent;return new fn();
};
What’sa
Class?
Classesare an
InconvenientFiction
A Simple Class
var Character = function(name, level) {this.name = name;this.level = level;
};
var alice = new Character(‘Alice’, 5);
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;}
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);
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
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; };
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;};
Object.create = function(parent) {var fn = function() {};fn.prototype = parent;return new fn();
};
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;
Object.create = function(parent) {var fn = function() {};fn.prototype = parent;return new fn();
};
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;
Whew!
In Summary
• Objects are Hashes• Use Object.create to define prototypes• Prototypes aren’t hard…
…but the plumbing that makes it work is.
Questions?
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