04 October 2009Barcamp Phnom Penh 2009
About UsAbout 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+3string – "a", "stoyan", "0"boolean – true | falsenullundefined
B. Objectseverything else…
Objects hash tables key: value
A simple objectvar 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 functionwe can call it a method
var object = {
method: function(){
alert("here’s 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. prototype’s
>>> 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
It’s a live chain
>>> typeof dude.numlegs
"undefined"
>>> Person.prototype.numlegs = 2;
>>> dude.numlegs
2
It’s a live chain
>>> typeof dude.numlegs
"undefined"
>>> Person.prototype.numlegs = 2;
>>> dude.numlegs
2
Summary
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
References
Object-Oriented JavaScript, Stoyan Stefanov
Pro JavaScript™ Techniques, John Resig
https://developer.mozilla.org/en/Introduction_to_Object-Oriented_JavaScript