JavaScript OOPs

JavaScript OOPs
2014/01/22

Johnson

OOP
●

Inheritance
○
○

●

An object is based on another object using the same implementation
Code reuse

Encapsulation
○
○

●

Restricting access to some of the object's components
Code extensibility

Polymorphism
○

A single interface to entities of different types

○

Code flexibiity

Classical vs Prototypal Inheritance
●

Classical
○
○

●

In most OOP languages, there are classes and objects
Classes inherit from other classes

Prototypal
○

JavaScript is prototypal based

○

An object inherits from another object

[[Object]]
Animal

[[CLASS]]
Animal

[[Object]]

[[Object]]

Cat

Cat

[[Object]]

[[Object]]

Dog

Dog

Peudoclassical
●

Contructor Pattern
○

Using the new keyword

○

Using this to store object own status

○

Using prototype to share methods

Pesudoclassical
●

Instantiation

1 function Rectangle(width, height) {
2
this.height = height;
3
this.width = width;
4}
5
6 Rectangle.prototype.area = function () {
7
return this.width * this.height;
8 };
9
10 var rect = new Rectangle(5, 10);

Pesudoclassical
●

Subclass Inheritance

1 function Square(side) {
2
Rectangle.call(this, side, side);
3}
4
5 Square.prototype = Object.create(Rectangle.prototype);
6
7 Square.prototype.constructor = Square;
8
9 var sq = new Square(5);
10
11 alert(sq.area());

Pesudoclassical
●

Encapsulation & Privileged Method

1 function Game() {
2
var name = ‘U3D’;
3
var version = 0.5;
4
this.getVersion = function () {
5
return ‘Version: ’ + name + ‘ - ’ + version;
6
}
7}
8 Game.prototype.play = function () { return ‘play’; };
9
10 var g = new Game();
11 alert(g.getVersion());

Pesudoclassical
●
1
2
3
4
5
6
7
8
9

Polymorphism

function SpaceGame() {
Game.call(this);
}
...
SpaceGame.prototype.play = function () { return ‘space play’; };
var sg = new SpaceGame();
alert(sg.play());

Comparison With Prototypal
●
1
2
3
4
5
6
7
8

Instantiation

var rect = {
height: 5,
width: 10
}
rect.area = function () {
};

1 function Rectangle(width, height) {
2
this.height = height;
3
this.width = width;
4}
5
6 Rectangle.prototype.area = function () {
7
8 };
9
10 var rect = new Rectangle(5, 10);

●
1
2
3
4
5
6


var sq = Object.create(rect);
sq.height = 5;
sq.width = 5;
alert(sq.area());

1 function Square(side) {
2
Rectangle.call(this, side, side);
3}
4
5 Square.prototype = Object.create(Rectangle.prototype);
6
7 Square.prototype.constructor = Square;
8
9 var sq = new Square(5);
10
11 alert(sq.area());

●


1 var g = {};
2 // Imediate function & closure
3 g.getVersion = (function() {
4
var name = ‘U3D’;
5
var version = 0.5;
6
return function() {
7
return ‘Version: ’ + name + ‘ - ’ + version;
8
}
9 })();
10
11 alert(g.getVersion());

●
1
2
3
4
5
6
7

Polymorphism

var sg = Object.create(g);
sg.play = function() {
return ‘space play’;
};
alert(sg.play());

1 function SpaceGame() {
2
Game.call(this);
3}
4 ...
5 SpaceGame.prototype.play = function () {
6
return ‘space play’;
7 };
8
9 var sg = new SpaceGame();
10
11 alert(sg.play());

Stop Using The new Keyword
●

Raynos
new is a remnant of the days where JavaScript accepted
a Java like syntax for gaining “popularity”

●

Brendan Eich
And we were pushing it as a little brother to Java, as
a complementary language like Visual Basic was to C++
in Microsoft’s language families at the time

Stop Using The new Keyword
●

Douglas Crockford
This indirection was intended to make the language seem
more familiar to classically trained programmers, but
failed to do that, as we can see from the very low
opinion
Java
programmers
have
of
JavaScript.
JavaScript’s constructor pattern did not appeal to the
classical crowd. It also obscured JavaScript’s true
prototypal nature. As a result, there are very few
programmers
who
know
how
to
use
the
language
effectively.

Advantages of Prototypal Pattern
Constructor Pattern

Prototypal Pattern

Functional features can't be used in
conjunction with the new keyword.

Functional features can be used in conjunction
with create.

Forgetting to use new leads to unexpected
bugs and global variables.

Since create is a function the program will
always work as expected.

Prototypal inheritance is unnecessarily
complicated and confusing.

Prototypal inheritance is simple and easy to
understand.

Two Types of Prototype-based Language
●

Delegation
In prototype-based languages that use delegation, the
language runtime is capable of dispatching the correct
method or finding the right piece of data simply by
following a series of delegation pointers (from object
to its prototype) until a match is found.

●

Concatenation
… there are no visible pointers or links to the
original prototype from which an object is cloned. The
prototype (parent) object is copied rather than linked
to. As a result, changes to the prototype will not be
reflected in cloned objects.

Delegation vs Concatenation Inheritance
[[Object]]
[[Object]]
Animal
Animal

[[Object]]

[[Object]]

Cat

Cat

[[Object]]
Dog

[[Object]]
Dog

Pros and Cons
Delegation

Concatenation

Any changes to the prototype are automatically
reflected on all its clones.

Any changes to the prototype need to be
propagated to all its clones.

Property access is slower because it may need
to traverse up the prototype chain.

Property access is faster because inherited
properties are copied.

Objects may only delegate to a single prototype
in JavaScript.

Objects may copy properties from any number
of prototypes.

Functional Pattern(Factory Pattern)
●

Douglas Crockford
The functional pattern has a great deal of flexibility.
It requires less effort than the pseudoclassical
pattern, and gives us better encapsulation and
information hiding and access to super methods.

●

GoF
Favor object composition over class inheritance

Functional Pattern
●

Instantiation

1 function rectangle(spec) {
2
var that = {};
3
that.height = spec.height;
4
that.width = spec.width;
5
that.area = function() { return spec.width * spec.height; };
5
return that;
6}
7
8 var rect = rectangle({height: 5, width: 10});

Functional Pattern
●
1
2
3
4
5
6
7


function square(spec) {
var that = rectangle({height: spec.side, width: spec.side});
return that;
}
var sq = square({side: 5});
alert(sq.area());

Functional Pattern
●


1 function square(spec) {
2
3
4
var varsion = ‘1.0’;
5
that.getVersion = function() { return ‘Version: ’ + version; };
6
7
return that;
8}
9
10 var sq = square({side: 5});
11 alert(sq.getVersion());

Functional Pattern
●
1
2
3
4
5
6
7
8

Polymorphism

function square(spec) {
that.area = function(){ return spec.width * spec.height * 5; }
return that;
}
var sq = square({side: 5});
alert(sq.area());

Benchmark

Constructor v.s. Prototypal v.s. Functional

Reference
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●

Benefits of prototypal inheritance over classical
Why prototypal inheritance matters?
Prototypal-based programming
Prototypal Inheritance in JavaScript
Stop Using Constructor Functions In JavaScript
Fluent JavaScript - Three Different Kinds of Prototypal OO
Classical Inheritance Is Obsolete - How To Think In Prototypal OO
Mixin Pattern In JavaScript
JavaScript Module Pattern: In-Depth
Prototype-based Programming
Delegation Programming
Dynamic Dispatch
What The Fuck Is Prototypal Inheritance?
Introduction to Object-Oriented JavaScript
Inheritance and Prototype Chain
Prototypal Inheritance
Comparing Prototypal and Classical Inheritance
JavaScript Prototypal Object Oriented Programming in Practice
Make Object-Oriented Programming Easier With Only Six Lines Of JavaScript

Reference
●
●
●
●
●
●
●
●
●
●

JavaScript Constructor Prototypes and The new Keyword
Create Advanced Web Applications With Object-Oriented Techniques
Scripting Mantainability
Optimizing JavaScript for Extreme Performance and Low Memory Consumption
OO Design Patterns
JavaScript Is Sexy
JavaScript Inheritance Patterns
JavaScript: The Good Parts
Secrets of The JavaScript Ninja
JavaScript: The Definitive Guide, 6th Edition

JavaScript OOPs

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to JavaScript OOPs (20)

Recently uploaded (20)

JavaScript OOPs