Understanding Prototypal Inheritance
Download as PPTX, PDF0 likes817 views
This document discusses prototypal inheritance in JavaScript. It explains that objects are hashes, and prototypes allow objects to inherit properties from parent objects. The document demonstrates how to define prototypes using Object.create, and shows how this allows child objects to access properties from parents in the prototype chain even if they are not directly defined on the child. It also discusses how classes are an "inconvenient fiction" in JavaScript and are simply constructor functions with methods added to the prototype.
![Object or Not?
varfoo = new Object();
varfoo = {};
varfoo = new String(‘foo’);
varfoo = ‘foo’;
varfoo = new Number(42);
varfoo = 42;
varfoo = new Boolean(false);
varfoo = false;
varfoo = null;
varfoo = undefined;
varfoo = function() {};
varfoo = [1, 2, 3];](https://image.slidesharecdn.com/understandingprototypalinheritance-140115233145-phpapp01/85/Understanding-Prototypal-Inheritance-7-320.jpg)
![Reading Properties
alice.name;
// ‘Alice…’
‘name’
• ‘Alice Bone-crusher’
alice*‘class’+;
// ‘Fighter’
‘class’
• ‘Fighter’
‘level’
•5
var property = ‘hitPoints’;
alice[property]; // 57;
‘hitPoints’ • 57
‘shield’
• true](https://image.slidesharecdn.com/understandingprototypalinheritance-140115233145-phpapp01/85/Understanding-Prototypal-Inheritance-9-320.jpg)
![Writing Properties
alice.name =
‘Alice Spellster’;
‘name’
• ‘Alice Spellster’
‘class’
• ‘Wizard’
‘level’
•5
alice*‘class’+ = ‘Wizard’;
var property = ‘hitPoints’;
alice[property] = 24;
‘hitPoints’
‘shield’
• 24
• true](https://image.slidesharecdn.com/understandingprototypalinheritance-140115233145-phpapp01/85/Understanding-Prototypal-Inheritance-10-320.jpg)
![Removing Properties
delete alice.shield;
• ‘Wizard’
‘level’
•5
‘hitPoints’
var property = ‘damage’;
delete alice[property];
• ‘Alice Spellster’
‘class’
delete alice*‘spellLevel’+;
‘name’
• 24
‘shield’
• true
‘spell’
• ‘fireball’
‘spellLevel’ • 3
‘damage’
• ‘5d6’](https://image.slidesharecdn.com/understandingprototypalinheritance-140115233145-phpapp01/85/Understanding-Prototypal-Inheritance-12-320.jpg)
Understanding Prototypal Inheritance
- 7. Object or Not? varfoo = new Object(); varfoo = {}; varfoo = new String(‘foo’); varfoo = ‘foo’; varfoo = new Number(42); varfoo = 42; varfoo = new Boolean(false); varfoo = false; varfoo = null; varfoo = undefined; varfoo = function() {}; varfoo = [1, 2, 3];
- 8. Objects are Hashes varalice = { name : ‘Alice Bone-crusher’, class : ‘Fighter’, level : 5, hitPoints : 57, shield : true }; ‘name’ • ‘Alice Bone-crusher’ ‘class’ • ‘Fighter’ ‘level’ •5 ‘hitPoints’ • 57 ‘shield’ • true
- 9. Reading Properties alice.name; // ‘Alice…’ ‘name’ • ‘Alice Bone-crusher’ alice*‘class’+; // ‘Fighter’ ‘class’ • ‘Fighter’ ‘level’ •5 var property = ‘hitPoints’; alice[property]; // 57; ‘hitPoints’ • 57 ‘shield’ • true
- 10. Writing Properties alice.name = ‘Alice Spellster’; ‘name’ • ‘Alice Spellster’ ‘class’ • ‘Wizard’ ‘level’ •5 alice*‘class’+ = ‘Wizard’; var property = ‘hitPoints’; alice[property] = 24; ‘hitPoints’ ‘shield’ • 24 • true
- 11. Adding Properties alice.spell = ‘fireball’; • ‘Wizard’ ‘level’ •5 ‘hitPoints’ var property = ‘damage’; alice*property+ = ‘5d6’; • ‘Alice Spellster’ ‘class’ alice*‘spellLevel’+ = 3; ‘name’ • 24 ‘shield’ • true ‘spell’ • ‘fireball’ ‘spellLevel’ • 3 ‘damage’ • ‘5d6’
- 12. Removing Properties delete alice.shield; • ‘Wizard’ ‘level’ •5 ‘hitPoints’ var property = ‘damage’; delete alice[property]; • ‘Alice Spellster’ ‘class’ delete alice*‘spellLevel’+; ‘name’ • 24 ‘shield’ • true ‘spell’ • ‘fireball’ ‘spellLevel’ • 3 ‘damage’ • ‘5d6’
- 13. Undefined & Objects alice.shield; // undefined ‘name’ • ‘Alice Spellster’ ‘class’ • ‘Wizard’ ‘level’ •5 ‘hitPoints’ ‘spell’ • 24 • ‘fireball’
- 14. Undefined & Objects alice.shield = undefined; alice.shield; // undefined ‘name’ • ‘Alice Spellster’ ‘class’ • ‘Wizard’ ‘level’ •5 ‘hitPoints’ • 24 ‘spell’ • ‘fireball’ ‘shield’ • undefined
- 15. Undefined & Objects delete alice.shield; ‘name’ • ‘Alice Spellster’ ‘class’ • ‘Wizard’ ‘level’ •5 ‘hitPoints’ • 24 ‘spell’ • ‘fireball’ ‘shield’ • undefined
- 16. They’re Just Keys alice*‘spell level’+ = 3; • ‘Wizard’ ‘level’ •5 ‘hitPoints’ alice*‘%foo%’+ = true; • ‘Alice Spellster’ ‘class’ alice*‘1234’+ = 5; ‘name’ • 24 ‘spell’ • ‘fireball’ ‘spell level’ • 3 ‘1234’ ‘%foo%’ •5 • true
- 18. Prototypes
- 19. What’s a Prototype? child parent • firstName : “Bobby” • hasCandy : true • firstName : “Bob” • lastName : “Tables”
- 20. How It Works child.firstName; child.lastName; child.hasCandy; // “Bobby” // “Tables” // true parent.firstName; parent.lastName; parent.hasCandy; // “Bob” // “Tables” // undefined child parent • firstName : “Bobby” • hasCandy : true • firstName : “Bob” • lastName : “Tables”
- 21. The Prototype Chain child parent grandparent great_grandparent • firstName : “Bobby” • hasCandy : true • firstName : “Bob” • firstName : “Robert” • alive : true • lastName : “Tables” • alive: false
- 22. Setting the Prototype var parent = {}; parent.firstName = “Bob”; parent.lastName = “Tables”; var child = Object.create(parent); child.firstName = “Bobby”; child.hasCandy = true; child parent • firstName : “Bobby” • hasCandy : true • firstName : “Bob” • lastName : “Robertson”
- 23. So Why Did We Think This Was So Complex?
- 24. 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; child parent Object.prototype • firstName : “Bobby” • hasCandy : true • firstName : “Bob” • lastName : “Tables” • toString : function() {} • valueOf : function() {}
- 25. Object.create = function(parent) { var fn = function() {}; fn.prototype = parent; return new fn(); };
- 26. What’s a Class?
- 28. A Simple Class var Character = function(name, level) { this.name = name; this.level = level; }; varalice = newCharacter(‘Alice’, 5);
- 29. Anatomy of Character Prototype Chain Object.prototype toString : function() {} valueOf : function() {} function call : function() {} apply : function() {} Character prototype : {} var Character = function(name, level) { this.name = name; this.level = level; } Character.prototype
- 30. Now Call New Prototype Chain Object.prototype toString : function() {} valueOf : function() {} function call : function() {} apply : function() {} Character prototype : {} new var Character = function(name, level) { this.name = name; this.level = level; } Character.prototype alice name : ‘Alice’ level : 5 varalice = new Character(‘Alice’, 5);
- 31. A More Complex Class var Character = function(name, level) { this.name = name; this.level = level; }; Character.prototype.hitPoints = function() { return this.level * 5; }; varalice = new Character(alice, 5); alice.hitPoints(); // 25
- 32. Anatomy of Character Prototype Chain Object.prototype toString : function() {} valueOf : function() {} function call : function() {} apply : function() {} Character prototype : {} var Character = function(name, level) { this.name = name; this.level = level; } Character.prototype.hitPoints = function() { return this.level * 5; }; Character.prototype hitPoints : function() {}
- 33. Now Call New Prototype Chain Object.prototype toString : function() {} valueOf : function() {} function call : function() {} apply : function() {} Character prototype : {} new var Character = function(name, level) { this.name = name; this.level = level; Character.prototype.hitPoints = } function() { return this.level * 5; }; Character.prototype hitPoints : function() {} alice name : ‘Alice’ level : 5 varalice = new Character(‘Alice’, 5);
- 34. Object.create = function(parent) { var fn = function() {}; fn.prototype = parent; return new fn(); };
- 35. Anatomy of Object.create Prototype Chain Object.prototype toString : function() {} valueOf : function() {} var fn = function() {}; function call : function() {} apply : function() {} fn prototype : {} fn.prototype = parent; fn.prototype
- 36. Object.create = function(parent) { var fn = function() {}; fn.prototype = parent; return new fn(); };
- 37. Now Call New Object.prototype toString : function() {} valueOf : function() {} Prototype Chain var fn = function() {}; function call : function() {} apply : function() {} fn prototype : {} fn.prototype = parent; fn.prototype child new return new fn();
- 38. Whew!
- 39. In Summary • Objects are Hashes • Use Object.create to define prototypes • Prototypes aren’t hard… …but the plumbing that makes it work is.
- 40. Questions?
Editor's Notes
- #3: NameTechnologiesCompanyCBusJS
- #4: Rules of EngagementInterrupt me-80/20 ruleWe’re gonna go deep (up to the edge of what I know)- not going to talk about browsers – this is about the language
- #5: Poll the audience
- #6: Not really… in some ways their actually quite easy but first you have to understand objects
- #7: Poll the audience… tell the smarties to keep quiet
- #14: Undefined exists, I suspect, because null is empty while undefined is not in the hash, but…
- #15: …of course you can do this. Which pretty much undermines that premise. Can’t delete by setting property to undefined
- #20: Every object has a prototype (which is another object)Note I said “has a” and not “is a” – this is compositionIf it ain’t found in the child, look in the parent
- #23: At this point we know how to use prototypal inheritanceNOTE the empty object here
- #24: Because of the new operator and the prototype property
- #25: We didn’t have a new operator…. but we had an implied one.object is an implied root, can be accessed via Object.prototype
- #26: It’s inside of the definition of Object.create as well.new suggests classes and classical inheritance while prototype suggests that stuff we were talking about earlierThis doesn’t quite jive, So let’s look at classes
- #27: Poll the audience
- #28: Not real, a confusing layer on top of an otherwise pleasant functional language.People always contradict me on this point… but psuedo classes aren’t classes… that’s why the psuedo is there
- #29: Where’s the word class… looks like a function to me. But, we do have the keyword newIt’s really a constructor function the makes objects … classes are templates. JavaScript doesn’t have those, just these functions that you call with new(and make sure you call new ‘cuz otherwise, bad stuff can happen)
- #32: NOTE the function on Character.prototypeWe are adding something to the prototype… it’s just an object, we can do that easily.In fact you can do this with any “class” in Javascript including Number, Array, Boolean, String, and Object
- #35: Remember this guy? Now we have the tools to understand how he works…Note that we are *replacing* the prototype of this constructor function as opposed to adding to it or just taking it as isAlso note the grand utility of the fn function … it doesn’t do much .. In fact, it’s just there to give use something with a prototype property we can call new against
- #36: We are reassigning the prototype property of the function… yes you can do this.
- #42: NameTechnologiesCompanyCBusJS