JavaScript In Object Oriented Way

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( "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 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

It’s a live chain >>> typeof dude.numlegs "undefined" >>> Person. prototype .numlegs = 2 ; >>> dude.numlegs 2

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 It’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

JavaScript In Object Oriented Way

More Related Content

What's hot (20)

Similar to JavaScript In Object Oriented Way (20)

Recently uploaded (20)

JavaScript In Object Oriented Way