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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

2012 oct-12 - java script inheritance

593

Published on

i2devlabs Friday Talks: …

i2devlabs Friday Talks:
Pedro Carvalho gave a talk about JavaScript inheritance

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
593
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
8
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

    ×