Understanding Prototypal Inheritance

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?

Contact InfoGuy Royse

guy@guyroyse.com@guyroyse

GuyRoyse.com

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