Charla de Javascript Orientado a Objetos que dí en la meetupjs que se llevó a cabo en la Universidad Católica el 6/12/12.

1. Javascript
Orientado a
Objetos

2. Estudiante de Analista en Tecnologías de la Información.
Trabajé TCS Uy, TCS Arg, GuruYu, moove-it y ahora en InfUy.
Desarrollo web apps en ruby, rails, javascript, java, felx (sí todavía existe) y sap
@iamcherta
cherta.info

3. Por qué orientado a objetos

4. Cómo llegamos hasta acá
● El browser como plataforma por
encima del SO
● Javascript es el único lenguaje Aplicaciones
del browser
más
● La capacidad de los clientes es
mayor complejas
● Nuestras necesidades no son
las mismas que hace 10 años.

5. Que desafíos enfrentamos
Nuevas
Más código
funcionalidades
Más puntos de
Menor visibilidad
fallos
Menor 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 en vez de clases
● 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. Objeto (Clase)
Clases
function Person() { }
Objetos
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.

9. Constructor
function Person() {
console.log('Person instantiated');
}
var person1 = new Person();
var person2 = new Person();
Cada acción declarada en la clase es
ejecutada en el momento de la
creación de la instancia.

10. Atributos
function Person(gender) {
this.gender = gender;
console.log('Person instantiated');
}
male = new Person('Male');
female = new Person('Female');
Los atributos y métodos se agregan al objeto prototype de la ¨clase¨
this hace referencia al objeto prototype que contiende Person
Cada ejemplo o instancia contendrá la propiedad gender

11. 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
Sigue

12. Métodos II
...
person1 = new Person('Male');
var genderTeller = person1.sayGender;
person1.sayGender(); // prints 'Male'
genderTeller(); // prints undefined
alert(genderTeller === person1.sayGender); // prints true
alert(genderTeller === Person.prototype.sayGender); // prints 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); //prints
'Male'

13. 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');
}
Student.prototype.sayGoodBye = function(){ // add sayGoodBye method
console.log('goodBye');

14. Herencia II
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
Encapsulamiento: padre (el método walk por ejemplo) y sin embargo puede usarlo.
Tampoco es necesario definirlo a menos que queramos cambiarlo.

15. Recapitulando

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

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

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

19. Closures en el mundo real (cont.)
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;

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

21. 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.
Característica:
● Son más caras en términos de memoria /
procesamiento

22. Prototype cuando
● Queremos modelar objetos, herencias y
polimorfismos.
● El comportamiento de un objeto puede ser
modificado por un conjunto de métodos.
Característica:
● Podemos mutar el comportamiento del objeto
en cualquier momento

23. Para finalizar
"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, Prohibido Pensar
"Existe el medio y la tecnología mucho antes
que aparezca la necesidad o la razón."
Sandino Núñez, Prohibido Pensar

24. Referencias
https://developer.mozilla.org/en-US/docs/JavaScript/Introduction_to_Object-
Oriented_JavaScript
https://developer.mozilla.org/en-
US/docs/JavaScript/Reference/Global_Objects/Object/create
https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Object
https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Operators/instanceof
https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Operators/typeof
https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Closures