Object Oriented JavaScript

Lecture Outline

 Object-Oriented JavaScript

 Inheritance

Objects

 Is a self-contained collection of data.

 The data can be
 properties, a variable belonging to an object.
 methods, a function that the object can invoke, an
object in itself.

 Properties and methods are both accessed using
dot notation.

Objects (Cont’d)

 No class, classless approach

 Objects are created through:
 Literal notation using { }
 Constructors function

Using object literal
notation{}
 To create an empty object
 var x={}

 To create an object with properties and methods
var student={
track:"PD",
marks:[100,200,300],
getTotal: function ()
{
var sum=0;
for(var i in this.marks)
sum+=this.marks[i];
return sum;
}
}

Accessing Properties

 Using square bracket notation
 student[„track‟] PD

 Using the dot notation,
 student.track  PD

Objects inside Objects

 Example
var book = {
name: 'Catch-22',
published: 1961,
author: {
firstname: 'Joseph',
lastname: 'Heller'
}
};

 book.author.firstname
 book['author']['lastname']

Delete a Property

delete student.track;

Using Constructor function

 function student(name) {
this.track="PD”;
this.name=name;
this.marks=[100,200,300];
this.getTotal= function ()
{
var sum=0;
for(var i in this.marks)
sum+=this.marks[i];
return sum;
};
}

 To create an object, use new operator
 var std = new student(“Smith”);

What happens when you
create an object without
‘new’ operator?
 var std =student()

 this  refers to global object ‘window’

 std  undefined or whatever constructor returns if it
returns anything

Try Objects
Use Developer tools

constructor Property

 It contains a reference to the constructor function used to
create this object.
 std.constructor  student(name)
 var h3 = new std.constructor('Rafaello');

 If an object was created using the object literal notation??
 its constructor is the built-in Object() constructor function.
 var o = {};
 o.constructor Object()  empty object
 typeof o.constructor  "function"

Passing Objects

 When you copy an object or pass it to a function, you
only pass a reference to that object. Consequently, if you
make a change to the reference, you are actually
modifying the original object.
 Example
 var original = {howmany: 1};
 var copy = original;
 copy.howmany  1
 copy.howmany = 100;
 original.howmany  100

 The same thing applies when passing objects to
functions:

Comparing Objects

 true  iff you compare two references to the
same object. >>>
 var fido = {breed: 'dog'};
 var benji = {breed: 'dog'};
 benji == fido  false

 However
 var mydog = benji;
 mydog == benji  true

Object object

 Object is the parent of all JavaScript objects

 Every object created inherits from it.

 To create a new empty object
 var o = {};
 var o = new Object();

 Properties:
 o.constructor property returns the constructor function
 o.toString() is a method that returns a string representation of the
object
 o.valueOf() returns a single-value representation of the object, often
this is the object itself

Private Members

 Ordinary ’var’ of the constructor are private members.
 function Container(param)
 {
 this.member = param;
 var secret = 3;
 var that = this;
 }

 secret and that are attached to the object, but they are
not accessible to the outside, nor are they accessible to
the object's own public methods. They are accessible to
private methods.

Private Methods
function Container(param)
{
function dec()
{
if (secret > 0)
{
secret -= 1; return true;
}
else
{return false;}
}
this.member = param; var secret = 3; var that =
this;
}

Privileged Method

 Is able to access the private variables and
methods, and is itself public.
this.service = function ()
{
return dec() ? that.member : null;
};

 Private and privileged members can only be made
when an object is constructed (in a constructor).

Inheritance

 Used for code reuse

 JavaScript don’t use class-inheritance but prototype-
inheritance (based on Objects)

 There are many ways to implement inheritance.

 We will cover Prototype Chaining

Function Object

 Properties:
 length: number of arguments
 constructor: Function()
 prototype: initially is an empty object

Prototype

 JavaScript prototype-based object model

 Every function object has a prototype property,

 Initially empty Object

 Augment this empty object with properties and
methods.

 Only be used when function is used as a
constructor.

Adding Methods and
Properties
function Gadget.prototype.price = 100;
Gadget(name, color) {
this.name = name;
Gadget.prototype.rating = 3;
this.color = color; Gadget.prototype.getInfo =
this.whatAreYou = function() {
function() return 'Rating: ' + this.rating +
{ ', price: ' + this.price;
return 'I am a ' + this.color
+ ' ' + this.name; };
}

}

What if object contain a
property defined in
prototype?
 Own Property overrides prototype property

 propertyIsEnumerable()

 hasOwnProperty()

 isPrototypeOf()

What is the result?

function Gadget(name, color) var newtoy = new
Gadget('webcam', 'black');
{ for (var prop in newtoy)
this.name = name;
{
this.color = color;
console.log(prop + ' = ' +
this.someMethod =
function(){return 1;} newtoy[prop]);
}
}
name = webcam
Gadget.prototype.price = 100; color = black
someMethod = function () { return 1; }
Gadget.prototype.rating = 3; price = 100
rating = 3

What is the result?

function var newtoy = new
Gadget(name, color) Gadget('webcam', 'black');
{ for (var prop in newtoy) {
this.name = name; if (newtoy.hasOwnProperty(prop))
this.color = color; {
this.someMethod = console.log(prop + '=' +
function(){return 1;} newtoy[prop]);
} }
}
Gadget.prototype.price =
100; name = webcam
Gadget.prototype.rating = 3; color = black
someMethod = function () { return 1; }

Augmenting Built-in
Objects

Array.prototype.inArray = function(needle) {
for (var i = 0, len = this.length; i < len; i++) {
if (this[i] === needle) {
return true;
}
}
return false;

}

Note

 When you completely overwrite the
prototype,
 Has negative side effects on the constructor
property.
 Solution:
 TwoDShape.prototype.constructor =
TwoDShape;
 Triangle.prototype.constructor = Triangle;

What do the JavaScript
engine does when you call
my.toString()?
 var my=new Triangle(5,10)
 Loops through all of the properties of my
 If not found, looks at the object that my.__proto__
points to; the instance of TwoDShape() .
 Loops through the instance of TwoDShape.
 If not found, checks the __proto__ of that object that
points to the instance of Shape().
 Loops through the instance of Shape() and toString()
is finally found!

For efficiency:
Moving shared properties to the
prototype
function Shape(){} function Triangle(side, height) {
Shape.prototype.name = 'shape'; this.side = side;
Shape.prototype.toString = function() this.height = height;
{return this.name;}; }

function TwoDShape(){} Triangle.prototype = new
TwoDShape.prototype = new TwoDShape();
Shape(); Triangle.prototype.constructor =
TwoDShape.prototype.constructor = Triangle;
TwoDShape;
TwoDShape.prototype.name = '2D Triangle.prototype.name = 'Triangle';
shape'; Triangle.prototype.getArea =
function(){return this.side *
this.height / 2;};

References
 Object-Oriented JavaScript Create Scalable, reusable, high
quality JavaScript applications and libraries, Stoyan
Stefanov, 2008.

 http://www.quirksmode.org/js

Object Oriented JavaScript

More Related Content

What's hot (20)

Similar to Object Oriented JavaScript (20)

More from Julie Iskander (20)

Recently uploaded (20)

Object Oriented JavaScript

Editor's Notes