Object Oriented Programming in js

688 views
634 views

Published on

Principles of Object Oriented Programming in js

for short, #pooping in js.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
688
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
6
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • 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

    ×