Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Object Oriented Programming in js

742 views

Published on

Principles of Object Oriented Programming in js

for short, #pooping in js.

Published in: Technology
  • Be the first to comment

Object Oriented Programming in js

  1. 1. Object Oriented ProgrammingSunil Pai, Y!
  2. 2. Objects
  3. 3. Objects and Javascript
  4. 4. Numbers Strings BooleansObjects and Javascript Regexps Functions Arrays Objects
  5. 5. 3.141 Numbers 1.4e20 0xff3322 Strings BooleansObjects and Javascript Regexps Functions Arrays Objects
  6. 6. Numbers “the lazy dog” Strings “123” “1” + 1 BooleansObjects and Javascript Regexps Functions Arrays Objects
  7. 7. Numbers Strings true Booleans falseObjects and Javascript Regexps Functions Arrays Objects
  8. 8. Numbers Strings BooleansObjects and Javascript Regexps /[A-Za-z0-9]/gm Functions Arrays Objects
  9. 9. Numbers Strings BooleansObjects and Javascript Regexps function(p1, p2){ // do something Functions // with p1, p2 return p1 + p2 } Arrays Objects
  10. 10. Numbers Strings BooleansObjects and Javascript Regexps Functions Arrays [ 1, ‘abc’, 2.4 ] Objects
  11. 11. Numbers Strings BooleansObjects and Javascript Regexps Functions Arrays { x: 200, Objects y: 164, theta: 20 }
  12. 12. nullObjects and Javascript undefined
  13. 13. Javascript hassuperpowers
  14. 14. functions are objectsJavascript has closuressuperpowers .prototype
  15. 15. functions are objectsJavascript has closuressuperpowers .prototype
  16. 16. functions are objectsJavascript has closuressuperpowers .prototype
  17. 17. functions are objectsJavascript has closuressuperpowers .prototype
  18. 18. OOP:First PrinciplesConstructorsAbstractionInheritanceEncapsulationPolymorphism
  19. 19. OOP:First Principles function Shirt(owner){ this.owner = owner } Shirt.prototype.iron=function(){ this.ironed = trueConstructors } var myShirt = new Shirt(‘pi’)Abstraction // myShirt.owner === ‘pi’ myShirt.iron()Inheritance // myShirt.ironed === trueEncapsulationPolymorphism
  20. 20. OOP:First PrinciplesConstructors Shirt (new) .iron()Abstraction .wash() .ironed // true/false .age // numberInheritanceEncapsulationPolymorphism
  21. 21. OOP:First PrinciplesConstructors var Kurta = extends(Shirt)Abstraction Kurta.prototype.wash = function(){ Shirt.prototype.wash.apply(this,Inheritance arguments); // and make sure the water’s cold!Encapsulation }Polymorphism
  22. 22. var __hasProp = {}.hasOwnPropertyOOP: var extends = function(child, parent) { for (var key in parent) {First Principles if (__hasProp.call(parent, key)) { child[key] = parent[key] } } function Ctor() { this.constructor = child } Ctor.prototype = parent.prototype child.prototype = new Ctor()Constructors child.superclass = parent.prototype return child }Abstraction var Kurta = extends(Shirt)Inheritance Kurta.prototype.wash = function(){ Shirt.prototype }EncapsulationPolymorphism
  23. 23. OOP:First PrinciplesConstructorsAbstraction var ctr = (function(){ var i = 0 return function(){Inheritance return i++ } })()Encapsulation ctr() // 0 ctr() // 1Polymorphism ctr() // 2 // and so on
  24. 24. OOP:First PrinciplesConstructorsAbstractionInheritance // make do with runtime objectEncapsulation // manipulation, “arguments” myShirt.iron = function(x, y){Polymorphism x === arguments[0] // true y === arguments[1] // true var z = arguments[3] // doop de doo }
  25. 25. ( Demo )
  26. 26. sidenote: MVC
  27. 27. sidenote: modules
  28. 28. sidenote: frameworks
  29. 29. sidenote: other common patterns
  30. 30. Questions?
  31. 31. Party on, dudes. @threepointone

×