JavaScript In Object Oriented Way
description
Transcript of JavaScript In Object Oriented Way
![Page 1: JavaScript In Object Oriented Way](https://reader035.fdocuments.us/reader035/viewer/2022062512/5549f20eb4c9050d488b54d9/html5/thumbnails/1.jpg)
04 October 2009Barcamp Phnom Penh 2009
![Page 2: JavaScript In Object Oriented Way](https://reader035.fdocuments.us/reader035/viewer/2022062512/5549f20eb4c9050d488b54d9/html5/thumbnails/2.jpg)
About UsAbout Us
Lim Borey
Software Developer
Chhorn Chamnap
Software Developer
![Page 3: JavaScript In Object Oriented Way](https://reader035.fdocuments.us/reader035/viewer/2022062512/5549f20eb4c9050d488b54d9/html5/thumbnails/3.jpg)
Agenda Debugging Tool
Data types
Object
Constructor
Inheritance & Prototype
Summary
Q & A
![Page 4: JavaScript In Object Oriented Way](https://reader035.fdocuments.us/reader035/viewer/2022062512/5549f20eb4c9050d488b54d9/html5/thumbnails/4.jpg)
Debugging Tool
Firebug – Firefox extension
![Page 5: JavaScript In Object Oriented Way](https://reader035.fdocuments.us/reader035/viewer/2022062512/5549f20eb4c9050d488b54d9/html5/thumbnails/5.jpg)
JavaScript !== Java C-like syntax Classes
![Page 6: JavaScript In Object Oriented Way](https://reader035.fdocuments.us/reader035/viewer/2022062512/5549f20eb4c9050d488b54d9/html5/thumbnails/6.jpg)
Data types
A. Primitive:number – 1, 3, 1001, 11.12, 2e+3string – "a", "stoyan", "0"boolean – true | falsenullundefined
B. Objectseverything else…
![Page 7: JavaScript In Object Oriented Way](https://reader035.fdocuments.us/reader035/viewer/2022062512/5549f20eb4c9050d488b54d9/html5/thumbnails/7.jpg)
Objects hash tables key: value
![Page 8: JavaScript In Object Oriented Way](https://reader035.fdocuments.us/reader035/viewer/2022062512/5549f20eb4c9050d488b54d9/html5/thumbnails/8.jpg)
A simple objectvar obj = {};
obj.name = 'my object';
obj.shiny = true;
![Page 9: JavaScript In Object Oriented Way](https://reader035.fdocuments.us/reader035/viewer/2022062512/5549f20eb4c9050d488b54d9/html5/thumbnails/9.jpg)
A simple object
var obj = {
shiny: true,
isShiny: function() {
return this.shiny;
}
};
obj.isShiny(); // true
![Page 10: JavaScript In Object Oriented Way](https://reader035.fdocuments.us/reader035/viewer/2022062512/5549f20eb4c9050d488b54d9/html5/thumbnails/10.jpg)
Methods When a property is a functionwe can call it a method
var object = {
method: function(){
alert("here’s method");
}
}
![Page 11: JavaScript In Object Oriented Way](https://reader035.fdocuments.us/reader035/viewer/2022062512/5549f20eb4c9050d488b54d9/html5/thumbnails/11.jpg)
Object literal notation
Key-value pairs Comma-delimited Wrapped in curly braces
{a: 1, b: "test"}
![Page 12: JavaScript In Object Oriented Way](https://reader035.fdocuments.us/reader035/viewer/2022062512/5549f20eb4c9050d488b54d9/html5/thumbnails/12.jpg)
Arrays Arrays are objects too Auto-increment properties Some useful methods
![Page 13: JavaScript In Object Oriented Way](https://reader035.fdocuments.us/reader035/viewer/2022062512/5549f20eb4c9050d488b54d9/html5/thumbnails/13.jpg)
Arrays>>> var a = [1,3,2];
>>> a[0]
1
>>> typeof a
"object"
>>> var b = [];>>> b.push("value");
>>> console.log(b);
// "value"
![Page 14: JavaScript In Object Oriented Way](https://reader035.fdocuments.us/reader035/viewer/2022062512/5549f20eb4c9050d488b54d9/html5/thumbnails/14.jpg)
JSON Object literals + array literals JavaScript Object Notation
{"num": 1, "str": "abc", "arr": [1,2,3]}
![Page 15: JavaScript In Object Oriented Way](https://reader035.fdocuments.us/reader035/viewer/2022062512/5549f20eb4c9050d488b54d9/html5/thumbnails/15.jpg)
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();
![Page 16: JavaScript In Object Oriented Way](https://reader035.fdocuments.us/reader035/viewer/2022062512/5549f20eb4c9050d488b54d9/html5/thumbnails/16.jpg)
constructor property>>> function Person(){};
>>> var mony = new Person();
>>> mony.constructor === Person
true
![Page 17: JavaScript In Object Oriented Way](https://reader035.fdocuments.us/reader035/viewer/2022062512/5549f20eb4c9050d488b54d9/html5/thumbnails/17.jpg)
constructor property>>> var obj = {};
>>> obj.constructor === Object
true
>>> [1,2].constructor === Array
true
![Page 18: JavaScript In Object Oriented Way](https://reader035.fdocuments.us/reader035/viewer/2022062512/5549f20eb4c9050d488b54d9/html5/thumbnails/18.jpg)
Built-in constructors
Object Array Function RegExp Number String Boolean Date Error, SyntaxError, ReferenceError…
![Page 19: JavaScript In Object Oriented Way](https://reader035.fdocuments.us/reader035/viewer/2022062512/5549f20eb4c9050d488b54d9/html5/thumbnails/19.jpg)
Inheritance & Prototype
![Page 20: JavaScript In Object Oriented Way](https://reader035.fdocuments.us/reader035/viewer/2022062512/5549f20eb4c9050d488b54d9/html5/thumbnails/20.jpg)
Inheritance A method to create a class as a specialized version of one or more classes
JavaScript only supports single class inheritance
![Page 21: JavaScript In Object Oriented Way](https://reader035.fdocuments.us/reader035/viewer/2022062512/5549f20eb4c9050d488b54d9/html5/thumbnails/21.jpg)
// 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();
![Page 22: JavaScript In Object Oriented Way](https://reader035.fdocuments.us/reader035/viewer/2022062512/5549f20eb4c9050d488b54d9/html5/thumbnails/22.jpg)
Prototype…… is a property of the function objects
>>> var boo = function(){};
>>> typeof boo.prototype
"object"
![Page 23: JavaScript In Object Oriented Way](https://reader035.fdocuments.us/reader035/viewer/2022062512/5549f20eb4c9050d488b54d9/html5/thumbnails/23.jpg)
Use of the prototype The prototype is used when a function is called as a constructor
![Page 24: JavaScript In Object Oriented Way](https://reader035.fdocuments.us/reader035/viewer/2022062512/5549f20eb4c9050d488b54d9/html5/thumbnails/24.jpg)
Prototype usage
var Person = function(name) {
this.name = name;
};
Person.prototype.say = function(){
return this.name;
};
![Page 25: JavaScript In Object Oriented Way](https://reader035.fdocuments.us/reader035/viewer/2022062512/5549f20eb4c9050d488b54d9/html5/thumbnails/25.jpg)
Prototype usage>>> var dude = new Person('dude');
>>> dude.name;
"dude"
>>> dude.say();
"dude"
![Page 26: JavaScript In Object Oriented Way](https://reader035.fdocuments.us/reader035/viewer/2022062512/5549f20eb4c9050d488b54d9/html5/thumbnails/26.jpg)
Prototype usage say() is a property of the prototype object
but it behaves as if it's a property of the dude object
![Page 27: JavaScript In Object Oriented Way](https://reader035.fdocuments.us/reader035/viewer/2022062512/5549f20eb4c9050d488b54d9/html5/thumbnails/27.jpg)
Own properties vs. prototype’s
>>> dude.hasOwnProperty('name');
true
>>> dude.hasOwnProperty('say');
false
![Page 28: JavaScript In Object Oriented Way](https://reader035.fdocuments.us/reader035/viewer/2022062512/5549f20eb4c9050d488b54d9/html5/thumbnails/28.jpg)
isPrototypeOf()
>>> Person.prototype.isPrototypeOf(dude);
true
>>> Object.prototype.isPrototypeOf(dude);
true
![Page 29: JavaScript In Object Oriented Way](https://reader035.fdocuments.us/reader035/viewer/2022062512/5549f20eb4c9050d488b54d9/html5/thumbnails/29.jpg)
__proto__ The objects have a secret link to the prototype of the constructor that created them
__proto__ is not directly exposed in all browsers
![Page 30: JavaScript In Object Oriented Way](https://reader035.fdocuments.us/reader035/viewer/2022062512/5549f20eb4c9050d488b54d9/html5/thumbnails/30.jpg)
__proto__
>>> dude.__proto__.hasOwnProperty('say')true
>>> dude.__proto__.__proto__.hasOwnProperty('toString')
true
![Page 31: JavaScript In Object Oriented Way](https://reader035.fdocuments.us/reader035/viewer/2022062512/5549f20eb4c9050d488b54d9/html5/thumbnails/31.jpg)
Prototype chain
![Page 32: JavaScript In Object Oriented Way](https://reader035.fdocuments.us/reader035/viewer/2022062512/5549f20eb4c9050d488b54d9/html5/thumbnails/32.jpg)
It’s a live chain
>>> typeof dude.numlegs
"undefined"
>>> Person.prototype.numlegs = 2;
>>> dude.numlegs
2
![Page 33: JavaScript In Object Oriented Way](https://reader035.fdocuments.us/reader035/viewer/2022062512/5549f20eb4c9050d488b54d9/html5/thumbnails/33.jpg)
It’s a live chain
>>> typeof dude.numlegs
"undefined"
>>> Person.prototype.numlegs = 2;
>>> dude.numlegs
2
![Page 34: JavaScript In Object Oriented Way](https://reader035.fdocuments.us/reader035/viewer/2022062512/5549f20eb4c9050d488b54d9/html5/thumbnails/34.jpg)
Summary
![Page 35: JavaScript In Object Oriented Way](https://reader035.fdocuments.us/reader035/viewer/2022062512/5549f20eb4c9050d488b54d9/html5/thumbnails/35.jpg)
ObjectsEverything is an object (except a few primitive types)
Objects are hashesArrays are objects
Class – no such thing in JavaScriptA function meant to be called with newReturns an object
InheritanceSupport singular inheritance
PrototypeProperty of the function objectsIt’s an object Useful with Constructor functions
![Page 36: JavaScript In Object Oriented Way](https://reader035.fdocuments.us/reader035/viewer/2022062512/5549f20eb4c9050d488b54d9/html5/thumbnails/36.jpg)
References
Object-Oriented JavaScript, Stoyan Stefanov
Pro JavaScript™ Techniques, John Resig
https://developer.mozilla.org/en/Introduction_to_Object-Oriented_JavaScript
![Page 37: JavaScript In Object Oriented Way](https://reader035.fdocuments.us/reader035/viewer/2022062512/5549f20eb4c9050d488b54d9/html5/thumbnails/37.jpg)
![Page 38: JavaScript In Object Oriented Way](https://reader035.fdocuments.us/reader035/viewer/2022062512/5549f20eb4c9050d488b54d9/html5/thumbnails/38.jpg)