Upload
guy-royse
View
103
Download
0
Tags:
Embed Size (px)
DESCRIPTION
One the most misunderstood concepts in JavaScript is prototypal inheritance. Prototypal inheritance is nothing like classical inheritance but is actually quiet easy to grasp once you let go of the bounds of classes and instances. In this session we will explore the nature of JavaScript objects, how they inherit from one another, and why everyone thought this prototype stuff was so hard in the first place. If you want to up your game and really understand how JavaScript inheritance works, come check out this session.
Citation preview
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