Object Oriented Javascript

A pragmatic introduction

March 2015

Ibán Martíneziban@nnset.com

www.openshopen.com

We will take a look to :

­ Object­oriented programming basic concepts. 

­ Javascript Object creation.

https://developer.mozilla.org/en­US/docs/Web/JavaScript/Introduction_to_Object­Oriented_JavaScript

Object oriented essentials(no javascript specific)

Object­oriented programming is a programming paradigm that uses abstraction to create models based on the real world. It uses several techniques from previously established paradigms, including modularity, polymorphism, and encapsulation.

https://developer.mozilla.org/en­US/docs/Web/JavaScript/Introduction_to_Object­Oriented_JavaScript

Object oriented essentials(no javascript specific)

ClassClass : Defines the characteristics of the object. It is a template definition of properties and methods of an object.

ObjectObject : An Instance of a class.

PropertyProperty : An object characteristic, such as color.

MethodMethod : An object capability, such as walk. It is a subroutine or function associated with a class.

Object oriented essentials(no javascript specific)

ClassClassclass ShoppingCart {   [...]

}

ObjectObject$myCart = new ShoppingCart();

PropertyPropertyclass ShoppingCart {   public $ownerName = 'Mike';

}

MethodMethodclassclass ShoppingCart { ShoppingCart {   public $ownerName = 'Mike';

   public function addProduct(Product $product){     $this­>appendProductToShoppingList($product);      $this­>updateTotalPrice();   }}

Object oriented essentials

(javascript specifics)

Prototype­based programming is a style of object­oriented programming that doesn't make use of classes. Instead, behavior reuse (known as inheritance in class­based languages) is accomplished through a process of decorating (or expanding upon) existing objects which serve as prototypes. This model is also known as classless, prototype­oriented, or instance­based programming.

Object oriented essentials

(javascript specifics)

Prototype­based programming is a style of object­oriented programming that doesn't make use of classes. Instead, behavior reuse (known as inheritance in class­based languages) is accomplished through a process of decorating (or expanding upon) existing objects which serve as prototypes. This model is also known as classless, prototype­oriented, or instance­based programming.

JavaScript is a prototype­based language which contains no class 

statement.

Object oriented essentials

(javascript specifics)

What is an 'object' for Javascript?

typeof({}); => 'object'

typeof([]); => 'object'

typeof(null); => 'object'

typeof(new String()); => 'object'

typeof(new Number()); => 'object'

typeof(new Boolean()); => 'object'

typeof(new Object()); => 'object'

In JavaScript, almost everything is an object.

Object creationin Javascript

Objects creationnew & Object.create()

Two common ways to create objects are using “new”“new” or “Object.create()”“Object.create()” directives.

https://developer.mozilla.org/en­US/docs/Web/JavaScript/Guide/Working_with_Objects

https://developer.mozilla.org/en­US/docs/Web/JavaScript/Reference/Global_Objects/Object/create

Objects creationnew & Object.create()

new

var myCar = new Car();

Requires a constructor method to be defined :

function Car(){ this.plate = 'My Plate';}

Object.create()

var myCar = Object.create(Car);

Requires a prototype to be defined :

var Car = {  plate: 'My Plate'}

Two common ways to create objects are using “new” or “Object.create()” directives.

Define your object propertiesproperties in a constructor method named as the “Class” you want to create. You may add some default values.

function Car(){  this.plate = '4787 BCN';  this.manufacturer = 'Tesla';  this.topSpeed = 80;}

You can pass arguments to the constructor aswell.

function Car(plate, manufacturer, topSpeed){  this.plate = plate||'4787 BCN';  this.manufacturer = manufacturer||'Tesla';  this.topSpeed = parseInt(topSpeed)||80;}

new

function Car(plate, manufacturer, topSpeed){  this.plate = plate||'4787 BCN';  this.manufacturer = manufacturer||'Tesla';  this.topSpeed = parseInt(topSpeed)||80;}

var myFirstCar  = new Car();var mySecondCar = new Car('123 SF','Ford',120);

myFirstCar.plate;  => '4787 BCN'

mySecondCar.plate;  => '123 SF'

new

Now define your object's methods.

function Car(plate, manufacturer, topSpeed){  this.plate = plate||'4787 BCN';  this.manufacturer = manufacturer||'Tesla';  this.topSpeed = parseInt(topSpeed)||80;  this.currentSpeed = 0;

  this.setCurrentSpeed = function(newSpeed){   this.currentSpeed = parseInt(newSpeed);  }

  this.accelerate = function(newSpeed){     if(parseInt(newSpeed) <= this.topSpeed){        this.setCurrentSpeed(newSpeed);     }     else{   throw 'Your car will break.';     }   }}

  

new

var myFirstCar = new Car();myFirstCar.accelerate(15);

myFirstCar.currentSpeed; => 15

myFirstCar.accelerate(95); => Your car will break.

myFirstCar.currentSpeed; => 15

  

new

Let's do the same example but using object prototypes instead of 

constructor methods.  

Object.create()

Object prototypesprototypes are defined as a Hash :

var Car = {  plate: '4787 BCN',  manufacturer : 'Tesla',  topSpeed : 80,  currentSpeed : 0,

  setCurrentSpeed : function(newSpeed){   this.currentSpeed = parseInt(newSpeed);  },  accelerate : function(newSpeed){   if(parseInt(newSpeed) <= this.topSpeed){      this.setCurrentSpeed(newSpeed);   }   else{   throw 'Your car will break.';   }  }}  

Object.create()

var myFirstCar = Object.create(Car);myFirstCar.accelerate(15);

myFirstCar.currentSpeed; => 15

myFirstCar.accelerate(95); => Your car will break.

myFirstCar.currentSpeed; => 15

  

Object.create()

What if I want to modify Object prototype's default values at 

creation time?  

Object.create()

It requires some extra code lines than using a constructor method, but 

it has some cool features. 

Object.create()

var newValues = {  plate: {             value: 'my Car Plate'           },  manufacturer: {             value: 'Ford'         },  topSpeed: {             value: 120        },  currentSpeed: {             value: 5        }};

var myNewCar = Object.create(Car, newValues);

myNewCar.plate; => 'my Car Plate'

'4787 BCN'

Car's prototype default values:

'Tesla'

80

0

Object.create()

Additional features.Immutable properties.

This features is available because Object.create() uses Object.defineProperties() check :

https://developer.mozilla.org/en­US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperties

Object.create()

var myNewCar = Object.create(Car, {  plate: { 

            writable: false,             value: 'my Car Plate'           },

[...]});

WriteableWriteable : true if and only if the valuevalue associated with the property may be changed with an assignment operator.

Defaults to false.

Object.create()

var myNewCar = Object.create(Car, {  plate: {             writable: false,             value: 'my Car Plate'           },

[...]});

myNewCar.plate = 'Hello';myNewCar.plate;  => 'my Car Plate'

Object.create()

Additional features.Accessors

(getters and setters)

This features is available because Object.create() uses Object.defineProperties() check :

https://developer.mozilla.org/en­US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperties

Object.create()

var myNewCar = Object.create(Car, {  plate: {            writable: true,            value: 'my Car Plate',           get: function(){ return this._plate.toUpperCase(); },           set: function(value){ this._plate = value; }           },

[...]});

Object.create()

var myNewCar = Object.create(Car, {  plate: {            writable: true,            value: 'my Car Plate',           get: function(){ return this._plate.toUpperCase(); },           set: function(value){ this._plate = value; }           },

[...]});

  => TypeError: Invalid property.  A property cannot both have accessors and be writable or have a value, #<Object>

Accessors and properties have to be defined separately.

Object.create()

var myNewCar = Object.create(Car, {  _plate: {             writable: true,             value: 'my Car Plate'           },  plate: {            get: function(){ return this._plate.toUpperCase(); },           set: function(value){ this._plate = value; }           },

[...]});

myNewCar.plate;  => 'MY CAR PLATE'

Object.create()

Object Oriented Javascript

A pragmatic introduction

March 2015

Ibán Martíneziban@nnset.com

www.openshopen.com