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