JavaScript OOPs

1,615 views

Published on

JavaScript Object-Oriented Programming(OOP) Introduction

Published in: Technology
1 Comment
3 Likes
Statistics
Notes
No Downloads
Views
Total views
1,615
On SlideShare
0
From Embeds
0
Number of Embeds
12
Actions
Shares
0
Downloads
47
Comments
1
Likes
3
Embeds 0
No embeds

No notes for slide

JavaScript OOPs

  1. 1. JavaScript OOPs 2014/01/22 Johnson
  2. 2. 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
  3. 3. 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
  4. 4. Classical vs Prototypal Inheritance [[Object]] Animal [[CLASS]] Animal [[Object]] [[Object]] Cat Cat [[Object]] [[Object]] Dog Dog
  5. 5. Peudoclassical ● Contructor Pattern ○ Using the new keyword ○ Using this to store object own status ○ Using prototype to share methods
  6. 6. 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);
  7. 7. 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());
  8. 8. 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());
  9. 9. 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());
  10. 10. Comparison With Prototypal ● 1 2 3 4 5 6 7 8 Instantiation var rect = { height: 5, width: 10 } rect.area = function () { return this.width * this.height; }; 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);
  11. 11. Comparison With Prototypal ● 1 2 3 4 5 6 Subclass Inheritance 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());
  12. 12. Comparison With Prototypal ● 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 })(); 10 11 alert(g.getVersion());
  13. 13. Comparison With Prototypal ● 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());
  14. 14. 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
  15. 15. 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.
  16. 16. 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.
  17. 17. 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.
  18. 18. Delegation vs Concatenation Inheritance [[Object]] [[Object]] Animal Animal [[Object]] [[Object]] Cat Cat [[Object]] Dog [[Object]] Dog
  19. 19. 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.
  20. 20. 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
  21. 21. 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});
  22. 22. Functional Pattern ● 1 2 3 4 5 6 7 Subclass Inheritance function square(spec) { var that = rectangle({height: spec.side, width: spec.side}); return that; } var sq = square({side: 5}); alert(sq.area());
  23. 23. Functional Pattern ● Encapsulation & Privileged Method 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());
  24. 24. Functional Pattern ● 1 2 3 4 5 6 7 8 Polymorphism function square(spec) { var that = rectangle({height: spec.side, width: spec.side}); that.area = function(){ return spec.width * spec.height * 5; } return that; } var sq = square({side: 5}); alert(sq.area());
  25. 25. Benchmark Constructor v.s. Prototypal v.s. Functional
  26. 26. 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
  27. 27. 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

×