Advanced JavaScript: closures, prototypes, inheritance

1. Advanced JavaScript:closures, prototypes, inheritance Stoyan Stefanov Ajax Experience, Boston 2008

2. About the presenter Yahoo! performance team member YSlow 2.0 architect, dev Book author, open-source contributor Blog: http://phpied.com

3. Before we start… Firebug console

4. Firebug console is a learning tool

5. Firebug console… Inspect the contents of objects by clicking on them Tab auto-complete, a.k.a cheatsheet Arrows ↑ and↓ Fiddle with any page

6. Any page…

7. Fiddle…

8. Objects

9. JavaScript data types primitive and objects number string boolean undefined null

10. What’s an object? a hash of key => value pairs if a key (property) happens to be a function, we can call it a method

11. What’s an object? var obj = { shiny: true, isShiny: function() { returnthis.shiny; } }; obj.isShiny(); // true

12. Object literal notation { Wrapped in curly braces } ,-delimited properties key:value pairs var obj = {a: 1, "b c d": 2};

13. Arrays

14. Arrays arrays are also objects auto-incremented properties

15. Arrays >>> var a = [1,3,2]; >>> a[0] 1 >>> typeof a "object"

16. Arrays array objects also get some cool properties... >>> a.length 3 ...and methods >>> a.sort() >>> a.join(' < ') "1 < 2 < 3"

17. Array literal notation var array = [ "Square", "brackets", "wrap", "the", "comma-delimited", "elements" ];

18. JSON JavaScript Object Notation Uses object and array literals Quotes required for properties {"num": 1, "str": "abc", "arr": [1,2,3]}

19. Functions

20. Functions functions are objects they have properties they have methods can de copied, deleted, augmented... special feature: invokable

21. Functions function boo(what) { return what; } or var boo = function(what) { return what; };

22. Functions function boo(what) { return what; } or var boo = functionbootoo(what) { return what; };

23. Functions are objects >>> boo.length 1 >>> boo.name "bootoo"

24. Functions are objects >>> var foo = boo; >>> foo("doodles") "doodles" >>> foo.call(null, "moo!"); "moo!"

25. Return value all functions return a value if they don't explicitly, they return undefined implicitly functions can return other functions

26. Constructors

27. Constructors when invoked with new, functions return an object known as this you have a chance of modifying this before it's returned you can also return some other object

28. Constructor functions var Person = function(name) { this.name = name; this.speaks = 'fr'; this.say = function() { return "Je m'appelle " + this.name; }; };

29. An object created with constructor >>> var julien = new Person("Julien"); >>> julien.say(); "Je m'appelle Julien"

30. Constructor’s return value var Person = function(){ this.first = "Bruce"; return {last: "Wayne"}; }; >>> typeof new Person().first "undefined" >>> new Person().last "Wayne"

31. Constructor’s return value var Person = function(){ this.first = "Bruce"; return"Batman"; }; >>> new Person().first "Bruce"

32. Naming convention MyConstructor myFunction

33. constructor property >>> function Person(){}; >>> var jo = new Person(); >>> jo.constructor === Person true

34. constructor property >>> var o = {}; >>> o.constructor === Object true >>> [1,2].constructor === Array true

35. Built-in constructor functions Object Array Function RegExp Number String Boolean Date Error, SyntaxError, ReferenceError…

37. Wrapper objects vs. primitive >>> typeof new Number(1) "object" >>> typeof1 "number"

38. Primitives can act as objects >>> "test".length 4 >>> (123.456).toFixed(2) "123.46"

39. Prototype

40. prototype a property of the function objects >>> var boo = function(){}; >>> typeof boo.prototype "object"

41. Prototypes can be augmented >>> boo.prototype.a = 1; >>> boo.prototype.sayAh = function(){};

42. Prototypes can be overwritten >>> boo.prototype = {a: 1, b: 2};

43. How is the prototype used? when a function is invoked as a constructor var Person = function(name) { this.name = name; }; Person.prototype.say = function() { return this.name; }

44. >>> var dude = new Person('dude'); >>> dude.name; "dude" >>> dude.say(); "dude" How is the prototype used?

45. say() is a property of the prototype object but it behaves as if it's a property of the dude object can we tell the difference? How is the prototype used?

46. Own properties vs. prototype’s >>> dude.hasOwnProperty('name'); true >>> dude.hasOwnProperty('say'); false

47. isPrototypeOf() >>> Person.prototype.isPrototypeOf(dude); true >>> Object.prototype.isPrototypeOf(dude); true

48. __proto__ I, the dude, have a secret link to the prototype of the constructor that created me __proto__ is not directly exposed in all browsers

49. >>> dude.__proto__.hasOwnProperty('say') true >>> dude.prototype ??? // Trick question >>> dude.__proto__.__proto__.hasOwnProperty('toString') true __proto__

50. The prototype chain