2012 oct-12 - java script inheritance

2012 oct-12 - java script inheritance

• 1.
  JavaScript inheritance
• 2.
  First, install homebrew: http://mxcl.github.com/homebrew/ Thenrun: brew install node
• 3.
  Objects • JavaScript objectsare 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 waysto 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 ofan 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 inheritsfrom 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 aproperty "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 inheritsfrom 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