Principles of Object Oriented Programming in js for short, #pooping in js.

1. Object Oriented Programming
Sunil Pai, Y!

2. Objects

3. Objects and Javascript

4. Numbers
Strings
Booleans
Objects and Javascript Regexps
Functions
Arrays
Objects

5. 3.141
Numbers 1.4e20
0xff3322
Strings
Booleans
Objects and Javascript Regexps
Functions
Arrays
Objects

6. Numbers
“the lazy dog”
Strings “123”
“1” + 1
Booleans
Objects and Javascript Regexps
Functions
Arrays
Objects

7. Numbers
Strings
true
Booleans
false
Objects and Javascript Regexps
Functions
Arrays
Objects

8. Numbers
Strings
Booleans
Objects and Javascript Regexps /[A-Za-z0-9]/gm
Functions
Arrays
Objects

9. Numbers
Strings
Booleans
Objects and Javascript Regexps
function(p1, p2){
// do something
Functions // with p1, p2
return p1 + p2
}
Arrays
Objects

10. Numbers
Strings
Booleans
Objects and Javascript Regexps
Functions
Arrays [ 1, ‘abc’, 2.4 ]
Objects

11. Numbers
Strings
Booleans
Objects and Javascript Regexps
Functions
Arrays
{
x: 200,
Objects y: 164,
theta: 20
}

12. null
Objects and Javascript
undefined

13. Javascript has
superpowers

14. functions are objects
Javascript has
closures
superpowers
.prototype

15. functions are objects
Javascript has
closures
superpowers
.prototype

16. functions are objects
Javascript has
closures
superpowers
.prototype

17. functions are objects
Javascript has
closures
superpowers
.prototype

18. OOP:
First Principles
Constructors
Abstraction
Inheritance
Encapsulation
Polymorphism

19. OOP:
First Principles function Shirt(owner){
this.owner = owner
}
Shirt.prototype.iron=function(){
this.ironed = true
Constructors }
var myShirt = new Shirt(‘pi’)
Abstraction // myShirt.owner === ‘pi’
myShirt.iron()
Inheritance // myShirt.ironed === true
Encapsulation
Polymorphism

20. OOP:
First Principles
Constructors Shirt
(new)
.iron()
Abstraction .wash()
.ironed // true/false
.age // number
Inheritance
Encapsulation
Polymorphism

21. OOP:
First Principles
Constructors
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. var __hasProp = {}.hasOwnProperty
OOP:
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
}
Encapsulation
Polymorphism

23. OOP:
First Principles
Constructors
Abstraction var ctr = (function(){
var i = 0
return function(){
Inheritance return i++
}
})()
Encapsulation
ctr() // 0
ctr() // 1
Polymorphism ctr() // 2
// and so on

24. OOP:
First Principles
Constructors
Abstraction
Inheritance
// make do with runtime object
Encapsulation // manipulation, “arguments”
myShirt.iron = function(x, y){
Polymorphism x === arguments[0] // true
y === arguments[1] // true
var z = arguments[3]
// doop de doo
}

25. ( Demo )

26. sidenote: MVC

27. sidenote: modules

28. sidenote: frameworks

29. sidenote: other common patterns

30. Questions?

31. Party on, dudes.
@threepointone