building blocks of JavaScript OOP. Objects: maps from strings to values Properties: entries in the map Methods: properties whose values are functions this refers to receiver of method call // Object literal var jane = { // Property name: 'Jane', // Method describe: function () { return 'Person named ' + this.name; } }; JS advantage: create objects directly, introduce abstractions later Dr. Axel Rauschmayer (2ality.com) The Four Layers of JavaScript OOP 2014-02-25 5 / 35
freely delete and add properties Different: inheritance (via prototype chains) fast access to properties (via constructors1) 1If you don’t add or remove properties after construction. Dr. Axel Rauschmayer (2ality.com) The Four Layers of JavaScript OOP 2014-02-25 7 / 35
= { name: 'Jane', describe: function () { return 'Person named ' + this.name; } }; var tarzan = { name: 'Tarzan', describe: function () { return 'Person named ' + this.name; } }; Dr. Axel Rauschmayer (2ality.com) The Four Layers of JavaScript OOP 2014-02-25 9 / 35
'Jane' name __proto__ 'Tarzan' describe function() {...} jane tarzan PersonProto jane and tarzan share the same prototype object. Both prototype chains work like single objects. Dr. Axel Rauschmayer (2ality.com) The Four Layers of JavaScript OOP 2014-02-25 10 / 35
= { describe: function () { return 'Person named ' + this.name; } }; var jane = { __proto__: PersonProto, name: 'Jane' }; var tarzan = { __proto__: PersonProto, name: 'Tarzan' }; Dr. Axel Rauschmayer (2ality.com) The Four Layers of JavaScript OOP 2014-02-25 11 / 35
6: __proto__ ECMAScript 5: Object.create() Object.getPrototypeOf() Dr. Axel Rauschmayer (2ality.com) The Four Layers of JavaScript OOP 2014-02-25 12 / 35
var PersonProto = { describe: function () { return 'Person named ' + this.name; } }; var jane = Object.create(PersonProto); jane.name = 'Jane'; Object.getPrototypeOf(obj) # Object.getPrototypeOf(jane) === PersonProto true Dr. Axel Rauschmayer (2ality.com) The Four Layers of JavaScript OOP 2014-02-25 13 / 35
this.name = name; this.describe = function () { return 'Person named ' + this.name; }; } var jane = new Person('Jane'); console.log(jane instanceof Person); // true Dr. Axel Rauschmayer (2ality.com) The Four Layers of JavaScript OOP 2014-02-25 15 / 35
{...} name 'Tarzan' tarzan describe function() {...} name 'Jane' jane How to eliminate the redundancy? Dr. Axel Rauschmayer (2ality.com) The Four Layers of JavaScript OOP 2014-02-25 16 / 35
{ this.name = name; } // Shared properties Person.prototype.describe = function () { return 'Person named ' + this.name; }; Dr. Axel Rauschmayer (2ality.com) The Four Layers of JavaScript OOP 2014-02-25 17 / 35
'Tarzan' describe function() {...} tarzan Person.prototype prototype Person function Person(name) { this.name = name; } __proto__ name 'Jane' jane Dr. Axel Rauschmayer (2ality.com) The Four Layers of JavaScript OOP 2014-02-25 18 / 35
relationship between objects Prototype 2: property prototype of constructors (the prototype of all instances) Disambiguation (if necessary): call prototype 2 the instance prototype. Dr. Axel Rauschmayer (2ality.com) The Four Layers of JavaScript OOP 2014-02-25 19 / 35
value instanceof Constr How does instanceof work? Check: Is Constr.prototype in the prototype chain of value? // Equivalent value instanceof Constr Constr.prototype.isPrototypeOf(value) Dr. Axel Rauschmayer (2ality.com) The Four Layers of JavaScript OOP 2014-02-25 20 / 35
function Person(name) { this.name = name; } Person.prototype.sayHelloTo = function (otherName) { console.log(this.name + ' says hello to ' + otherName); }; Person.prototype.describe = function () { return 'Person named ' + this.name; }; Employee(name, title) is like Person, except: Additional instance property: title describe() returns 'Person named <name> (<title>)' Dr. Axel Rauschmayer (2ality.com) The Four Layers of JavaScript OOP 2014-02-25 22 / 35
Employee must Inherit Person’s instance properties Create the instance property title Inherit Person’s prototype properties Override method Person.prototype.describe (and call overridden method) Dr. Axel Rauschmayer (2ality.com) The Four Layers of JavaScript OOP 2014-02-25 23 / 35
title 'CTO' __proto__ name 'Jane' __proto__ describe function() {...} sayHelloTo function() {...} jane Person.prototype prototype Person __proto__ describe function() {...} Employee.prototype prototype Employee Object.prototype calls Dr. Axel Rauschmayer (2ality.com) The Four Layers of JavaScript OOP 2014-02-25 25 / 35
Sharing properties: prototype chains 3 Constructors set up instances. Separation of concerns: Instance data: set up by function Constr Methods: in Constr.prototype 4 Inheritance between constructors. Derive Sub from Super: Instance data: Sub calls Super (as a function) Methods: Sub.prototype has prototype Super.prototype Future (ECMAScript 6): classes2 (help especially with layer 4) 2www.2ality.com/2012/07/esnext-classes.html Dr. Axel Rauschmayer (2ality.com) The Four Layers of JavaScript OOP 2014-02-25 28 / 35
'use strict'; var that = this; this.friends.forEach(function (friend) { console.log(that.name + ' knows ' + friend); }); } Dr. Axel Rauschmayer (2ality.com) The Four Layers of JavaScript OOP 2014-02-25 33 / 35