JavaScript OOPs2014/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

Classical vs Prototypal Inheritance

[[CLASS]]

Animal

[[Object]]

Dog

[[Object]]

Cat

[[Object]]

Dog

[[Object]]

Cat

[[Object]]

Animal

Peudoclassical● Contructor Pattern

○ Using the new keyword

○ Using this to store object own status

○ Using prototype to share methods

● Instantiation

Pesudoclassical

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);

● Subclass Inheritance

Pesudoclassical

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());

● Encapsulation & Privileged Method

Pesudoclassical

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’; }; 910 var g = new Game(); 11 alert(g.getVersion());

● Polymorphism

Pesudoclassical

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

● Instantiation

Comparison With Prototypal

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

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);

● Subclass Inheritance

Comparison With Prototypal

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 sq = Object.create(rect); 2 3 sq.height = 5; 4 sq.width = 5; 5 6 alert(sq.area());

● Encapsulation & Privileged Method

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 })();1011 alert(g.getVersion());

Comparison With Prototypal

● Polymorphism

Comparison With Prototypal

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());

1 var sg = Object.create(g); 2 3 sg.play = function() { 4 return ‘space play’; 5 }; 6 7 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 EichAnd 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

● DelegationIn 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]]

Dog

[[Object]]

Cat

[[Object]]

Animal

[[Object]]

Dog

[[Object]]

Cat

[[Object]]

Animal

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.

Pros and Cons

Functional Pattern(Factory Pattern)

● Douglas CrockfordThe 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.

● GoFFavor object composition over class inheritance

● Instantiation

Functional Pattern

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});

● Subclass Inheritance

Functional Pattern

1 function square(spec) { 2 var that = rectangle({height: spec.side, width: spec.side}); 3 return that; 4 } 5 6 var sq = square({side: 5}); 7 alert(sq.area());

● Encapsulation & Privileged Method

Functional Pattern

1 function square(spec) { 2 var that = rectangle({height: spec.side, width: spec.side}); 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());

● Polymorphism

Functional Pattern

1 function square(spec) { 2 var that = rectangle({height: spec.side, width: spec.side}); 3 that.area = function(){ return spec.width * spec.height * 5; } 4 return that; 5 } 6 7 var sq = square({side: 5}); 8 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● Classical vs Prototypal 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