Object Oriented ProgramminginJavaScript

Hans de Rooijhdr.is-a-geek.com

JavaScript object basics

In JavaScript an object is an (unordered) collection of name-value pairs

Please note that in JavaScript values can be functions!

Built-in objects

Built-in objects (with constructor)Object, Function, Array, Date, RegExp & Error

Built-in objects (without constructor)Global object, Math & JSON

Primitive wrapper objectsString, Number & Boolean

Built-in object creation

Objects are created using constructors in new expressionsAlternative syntax is the object literal

Objects without constructors can be used immediately. For instance: x = Math.PI;

Wrapper objects are created automatically when needed

JavaScript built-in objects fiddle

//Declaration object referencesvar obj_inst_1, obj_inst_2;

//Use the Object constructor in conjunction with the new operator to//instantiate a new object and assign the reference to obj_inst_1obj_inst_1 = new Object();

//In JavaScript object properties and methods can be added on the flyobj_inst_1.prop = "Added on the fly";obj_inst_1.func = function() {return this.prop + "!";};

toFiddleResult(obj_inst_1.func());

//Object literal, an alternative way to instantiate Javascript objectsobj_inst_2 = { prop: "Added as part of the object literal", func: function() {return this.prop + "!";}};

toFiddleResult(obj_inst_2.func());

//There is no need to instantiate objects without constructors, i.e.//the global object, Math & JSONvar global = this; //In top level code this refers to the global object

toFiddleResult("Is 42 a finite number? " + global.isFinite(42));toFiddleResult("The number \u03c0 = " + Math.PI);

//Primitive wrapper objects are created automatically when neededvar str = "\u00a9 Hans de Rooij";toFiddleResult(str.substring(2, 6) + " wrote this code");

//Function for displaying code results in the JSFiddle results panefunction toFiddleResult(str) { //Reference to document node containing fiddle results var result_div = document.getElementById("fiddle_result");

//Fiddle results are listed in pre tags var add_pre = document.createElement("pre"); add_pre.appendChild(document.createTextNode(str)); result_div.appendChild(add_pre);}

Custom object creation

Custom objects can be created using a

regular JavaScript function that returns an object reference

constructor function invoked in the context of a new expressionPlease note;A constructor is a regular JavaScript function!

In case no prototype functionality is used all properties and methods will be created on the object instance

JavaScript custom objects fiddle

Constructor function & prototype

Using both the constructor function and prototype it's possible to defineobject state at the instance level and

object behavior at the level of the shared prototype

When reading JavaScript properties the entire prototype chain is searched in case a property cannot be located on an object instance

Individual object instances can override inherited behavior

JavaScript constructor function and prototype fiddleschema on next slide!

Constructor prototype

Schematically

JavaScript inheritance

Combination inheritanceis the most common way to implement inheritance in JavaScript

has two componentsPrototype chaining for the implementation of (shared) base class behavior

Constructor stealing for the initialization of base class properties on derived object instances

JavaScript combination inheritance fiddleschema on next slide!

JavaScript inheritance example

Prototypal inheritance

In prototypal inheritancea new object instance inherits directly from another object instance

there is no need to implement constructor functions

In ECMAScript (fifth edition) prototypal inheritance is implemented as follows:var die_3 = Object.create(die_1);

JavaScript prototypal inheritance fiddleschema on next slide!

Prototypal inheritance example

Conclusion

JavaScript has strong capabilities in the area of Object Oriented Programming

The implementation of OOP features differs greatly from class based languages

In JavaScript it's common for there to be several OOP implementation alternatives

I had to invest a significant amount of time & effort to come to grips with all the intricacies of JavaScript OOP but, in the end, it proved to be a great learning experience for me

Hans de Rooij hdr.is-a-geek.com