際際滷

際際滷Share a Scribd company logo

JavaScript In Object Oriented Way

Download as PPT, PDF
B
Borey Lim

1. The document summarizes JavaScript concepts like objects, data types, constructors, prototypes and inheritance. 2. It explains that in JavaScript, objects are collections of key-value pairs known as hashes, and that arrays are also objects. 3. The document also discusses how inheritance is achieved in JavaScript through prototypes - an internal property of functions that is used to provide methods and properties to objects created with a constructor.

1 of 38
Downloaded 236 times
04 October 2009 Barcamp Phnom Penh 2009
About Us Lim Borey Software Developer Chhorn Chamnap Software Developer
Agenda Debugging Tool Data types Object Constructor Inheritance & Prototype Summary Q & A
Debugging Tool Firebug Firefox extension
JavaScript !== Java C-like syntax Classes
Data types A. Primitive: number 1 , 3 , 1001 , 11.12 , 2e+3 string "a" , "stoyan" , "0" boolean true | false null undefined B. Objects everything else
Objects hash tables key: value
A simple object var obj = {}; obj.name = 'my object' ; obj.shiny = true ;
A simple object var obj = { shiny: true , isShiny: function () { return this .shiny; } } ; obj.isShiny(); // true
Methods When a property is a function we can call it a method var object = { method: function(){ alert( "heres method" ); } }
Object literal notation Key-value pairs Comma-delimited Wrapped in curly braces {a: 1, b: "test"}
Arrays Arrays are objects too Auto-increment properties Some useful methods
Arrays >>> var a = [1,3,2]; >>> a[0] 1 >>> typeof a "object" >>> var b = []; >>> b.push("value"); >>> console.log(b); // "value"
JSON Object literals + array literals JavaScript Object Notation {"num": 1 , "str": "abc" , "arr": [ 1 , 2 , 3 ]}
Constructor Is called at the moment of instantiation In JavaScript, the function serves as the constructor of the object var Person = function () { alert('Person instantiated'); } var person1 = new Person(); var person2 = new Person();
constructor property >>> function Person(){}; >>> var mony = new Person(); >>> mony. constructor === Person true
constructor property >>> var obj = {}; >>> obj. constructor === Object true >>> [1,2]. constructor === Array true
Built-in constructors Object Array Function RegExp Number String Boolean Date Error, SyntaxError, ReferenceError
Inheritance & Prototype
Inheritance A method to create a class as a specialized version of one or more classes JavaScript only supports single class inheritance
// define the Person Class function Person() {} Person.prototype.walk = function(){}; Person.prototype.sayHello = function(){ alert ('hello'); }; // define the Student class inherit Person function Student() {} Student.prototype = new Person(); Student.prototype.constructor = Student; // override the sayHello method Student.prototype.sayHello = function(){ alert('hi, I am a student'); }; var student1 = new Student(); student1.sayHello();
Prototype is a property of the function objects >>> var boo = function (){}; >>> typeof boo. prototype "object"
Use of the prototype The prototype is used when a function is called as a constructor
Prototype usage var Person = function (name) { this .name = name; }; Person. prototype .say = function (){ return this .name; };
Prototype usage >>> var dude = new Person( 'dude' ); >>> dude.name; "dude" >>> dude.say(); "dude"
Prototype usage say() is a property of the prototype object but it behaves as if it's a property of the dude object
Own properties vs. prototypes >>> dude. hasOwnProperty ( 'name' ); true >>> dude. hasOwnProperty ( 'say' ); false
isPrototypeOf() >>> Person. prototype . isPrototypeOf (dude); true >>> Object . prototype . isPrototypeOf (dude); true
__proto__ The objects have a secret link to the prototype of the constructor that created them __proto__ is not directly exposed in all browsers
__proto__ >>> dude.__proto__. hasOwnProperty ( 'say' ) true >>> dude.__proto__.__proto__. hasOwnProperty ( 'toString' ) true
Prototype chain
Its a live chain >>> typeof dude.numlegs "undefined" >>> Person. prototype .numlegs = 2 ; >>> dude.numlegs 2
Its a live chain >>> typeof dude.numlegs "undefined" >>> Person. prototype .numlegs = 2 ; >>> dude.numlegs 2
Summary
Objects Everything is an object (except a few primitive types) Objects are hashes Arrays are objects Class no such thing in JavaScript A function meant to be called with new Returns an object Inheritance Support singular inheritance Prototype Property of the function objects Its an object Useful with Constructor functions
References Object-Oriented JavaScript, Stoyan Stefanov Pro JavaScript Techniques, John Resig https://developer.mozilla.org/en/Introduction_to_Object-Oriented_JavaScript
油
油

More Related Content

JavaScript In Object Oriented Way

  • 1. 04 October 2009 Barcamp Phnom Penh 2009
  • 2. About Us Lim Borey Software Developer Chhorn Chamnap Software Developer
  • 3. Agenda Debugging Tool Data types Object Constructor Inheritance & Prototype Summary Q & A
  • 4. Debugging Tool Firebug Firefox extension
  • 5. JavaScript !== Java C-like syntax Classes
  • 6. Data types A. Primitive: number 1 , 3 , 1001 , 11.12 , 2e+3 string "a" , "stoyan" , "0" boolean true | false null undefined B. Objects everything else
  • 7. Objects hash tables key: value
  • 8. A simple object var obj = {}; obj.name = 'my object' ; obj.shiny = true ;
  • 9. A simple object var obj = { shiny: true , isShiny: function () { return this .shiny; } } ; obj.isShiny(); // true
  • 10. Methods When a property is a function we can call it a method var object = { method: function(){ alert( "heres method" ); } }
  • 11. Object literal notation Key-value pairs Comma-delimited Wrapped in curly braces {a: 1, b: "test"}
  • 12. Arrays Arrays are objects too Auto-increment properties Some useful methods
  • 13. Arrays >>> var a = [1,3,2]; >>> a[0] 1 >>> typeof a "object" >>> var b = []; >>> b.push("value"); >>> console.log(b); // "value"
  • 14. JSON Object literals + array literals JavaScript Object Notation {"num": 1 , "str": "abc" , "arr": [ 1 , 2 , 3 ]}
  • 15. Constructor Is called at the moment of instantiation In JavaScript, the function serves as the constructor of the object var Person = function () { alert('Person instantiated'); } var person1 = new Person(); var person2 = new Person();
  • 16. constructor property >>> function Person(){}; >>> var mony = new Person(); >>> mony. constructor === Person true
  • 17. constructor property >>> var obj = {}; >>> obj. constructor === Object true >>> [1,2]. constructor === Array true
  • 18. Built-in constructors Object Array Function RegExp Number String Boolean Date Error, SyntaxError, ReferenceError
  • 20. Inheritance A method to create a class as a specialized version of one or more classes JavaScript only supports single class inheritance
  • 21. // define the Person Class function Person() {} Person.prototype.walk = function(){}; Person.prototype.sayHello = function(){ alert ('hello'); }; // define the Student class inherit Person function Student() {} Student.prototype = new Person(); Student.prototype.constructor = Student; // override the sayHello method Student.prototype.sayHello = function(){ alert('hi, I am a student'); }; var student1 = new Student(); student1.sayHello();
  • 22. Prototype is a property of the function objects >>> var boo = function (){}; >>> typeof boo. prototype "object"
  • 23. Use of the prototype The prototype is used when a function is called as a constructor
  • 24. Prototype usage var Person = function (name) { this .name = name; }; Person. prototype .say = function (){ return this .name; };
  • 25. Prototype usage >>> var dude = new Person( 'dude' ); >>> dude.name; "dude" >>> dude.say(); "dude"
  • 26. Prototype usage say() is a property of the prototype object but it behaves as if it's a property of the dude object
  • 27. Own properties vs. prototypes >>> dude. hasOwnProperty ( 'name' ); true >>> dude. hasOwnProperty ( 'say' ); false
  • 28. isPrototypeOf() >>> Person. prototype . isPrototypeOf (dude); true >>> Object . prototype . isPrototypeOf (dude); true
  • 29. __proto__ The objects have a secret link to the prototype of the constructor that created them __proto__ is not directly exposed in all browsers
  • 30. __proto__ >>> dude.__proto__. hasOwnProperty ( 'say' ) true >>> dude.__proto__.__proto__. hasOwnProperty ( 'toString' ) true
  • 32. Its a live chain >>> typeof dude.numlegs "undefined" >>> Person. prototype .numlegs = 2 ; >>> dude.numlegs 2
  • 33. Its a live chain >>> typeof dude.numlegs "undefined" >>> Person. prototype .numlegs = 2 ; >>> dude.numlegs 2
  • 35. Objects Everything is an object (except a few primitive types) Objects are hashes Arrays are objects Class no such thing in JavaScript A function meant to be called with new Returns an object Inheritance Support singular inheritance Prototype Property of the function objects Its an object Useful with Constructor functions
  • 36. References Object-Oriented JavaScript, Stoyan Stefanov Pro JavaScript Techniques, John Resig https://developer.mozilla.org/en/Introduction_to_Object-Oriented_JavaScript
  • 37. 油
  • 38. 油