Your SlideShare is downloading. ×
0
Object-Oriented  JavaScript Stoyan Stefanov, Yahoo! Inc. Beijing, Dec 6 th , 2008
About the presenter <ul><li>Yahoo! Performance </li></ul><ul><li>YSlow 2.0 </li></ul><ul><li>smush.it  tool </li></ul><ul>...
First off…  the Firebug console
Firebug console as a learning tool
Console features <ul><li>Inspect the contents of objects by clicking on them </li></ul><ul><li>Tab auto-complete, a.k.a ch...
Any page
Fiddle
Objects
JavaScript !== Java <ul><li>C-like syntax   </li></ul><ul><li>Classes   </li></ul>
Data types <ul><li>A. Primitive: </li></ul><ul><ul><li>number –  1 ,  3 ,  1001 ,  11.12 ,  2e+3 </li></ul></ul><ul><ul><l...
Objects <ul><li>hash tables  </li></ul><ul><li>key: value </li></ul>
A simple object <ul><li>var  obj = {}; </li></ul><ul><li>obj.name =  'my object' ; </li></ul><ul><li>obj.shiny =  true ; <...
A simple object <ul><li>var  obj =  { </li></ul><ul><li>shiny:  true , </li></ul><ul><li>isShiny:  function () { </li></ul...
Methods <ul><li>When a property is a function we can call it a method  </li></ul>
Object literal notation <ul><li>Key-value pairs </li></ul><ul><li>Comma-delimited </li></ul><ul><li>Wrapped in curly brace...
Arrays <ul><li>Arrays are objects too </li></ul><ul><li>Auto-increment properties </li></ul><ul><li>Some useful methods </...
Arrays <ul><li>>>>  var  a = [1,3,2]; </li></ul><ul><li>>>> a[0] </li></ul><ul><li>1 </li></ul><ul><li>>>>  typeof  a </li...
Array literal notation <ul><li>var  array = [  </li></ul><ul><li>&quot;Square&quot; , </li></ul><ul><li>&quot;brackets&quo...
JSON <ul><li>Object literals + array literals </li></ul><ul><li>JavaScript Object Notation </li></ul><ul><li>{&quot;num&qu...
Constructors
Functions <ul><li>functions are objects </li></ul><ul><li>they have properties </li></ul><ul><li>they have methods </li></...
Function <ul><li>function  say(what) { </li></ul><ul><li>return  what; </li></ul><ul><li>} </li></ul>
Function <ul><li>var  say =  function (what) { </li></ul><ul><li>return  what; </li></ul><ul><li>} ; </li></ul>
Function <ul><li>var  say =  function   say (what) { </li></ul><ul><li>return  what; </li></ul><ul><li>} ;   </li></ul>
Functions are objects <ul><li>>>> say.length </li></ul><ul><li>1 </li></ul><ul><li>>>> say.name </li></ul><ul><li>&quot;bo...
Functions are objects <ul><li>>>>  var  tell = say; </li></ul><ul><li>>>> tell( &quot;doodles&quot; ) </li></ul><ul><li>&q...
Return values <ul><li>All functions always return a value  </li></ul>
Return values <ul><li>If a function doesn’t return a value explicitly, it returns  undefined </li></ul>
Return values <ul><li>Functions can return objects, including other functions </li></ul>
Constructors
Constructor functions <ul><li>when invoked with  new , functions return an object known as  this   </li></ul><ul><li>you c...
Constructor functions <ul><li>var  Person =  function (name) { </li></ul><ul><li>this .name = name; </li></ul><ul><li>this...
Using the constructor <ul><li>var  me =  new  Person( &quot;Stoyan&quot; ); </li></ul><ul><li>me.getName();  // &quot;Stoy...
Constructors… <ul><li>…  are just functions  </li></ul>
A naming convention <ul><li>M yConstructor </li></ul><ul><li>m yFunction   </li></ul>
constructor  property <ul><li>>>>  function  Person(){}; </li></ul><ul><li>>>>  var  jo =  new  Person(); </li></ul><ul><l...
constructor  property <ul><li>>>>  var  o = {}; </li></ul><ul><li>>>> o. constructor  === Object </li></ul><ul><li>true </...
Built-in constructors <ul><li>Object </li></ul><ul><li>Array </li></ul><ul><li>Function </li></ul><ul><li>RegExp </li></ul...
Use this Not that var o = {}; var o = new Object(); var a = []; var a = new Array(); var re = /[a-z]/gmi; var re = new Reg...
Prototype
Prototype… <ul><li>…  is a property of the function objects </li></ul>
Prototype <ul><li>>>>  var  boo =  function (){}; </li></ul><ul><li>>>>  typeof  boo. prototype </li></ul><ul><li>&quot;ob...
Augmenting prototype <ul><li>>>> boo. prototype .a =  1 ; </li></ul><ul><li>>>> boo. prototype .sayAh =  function (){};   ...
Overwriting the prototype <ul><li>>>> boo. prototype  =  </li></ul><ul><li>{a:  1 , b:  2 };   </li></ul>
Use of the prototype <ul><li>The prototype is used when a function is called as a constructor  </li></ul>
Prototype usage <ul><li>var  Person =  function (name) { </li></ul><ul><li>this .name = name; </li></ul><ul><li>}; </li></...
Prototype usage <ul><li>>>>  var  dude =  new  Person( 'dude' ); </li></ul><ul><li>>>> dude.name; </li></ul><ul><li>&quot;...
Prototype usage <ul><li>say()  is a property of the  prototype  object </li></ul><ul><li>but it behaves as if it's a prope...
Own properties vs. prototype’s <ul><li>>>> dude. hasOwnProperty ( 'name' ); </li></ul><ul><li>true </li></ul><ul><li>>>> d...
isPrototypeOf() <ul><li>>>> Person. prototype . isPrototypeOf (dude); </li></ul><ul><li>true </li></ul><ul><li>>>>  Object...
__proto__ <ul><li>The objects have a secret link to the prototype of the constructor that created them </li></ul><ul><li>_...
__proto__ <ul><li>>>> dude.__proto__. hasOwnProperty ( 'say' ) </li></ul><ul><li>true </li></ul><ul><li>>>> dude. prototyp...
Prototype chain
It’s a live chain <ul><li>>>>  typeof  dude.numlegs </li></ul><ul><li>&quot;undefined&quot; </li></ul><ul><li>>>> Person. ...
Inheritance
Parent constructor <ul><li>function  NormalObject() { </li></ul><ul><li>this .name =  'normal' ; </li></ul><ul><li>this .g...
Child constructor <ul><li>function  PreciousObject(){  </li></ul><ul><li>this .shiny =  true ;  </li></ul><ul><li>this .ro...
The inheritance <ul><li>PreciousObject. prototype  =  </li></ul><ul><li>new  NormalObject();  </li></ul>
A child object <ul><li>var  crystal_ball =  new  PreciousObject(); </li></ul><ul><li>crystal_ball.name =  'Crystal Ball.' ...
Inheritance by copying
Two objects <ul><li>var  shiny = {  </li></ul><ul><li>shiny:  true ,  </li></ul><ul><li>round:  true   </li></ul><ul><li>}...
extend() <ul><li>function  extend(parent, child) {  </li></ul><ul><li>for  ( var  i  in  parent) {  </li></ul><ul><li>chil...
Inheritance <ul><li>extend(normal, shiny); </li></ul><ul><li>shiny.getName();  // &quot;name me&quot;  </li></ul>
Prototypal inheritance
Beget object <ul><li>function  object(o) { </li></ul><ul><li>function  F(){} </li></ul><ul><li>F. prototype  = o; </li></u...
Beget object <ul><li>>>>  var  parent = {a:  1 }; </li></ul><ul><li>>>>  var  child = object(parent); </li></ul><ul><li>>>...
Wrapping up…
Objects <ul><li>Everything is an object (except a few primitive types) </li></ul><ul><li>Objects are hashes </li></ul><ul>...
Functions <ul><li>Functions are objects </li></ul><ul><li>Only invokable </li></ul><ul><li>Methods: call(), apply() </li><...
Prototype <ul><li>Property of the function objects </li></ul><ul><li>It’s an object  </li></ul><ul><li>Useful with Constru...
Constructor <ul><li>A function meant to be called with  new </li></ul><ul><li>Returns an object  </li></ul>
Class <ul><li>No such thing in JavaScript  </li></ul>
Inheritance <ul><li>Class ical </li></ul><ul><li>Prototypal </li></ul><ul><li>By copying </li></ul><ul><li>…  and many oth...
Stoyan Stefanov, http://phpied.com [email_address]
Upcoming SlideShare
Loading in...5
×

Beginning Object-Oriented JavaScript

29,587

Published on

Slides from my "Object-oriented JavaScript" presentation at CSDN (China Software Developers Network), Beijing, December 2008

Published in: Technology
6 Comments
83 Likes
Statistics
Notes
No Downloads
Views
Total Views
29,587
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
1,431
Comments
6
Likes
83
Embeds 0
No embeds

No notes for slide

Transcript of "Beginning Object-Oriented JavaScript"

  1. 1. Object-Oriented JavaScript Stoyan Stefanov, Yahoo! Inc. Beijing, Dec 6 th , 2008
  2. 2. About the presenter <ul><li>Yahoo! Performance </li></ul><ul><li>YSlow 2.0 </li></ul><ul><li>smush.it tool </li></ul><ul><li>phpied.com blog </li></ul>
  3. 3. First off… the Firebug console
  4. 4. Firebug console as a learning tool
  5. 5. Console features <ul><li>Inspect the contents of objects by clicking on them </li></ul><ul><li>Tab auto-complete, a.k.a cheatsheet </li></ul><ul><li>Arrows ↑ and ↓ </li></ul><ul><li>Fiddle with any page </li></ul>
  6. 6. Any page
  7. 7. Fiddle
  8. 8. Objects
  9. 9. JavaScript !== Java <ul><li>C-like syntax  </li></ul><ul><li>Classes  </li></ul>
  10. 10. Data types <ul><li>A. Primitive: </li></ul><ul><ul><li>number – 1 , 3 , 1001 , 11.12 , 2e+3 </li></ul></ul><ul><ul><li>string – &quot;a&quot; , &quot;stoyan&quot; , &quot;0&quot; </li></ul></ul><ul><ul><li>boolean – true | false </li></ul></ul><ul><ul><li>null </li></ul></ul><ul><ul><li>undefined </li></ul></ul><ul><li>B. Objects </li></ul><ul><ul><li>everything else… </li></ul></ul>
  11. 11. Objects <ul><li>hash tables </li></ul><ul><li>key: value </li></ul>
  12. 12. A simple object <ul><li>var obj = {}; </li></ul><ul><li>obj.name = 'my object' ; </li></ul><ul><li>obj.shiny = true ; </li></ul>
  13. 13. A simple object <ul><li>var obj = { </li></ul><ul><li>shiny: true , </li></ul><ul><li>isShiny: function () { </li></ul><ul><li>return this .shiny; </li></ul><ul><li>} </li></ul><ul><li>} ; </li></ul><ul><li>obj.isShiny(); // true </li></ul>
  14. 14. Methods <ul><li>When a property is a function we can call it a method </li></ul>
  15. 15. Object literal notation <ul><li>Key-value pairs </li></ul><ul><li>Comma-delimited </li></ul><ul><li>Wrapped in curly braces </li></ul><ul><li>{a: 1, b: &quot;test&quot;} </li></ul>
  16. 16. Arrays <ul><li>Arrays are objects too </li></ul><ul><li>Auto-increment properties </li></ul><ul><li>Some useful methods </li></ul>
  17. 17. Arrays <ul><li>>>> var a = [1,3,2]; </li></ul><ul><li>>>> a[0] </li></ul><ul><li>1 </li></ul><ul><li>>>> typeof a </li></ul><ul><li>&quot;object&quot; </li></ul>
  18. 18. Array literal notation <ul><li>var array = [ </li></ul><ul><li>&quot;Square&quot; , </li></ul><ul><li>&quot;brackets&quot; , </li></ul><ul><li>&quot;wrap&quot; , </li></ul><ul><li>&quot;the&quot; , </li></ul><ul><li>&quot;comma-delimited&quot; , </li></ul><ul><li>&quot;elements&quot; </li></ul><ul><li>]; </li></ul>
  19. 19. JSON <ul><li>Object literals + array literals </li></ul><ul><li>JavaScript Object Notation </li></ul><ul><li>{&quot;num&quot;: 1 , &quot;str&quot;: &quot;abc&quot; , &quot;arr&quot;: [ 1 , 2 , 3 ]} </li></ul>
  20. 20. Constructors
  21. 21. Functions <ul><li>functions are objects </li></ul><ul><li>they have properties </li></ul><ul><li>they have methods </li></ul><ul><li>can be copied, deleted, augmented... </li></ul><ul><li>special feature: invokable </li></ul>
  22. 22. Function <ul><li>function say(what) { </li></ul><ul><li>return what; </li></ul><ul><li>} </li></ul>
  23. 23. Function <ul><li>var say = function (what) { </li></ul><ul><li>return what; </li></ul><ul><li>} ; </li></ul>
  24. 24. Function <ul><li>var say = function say (what) { </li></ul><ul><li>return what; </li></ul><ul><li>} ; </li></ul>
  25. 25. Functions are objects <ul><li>>>> say.length </li></ul><ul><li>1 </li></ul><ul><li>>>> say.name </li></ul><ul><li>&quot;boo&quot; </li></ul>
  26. 26. Functions are objects <ul><li>>>> var tell = say; </li></ul><ul><li>>>> tell( &quot;doodles&quot; ) </li></ul><ul><li>&quot;doodles&quot; </li></ul><ul><li>>>> tell. call ( null , &quot;moo!&quot; ); </li></ul><ul><li>&quot;moo!&quot; </li></ul>
  27. 27. Return values <ul><li>All functions always return a value </li></ul>
  28. 28. Return values <ul><li>If a function doesn’t return a value explicitly, it returns undefined </li></ul>
  29. 29. Return values <ul><li>Functions can return objects, including other functions </li></ul>
  30. 30. Constructors
  31. 31. Constructor functions <ul><li>when invoked with new , functions return an object known as this </li></ul><ul><li>you can modify this before it’s returned </li></ul>
  32. 32. Constructor functions <ul><li>var Person = function (name) { </li></ul><ul><li>this .name = name; </li></ul><ul><li>this .getName = function() { </li></ul><ul><li>return this .name; </li></ul><ul><li>}; </li></ul><ul><li>}; </li></ul>
  33. 33. Using the constructor <ul><li>var me = new Person( &quot;Stoyan&quot; ); </li></ul><ul><li>me.getName(); // &quot;Stoyan&quot; </li></ul>
  34. 34. Constructors… <ul><li>… are just functions </li></ul>
  35. 35. A naming convention <ul><li>M yConstructor </li></ul><ul><li>m yFunction </li></ul>
  36. 36. constructor property <ul><li>>>> function Person(){}; </li></ul><ul><li>>>> var jo = new Person(); </li></ul><ul><li>>>> jo. constructor === Person </li></ul><ul><li>true </li></ul>
  37. 37. constructor property <ul><li>>>> var o = {}; </li></ul><ul><li>>>> o. constructor === Object </li></ul><ul><li>true </li></ul><ul><li>>>> [1,2]. constructor === Array </li></ul><ul><li>true </li></ul>
  38. 38. Built-in constructors <ul><li>Object </li></ul><ul><li>Array </li></ul><ul><li>Function </li></ul><ul><li>RegExp </li></ul><ul><li>Number </li></ul><ul><li>String </li></ul><ul><li>Boolean </li></ul><ul><li>Date </li></ul><ul><li>Error, SyntaxError, ReferenceError… </li></ul>
  39. 39. Use this Not that var o = {}; var o = new Object(); var a = []; var a = new Array(); var re = /[a-z]/gmi; var re = new RegExp( '[a-z]', 'gmi'); var fn = function(a, b){ return a + b; } var fn = new Function( 'a, b','return a+b');
  40. 40. Prototype
  41. 41. Prototype… <ul><li>… is a property of the function objects </li></ul>
  42. 42. Prototype <ul><li>>>> var boo = function (){}; </li></ul><ul><li>>>> typeof boo. prototype </li></ul><ul><li>&quot;object&quot; </li></ul>
  43. 43. Augmenting prototype <ul><li>>>> boo. prototype .a = 1 ; </li></ul><ul><li>>>> boo. prototype .sayAh = function (){}; </li></ul>
  44. 44. Overwriting the prototype <ul><li>>>> boo. prototype = </li></ul><ul><li>{a: 1 , b: 2 }; </li></ul>
  45. 45. Use of the prototype <ul><li>The prototype is used when a function is called as a constructor </li></ul>
  46. 46. Prototype usage <ul><li>var Person = function (name) { </li></ul><ul><li>this .name = name; </li></ul><ul><li>}; </li></ul><ul><li>Person. prototype .say = function (){ </li></ul><ul><li>return this .name; </li></ul><ul><li>}; </li></ul>
  47. 47. Prototype usage <ul><li>>>> var dude = new Person( 'dude' ); </li></ul><ul><li>>>> dude.name; </li></ul><ul><li>&quot;dude&quot; </li></ul><ul><li>>>> dude.say(); </li></ul><ul><li>&quot;dude&quot; </li></ul>
  48. 48. Prototype usage <ul><li>say() is a property of the prototype object </li></ul><ul><li>but it behaves as if it's a property of the dude object </li></ul><ul><li>can we tell the difference? </li></ul>
  49. 49. Own properties vs. prototype’s <ul><li>>>> dude. hasOwnProperty ( 'name' ); </li></ul><ul><li>true </li></ul><ul><li>>>> dude. hasOwnProperty ( 'say' ); </li></ul><ul><li>false </li></ul>
  50. 50. isPrototypeOf() <ul><li>>>> Person. prototype . isPrototypeOf (dude); </li></ul><ul><li>true </li></ul><ul><li>>>> Object . prototype . isPrototypeOf (dude); </li></ul><ul><li>true </li></ul>
  51. 51. __proto__ <ul><li>The objects have a secret link to the prototype of the constructor that created them </li></ul><ul><li>__proto__ is not directly exposed in all browsers </li></ul>
  52. 52. __proto__ <ul><li>>>> dude.__proto__. hasOwnProperty ( 'say' ) </li></ul><ul><li>true </li></ul><ul><li>>>> dude. prototype </li></ul><ul><li>??? // Trick question </li></ul><ul><li>>>> dude.__proto__.__proto__. hasOwnProperty ( 'toString' ) </li></ul><ul><li>true </li></ul>
  53. 53. Prototype chain
  54. 54. It’s a live chain <ul><li>>>> typeof dude.numlegs </li></ul><ul><li>&quot;undefined&quot; </li></ul><ul><li>>>> Person. prototype .numlegs = 2 ; </li></ul><ul><li>>>> dude.numlegs </li></ul><ul><li>2 </li></ul>
  55. 55. Inheritance
  56. 56. Parent constructor <ul><li>function NormalObject() { </li></ul><ul><li>this .name = 'normal' ; </li></ul><ul><li>this .getName = function () { </li></ul><ul><li> return this .name; </li></ul><ul><li>}; </li></ul><ul><li>} </li></ul>
  57. 57. Child constructor <ul><li>function PreciousObject(){ </li></ul><ul><li>this .shiny = true ; </li></ul><ul><li>this .round = true ; </li></ul><ul><li>} </li></ul>
  58. 58. The inheritance <ul><li>PreciousObject. prototype = </li></ul><ul><li>new NormalObject(); </li></ul>
  59. 59. A child object <ul><li>var crystal_ball = new PreciousObject(); </li></ul><ul><li>crystal_ball.name = 'Crystal Ball.' ; </li></ul><ul><li>crystal_ball.round; // true </li></ul><ul><li>crystal_ball.getName(); // &quot;Crystal Ball.&quot; </li></ul>
  60. 60. Inheritance by copying
  61. 61. Two objects <ul><li>var shiny = { </li></ul><ul><li>shiny: true , </li></ul><ul><li>round: true </li></ul><ul><li>}; </li></ul><ul><li>var normal = { </li></ul><ul><li>name: 'name me' , </li></ul><ul><li>getName: function () { </li></ul><ul><li>return this .name; </li></ul><ul><li>} </li></ul><ul><li>}; </li></ul>
  62. 62. extend() <ul><li>function extend(parent, child) { </li></ul><ul><li>for ( var i in parent) { </li></ul><ul><li>child[i] = parent[i]; </li></ul><ul><li>} </li></ul><ul><li>} </li></ul>
  63. 63. Inheritance <ul><li>extend(normal, shiny); </li></ul><ul><li>shiny.getName(); // &quot;name me&quot; </li></ul>
  64. 64. Prototypal inheritance
  65. 65. Beget object <ul><li>function object(o) { </li></ul><ul><li>function F(){} </li></ul><ul><li>F. prototype = o; </li></ul><ul><li>return new F(); </li></ul><ul><li>} </li></ul>
  66. 66. Beget object <ul><li>>>> var parent = {a: 1 }; </li></ul><ul><li>>>> var child = object(parent); </li></ul><ul><li>>>> child.a; </li></ul><ul><li>1 </li></ul><ul><li>>>> child. hasOwnProperty (a); </li></ul><ul><li>false </li></ul>
  67. 67. Wrapping up…
  68. 68. Objects <ul><li>Everything is an object (except a few primitive types) </li></ul><ul><li>Objects are hashes </li></ul><ul><li>Arrays are objects </li></ul>
  69. 69. Functions <ul><li>Functions are objects </li></ul><ul><li>Only invokable </li></ul><ul><li>Methods: call(), apply() </li></ul><ul><li>Properties: length, name, prototype </li></ul>
  70. 70. Prototype <ul><li>Property of the function objects </li></ul><ul><li>It’s an object </li></ul><ul><li>Useful with Constructor functions </li></ul>
  71. 71. Constructor <ul><li>A function meant to be called with new </li></ul><ul><li>Returns an object </li></ul>
  72. 72. Class <ul><li>No such thing in JavaScript </li></ul>
  73. 73. Inheritance <ul><li>Class ical </li></ul><ul><li>Prototypal </li></ul><ul><li>By copying </li></ul><ul><li>… and many other variants </li></ul>
  74. 74. Stoyan Stefanov, http://phpied.com [email_address]
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×