2012 oct-12 - java script inheritance

294 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
294
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • 2012 oct-12 - java script inheritance

    1. 1. JavaScript inheritance
    2. 2. First, install homebrew:http://mxcl.github.com/homebrew/Then run: brew install node
    3. 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. 4. Objects• Two ways to create an object • Constructor • var myObj = new Object(); • Object literal • var otherObj = {}; • var thirdObj = {name:‘pedro’, company:‘i2devlabs’};
    5. 5. Constructorsvar Person = function(name){ this.name = name;}var me = new Person(‘Pedro’);
    6. 6. Prototypal inheritance
    7. 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. 8. Remember this?var Person = function(name){ this.name = name;}var me = new Person(‘Pedro’);
    9. 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. 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 objects __proto__ for that property, recursively.
    11. 11. Prototypesvar 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. 12. Prototypesvar 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. 13. PrototypesPerson.prototype.greet = function () { alert("Howdy, neighbor!");};me.greet(); // Alerts "Howdy, neighbor!"luis.greet(); // Alerts "Howdy, neighbor!"catia.greet(); // Alerts "Howdy, neighbor!"
    14. 14. Inheritance
    15. 15. Inheritance• Employee inherits from Person
    16. 16. Inheritancevar 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. 17. Inheritance• Constructor reset • Employee.prototype.constructor = Employee;• JavaScript, by default, assigns Person to the constructor property, instead of assigning Employee
    18. 18. Inheritance• One problem remains• This code Employee.prototype = new Person(); executes the Person constructor
    19. 19. Inheritancevar proxy = function () {};proxy.prototype = Person.prototype;Employee.prototype = new proxy();Employee.prototype.constructor = Employee;
    20. 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 objects internal, inaccessible, __proto__ property to be the constructor functions external, accessible, prototype object. 3. It executes the constructor function, using the newly created object whenever this is mentioned.
    21. 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

    ×