Object-Oriented Javascript

Object Oriented
Javascript
A pragmatic introduction
March 2015
Ibán Martínez
iban@nnset.com
www.openshopen.com

We will take a look to :
Objectoriented programming basic
concepts.
Javascript Object creation.

https://developer.mozilla.org/enUS/docs/Web/JavaScript/Introduction_to_ObjectOriented_JavaScript
Object oriented essentials
(no javascript specific)
Objectoriented 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/enUS/docs/Web/JavaScript/Introduction_to_ObjectOriented_JavaScript
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.

ClassClass
class ShoppingCart {
   [...]
}
ObjectObject
$myCart = new ShoppingCart();
PropertyProperty
class ShoppingCart {
   public $ownerName = 'Mike';
}
MethodMethod
classclass ShoppingCart { ShoppingCart {
   public $ownerName = 'Mike';
   public function addProduct(Product $product){
     $this>appendProductToShoppingList($product);
     $this>updateTotalPrice();
   }
}

(javascript specifics)
Prototypebased programming is a style of
objectoriented programming that doesn't make
use of classes. Instead, behavior reuse (known
as inheritance in classbased languages) is
accomplished through a process of decorating
(or expanding upon) existing objects which
serve as prototypes. This model is also known
as classless, prototypeoriented, or instance
based programming.

Prototypebased programming is a style of
objectoriented programming that doesn't make
use of classes. Instead, behavior reuse (known
as inheritance in classbased languages) is
accomplished through a process of decorating
(or expanding upon) existing objects which
serve as prototypes. This model is also known
as classless, prototypeoriented, or instance
based programming.
JavaScript is a prototypebased
language which contains no class
statement.

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 creation
in Javascript

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

https://developer.mozilla.org/enUS/docs/Web/JavaScript/Guide/Working_with_Objects
https://developer.mozilla.org/enUS/docs/Web/JavaScript/Reference/Global_Objects/Object/create
Objects creation
new & 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

}
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.
  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
=> Your car will break.
=> 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);
=> 15
=> Your car will break.
=> 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()

Additional features.
Immutable properties.
This features is available because Object.create() uses
Object.defineProperties() check :
https://developer.mozilla.org/enUS/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperties
Object.create()

var myNewCar = Object.create(Car, {
  plate: {
            writable: false,
          },
[...]
});
WriteableWriteable : true if and only if the valuevalue associated with the
property may be changed with an assignment operator.
Defaults to false.
Object.create()

  plate: {
            writable: false,
          },
[...]
});
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/enUS/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperties
Object.create()

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

  plate: {
           writable: true,
           value: 'my Car Plate',
         },
[...]
});
  => 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()

  _plate: {
            writable: true,
          },
  plate: {
         },
[...]
});
myNewCar.plate;
  => 'MY CAR PLATE'
Object.create()

Object-Oriented Javascript

More Related Content

Viewers also liked (19)

Similar to Object-Oriented Javascript (20)

Recently uploaded (20)

Object-Oriented Javascript