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

Similar to Object Oriented JavaScript

More from Julie Iskander

Recently uploaded

Object Oriented JavaScript

Editor's Notes