Your SlideShare is downloading. ×
  • Like
2012 oct-12 - java script inheritance
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

2012 oct-12 - java script inheritance

  • 121 views
Published

 

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
121
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
2
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    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

Transcript

  • 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. Constructorsvar 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 objects __proto__ for that property, recursively.
  • 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. 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. PrototypesPerson.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. 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. 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. Inheritancevar 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 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. 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