1. Object Oriented
Javascript
and why it matters

2. about.me
I do web apps in ruby, javascript and java.
Worked at TCS, GuruYu, moove-it and currently at InfUy
@iamcherta
http://cherta.info

3. por qué orientado a objetos

4. si 10 años después
• El browser como plataforma
por encima del SO
• Javascript es el único
lenguaje browser
• La capacidad de los clientes
es mayor
• Nuestras necesidades no
son las mismas que hace
10 años.
Aplicaciones
más complejas

5. el camino
nuevas
funcionalidades
+ LOC - visibilidad
+ puntos de fallos
- calidad

6. qué es la programación orientada a
objetos
• Una forma de entender y resolver el
problema
• Encapsula responsabilidades
• Ordena los conceptos

7. prototipos
• Reuso de comportamiento se hace
mediante la decoración o (clonación) de
objetos existentes que sirven de
prototipos.
• Programación basada en ejemplos

8. prototipos
Object A Prototype
var a = new A();
A.prototype.sayHello = function(){
console.log(“Hello”);
}

9. empiezan las clases
function Person() { }
var person1 = new Person();
var person2 = new Person();
Para crear un nuevo ejemplo de un objeto utilizamos
la declaración new, asignando el resultado (que es
de tipo Person) a una variable para tener acceso más
tarde.

10. empiezan las clases
function Person() {
console.log(‘Init!’);
}
var a = new Person();
Cada acción declarada en la clase es ejecutada en el
momento de la creación de la instancia.

11. atributos
function Person(gender) {
this.gender = gender;
}
male = new Person(‘male’);
female = new Person(‘female’);
•Los atributos y métodos se agregan al objecto prototype
de la clase.
•this hace referencia al objeto prototype que contiene
person.
•Cada ejemplo -instancia- contendrá la propiedad gender

12. métodos
function Person(gender){
this.gender = gender;
console.log(Person instantiated);
}
Person.prototype.sayGender = function({
console.log(this.gender);
};
male = new Person(Male);
male.sayGender();
Para definir un método asignamos una función a un
atributo de la clase

13. métodos
...
person1 = new Person(‘Male’);
var genderTeller = person1.sayGender;
person1.sayGender(); //Male
genderTeller(); //undefined
alert(genderTeller === person1.sayGender); //true
alert(genderTeller === Person.prototype.sayGender); //true
No existen métodos por objetos. Todas las referencias apuntan a la misma función.
Javascript "bindea" el contexto del objeto a la función.
genderTeller.call(person1); //Male

14. herencia
function Person() {} // define the Person Class
Person.prototype.walk = function(){
console.log(I am walking!);
}
Person.prototype.sayHello = function(){
console.log(hello);
}
function Student() {
Person.call(this); // Call the parent constructor
}
Student.prototype = new Person(); // inherit Person
Student.prototype.constructor = Student; // correct the constructor pointer because it points to Person
// replace the sayHello method
Student.prototype.sayHello = function(){
console.log(hi, I am a student);
}
// add sayGoodBye method
Student.prototype.sayGoodBye = function(){
console.log(goodBye);
}

15. herencia
var student1 = new Student();
student1.sayHello(); student1.walk();
student1.sayGoodBye(); // check inheritance
console.log(student1 instanceof Person); // true
console.log(student1 instanceof Student); // true
Sobreescribir el prototype de la clase hija no corrige el constructor
Nota: (Hay que hacerlo manualmente) La clase hija Student no necesita
conocer la implementación del padre (el método walk por ejemplo) y sin
embargo puede usarlo. Tampoco es necesario definirlo a menos que
queramos cambiarlo.

16. recapitulando

17. closures
function makeFunc() { var name = "Mozilla"; function displayName() {
alert(name); } return displayName;} var myFunc = makeFunc();myFunc();
makeFunc devuelve displayName antes que esta se ejecute.Podemos pensar que la
variable name no se necesita más después de ejecutar makeFunc() //NOT!La realidad es
que myFunc es una closure.

18. qué es una closure
function makeAdder(x) { return
function(y) { return x + y; };}
var add5 = makeAdder(5);var add10 =
makeAdder(10);
console.log(add5(2)); //
7console.log(add10(2)); // 12
add5 y add10 son dos closures que comparten el body de la función pero contienen
diferentes scopes.
• Un tipo de objeto que
combina: una función
y el entorno (scope)
en la cual esta
función es creada.

19. closures vs. real world
Un objeto permite asociar datos (propiedades) con uno o más métodos (funciones) que
trabaje sobre esos datos.
Una closure es un tipo de objeto que nos permite asociar datos (el environment) con una
función que trabaje sobre esos datos.
Vs.
Podemos usar closures donde normalmente usaríamos un objeto con un sólo método. Por
ejemplo: eventos.

20. closures vs. real world
var a = “a”;
$(document).on(“click”, “.btn”, function(event){
console.log(event.target + “ a vale: ” + a);
});

21. closures vs. real world
function makeSizer(size) { return function()
{ document.body.style.fontSize = size + 'px'; };}var
size12 = makeSizer(12);var size14 = makeSizer(14);var
size16 = makeSizer(16);document.getElementById('size-
12').onclick = size12;document.getElementById('size-
14').onclick = size14;document.getElementById('size-
16').onclick = size16;

22. Creamos una función anónima y la
llamamos inmediatamente
closures vs. real world
var Counter = (function() { var
privateCounter = 0; function changeBy(val)
{ privateCounter += val; } return {
increment: function() { changeBy(1);
}, decrement: function() {
changeBy(-1); }, value: function() {
return privateCounter; } } })();
alert(Counter.value()); /* Alerts 0
*/Counter.increment();Counter.increment();a
lert(Counter.value()); /* Alerts 2
*/Counter.decrement();alert(Counter.value()
); /* Alerts 1 */
El scope es compartido por las tres
closures.
Todo lo que no se retorna no se puede
acceder desde fuera.

23. closures cuando
Usaríamos un objeto con un sólo método: Eventos, callbacks, etc.
Nos interesa privatizar ciertos métodos y sólo exponer ciertas
interfaces.
Son más caras en términos de memoria / procesamiento

24. prototipos cuando
Queremos modelar objetos, herencias y polimorfismos.
El comportamiento de un objeto puede ser modificado por un
conjunto de métodos.
Podemos mutar el comportamiento del objeto en cualquier
momento

25. "Las prácticas ya no tienen que
ver con lo necesario, lo razonable
o lo pertinente si no con aquello
que es posible hacer -que se
convierte, fatalmente, en aquello
que debemos hacer." Sandino Núñez
"Existe el medio y la tecnología mucho antes que aparezca la
necesidad o la razón." Sandino Núñez