Upload
borey-lim
View
2.769
Download
3
Embed Size (px)
DESCRIPTION
presentation at barcamp phnom penh 2009
Citation preview
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