A simple introduction to Object-Oriented programming, using Javascript.

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

2. We will take a look to :
­ Object­oriented programming basic
concepts.
­ Javascript Object creation.

3. 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.

4. 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.

5. Object oriented essentials
(no javascript specific)
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();
}
}

6. 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.

7. 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.

8. 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.

9. Object creation
in Javascript

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

11. 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 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.

12. 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

13. 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

14. 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

15. var myFirstCar = new Car();
myFirstCar.accelerate(15);
myFirstCar.currentSpeed;
=> 15
myFirstCar.accelerate(95);
=> Your car will break.
myFirstCar.currentSpeed;
=> 15
new

16. Let's do the same example but using
object prototypes instead of
constructor methods.
Object.create()

17. 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()

18. var myFirstCar = Object.create(Car);
myFirstCar.accelerate(15);
myFirstCar.currentSpeed;
=> 15
myFirstCar.accelerate(95);
=> Your car will break.
myFirstCar.currentSpeed;
=> 15
Object.create()

19. What if I want to modify Object
prototype's default values at
creation time?
Object.create()

20. It requires some extra code lines
than using a constructor method, but
it has some cool features.
Object.create()

21. 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()

22. 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()

23. 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()

24. var myNewCar = Object.create(Car, {
plate: {
writable: false,
value: 'my Car Plate'
},
[...]
});
myNewCar.plate = 'Hello';
myNewCar.plate;
=> 'my Car Plate'
Object.create()

25. 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()

26. 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()

27. 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()

28. 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()

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