JavaScript In Object Oriented Way

3,039 views

Published on

presentation at barcamp phnom penh 2009

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

No Downloads
Views
Total views
3,039
On SlideShare
0
From Embeds
0
Number of Embeds
320
Actions
Shares
0
Downloads
235
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

JavaScript In Object Oriented Way

  1. 1. 04 October 2009 Barcamp Phnom Penh 2009
  2. 2. About Us <ul><li>Lim Borey </li></ul><ul><li>Software Developer </li></ul><ul><li>Chhorn Chamnap </li></ul><ul><li>Software Developer </li></ul>
  3. 3. Agenda <ul><li>Debugging Tool </li></ul><ul><li>Data types </li></ul><ul><li>Object </li></ul><ul><li>Constructor </li></ul><ul><li>Inheritance & Prototype </li></ul><ul><li>Summary </li></ul><ul><li>Q & A </li></ul>
  4. 4. Debugging Tool Firebug – Firefox extension
  5. 5. JavaScript !== Java <ul><li>C-like syntax  </li></ul><ul><li>Classes  </li></ul>
  6. 6. 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>
  7. 7. Objects <ul><li>hash tables </li></ul><ul><li>key: value </li></ul>
  8. 8. A simple object <ul><li>var obj = {}; </li></ul><ul><li>obj.name = 'my object' ; </li></ul><ul><li>obj.shiny = true ; </li></ul>
  9. 9. 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>
  10. 10. Methods <ul><li>When a property is a function we can call it a method </li></ul><ul><li>var object = { </li></ul><ul><li>method: function(){ </li></ul><ul><li>alert( &quot;here’s method&quot; ); </li></ul><ul><li>} </li></ul><ul><li>} </li></ul>
  11. 11. 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>
  12. 12. Arrays <ul><li>Arrays are objects too </li></ul><ul><li>Auto-increment properties </li></ul><ul><li>Some useful methods </li></ul>
  13. 13. 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><ul><li>>>> var b = []; </li></ul><ul><li>>>> b.push(&quot;value&quot;); </li></ul><ul><li>>>> console.log(b); </li></ul><ul><li>// &quot;value&quot; </li></ul>
  14. 14. 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>
  15. 15. Constructor <ul><li>Is called at the moment of instantiation </li></ul><ul><li>In JavaScript, the function serves as the constructor of the object </li></ul><ul><li>var Person = function () { </li></ul><ul><li>alert('Person instantiated'); </li></ul><ul><li>} </li></ul><ul><li>var person1 = new Person(); </li></ul><ul><li>var person2 = new Person(); </li></ul>
  16. 16. constructor property <ul><li>>>> function Person(){}; </li></ul><ul><li>>>> var mony = new Person(); </li></ul><ul><li>>>> mony. constructor === Person </li></ul><ul><li>true </li></ul>
  17. 17. constructor property <ul><li>>>> var obj = {}; </li></ul><ul><li>>>> obj. constructor === Object </li></ul><ul><li>true </li></ul><ul><li>>>> [1,2]. constructor === Array </li></ul><ul><li>true </li></ul>
  18. 18. 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>
  19. 19. Inheritance & Prototype
  20. 20. Inheritance <ul><li>A method to create a class as a specialized version of one or more classes </li></ul><ul><li>JavaScript only supports single class inheritance </li></ul>
  21. 21. <ul><li>// define the Person Class </li></ul><ul><li>function Person() {} </li></ul><ul><li>Person.prototype.walk = function(){}; </li></ul><ul><li>Person.prototype.sayHello = function(){ </li></ul><ul><li>alert ('hello'); </li></ul><ul><li>}; </li></ul><ul><li>// define the Student class inherit Person </li></ul><ul><li>function Student() {} </li></ul><ul><li>Student.prototype = new Person(); </li></ul><ul><li>Student.prototype.constructor = Student; </li></ul><ul><li>// override the sayHello method </li></ul><ul><li>Student.prototype.sayHello = function(){ alert('hi, I am a student'); </li></ul><ul><li>}; </li></ul><ul><li>var student1 = new Student(); </li></ul><ul><li>student1.sayHello(); </li></ul>
  22. 22. Prototype … <ul><li>… is a property of the function objects </li></ul><ul><li>>>> var boo = function (){}; </li></ul><ul><li>>>> typeof boo. prototype </li></ul><ul><li>&quot;object&quot; </li></ul>
  23. 23. Use of the prototype <ul><li>The prototype is used when a function is called as a constructor </li></ul>
  24. 24. 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>
  25. 25. 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>
  26. 26. 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>
  27. 27. 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>
  28. 28. 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>
  29. 29. __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>
  30. 30. __proto__ <ul><li>>>> dude.__proto__. hasOwnProperty ( 'say' ) </li></ul><ul><li>true </li></ul><ul><li>>>> dude.__proto__.__proto__. hasOwnProperty ( 'toString' ) </li></ul><ul><li>true </li></ul>
  31. 31. Prototype chain
  32. 32. 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>
  33. 33. 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>
  34. 34. Summary
  35. 35. <ul><li>Objects </li></ul><ul><ul><li>Everything is an object (except a few primitive types) </li></ul></ul><ul><ul><li>Objects are hashes </li></ul></ul><ul><ul><li>Arrays are objects </li></ul></ul><ul><li>Class – no such thing in JavaScript </li></ul><ul><ul><li>A function meant to be called with new </li></ul></ul><ul><ul><li>Returns an object </li></ul></ul><ul><li>Inheritance </li></ul><ul><ul><li>Support singular inheritance </li></ul></ul><ul><li>Prototype </li></ul><ul><ul><li>Property of the function objects </li></ul></ul><ul><ul><li>It’s an object </li></ul></ul><ul><ul><li>Useful with Constructor functions </li></ul></ul>
  36. 36. References <ul><li>Object-Oriented JavaScript, Stoyan Stefanov </li></ul><ul><li>Pro JavaScript™ Techniques, John Resig </li></ul><ul><li>https://developer.mozilla.org/en/Introduction_to_Object-Oriented_JavaScript </li></ul>

×