This document discusses JavaScript inheritance using prototypes. It explains that objects inherit from other objects through their internal __proto__ property. Constructors set an object's __proto__ to reference the constructor's prototype. Methods can be added to the prototype and all objects will inherit those methods. The document also covers how to implement inheritance between constructors like Employee inheriting from Person without calling the parent constructor.

1. JavaScript inheritance

2. First, install homebrew:
http://mxcl.github.com/homebrew/
Then run: brew install node

3. Objects
• JavaScript objects are just collections of
named properties (associative arrays)
• JavaScript doesn’t have classes
• Functions are first-class objects
• Methods are just properties that are
functions

4. Objects
• Two ways to create an object
• Constructor
• var myObj = new Object();
• Object literal
• var otherObj = {};
• var thirdObj = {name:‘pedro’,
company:‘i2devlabs’};

5. Constructors
var Person = function(name){
this.name = name;
}
var me = new Person(‘Pedro’);

6. Prototypal inheritance

7. Prototypes
• prototype of an object is an internal
property. Let’s call it __proto__ (like
Webkit and Mozilla call it)
• the standard does not have any way to
retrieve __proto__ (but Webkit and
Mozilla do)

8. Remember this?
var Person = function(name){
this.name = name;
}
var me = new Person(‘Pedro’);

9. Prototypes
• Person inherits from Object
• variable me has “under the hood”, in it’s
__proto__:
• reference to a prototype object which
stores a reference to:
• the constructor
• a pointer to its parent (Object’)

10. Prototypes
• Whenever a property "propname" of an
object is read, the system checks if that
object has a property named "propname". If
that propery does not exist, the system
checks the object's __proto__ for that
property, recursively.

11. Prototypes
var Person = function (name) {
this.name = name;
};
Person.prototype.greet = function () {
process.stdout.write("Hello! My name is " + this.name);
};
var me = new Person("Pedro");
__proto__ now has a method greet

12. Prototypes
var luis = new Person("Luis");
var catia = new Person("Catia");
me.greet(); // Alerts "Hello! My name is Pedro"
luis.greet(); // Alerts "Hello! My name is Luis"
catia.greet(); // Alerts "Hello! My name is Catia"

13. Prototypes
Person.prototype.greet = function () {
alert("Howdy, neighbor!");
};
me.greet(); // Alerts "Howdy, neighbor!"
luis.greet(); // Alerts "Howdy, neighbor!"
catia.greet(); // Alerts "Howdy, neighbor!"

14. Inheritance

15. Inheritance
• Employee inherits from Person

16. Inheritance
var Employee = function (name, company, title) {
this.name = name;
this.company = company;
this.title = title;
};
Employee.prototype = new Person();
Employee.prototype.constructor = Employee; //wait!! What?!

17. Inheritance
• Constructor reset
• Employee.prototype.constructor = Employee;
• JavaScript, by default, assigns Person to the constructor property, instead of
assigning Employee

18. Inheritance
• One problem remains
• This code Employee.prototype = new Person(); executes the Person
constructor

19. Inheritance
var proxy = function () {};
proxy.prototype = Person.prototype;
Employee.prototype = new proxy();
Employee.prototype.constructor = Employee;

20. Inheritance
• what does new do?
1. It creates a new object. The type of this object, is simply object.
2. It sets this new object's internal, inaccessible, __proto__ property to be
the constructor function's external, accessible, prototype object.
3. It executes the constructor function, using the newly created object
whenever this is mentioned.

21. Sources
• http://www.examplejs.com/?tag=classical-inheritance
• http://joost.zeekat.nl/constructors-considered-mildly-confusing.html
• http://stackoverflow.com/questions/1646698/what-is-the-new-keyword-in-
javascript