View
824
Download
1
Category
Preview:
DESCRIPTION
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.
Citation preview
Javascript Orientado a Objetos
@iamchertacherta.info
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
Cómo llegamos hasta acá
● El browser como plataforma por encima del SO
● Javascript es el único lenguaje del browser
● La capacidad de los clientes es mayor
● Nuestras necesidades no son las mismas que hace 10 años.
Aplicaciones más
complejas
Que desafíos enfrentamos
Nuevas funcionalidades Más código
Menor visibilidadMás puntos de fallos
Menor calidad
Qué es la programación orientada a objetos
● Una forma de entender y resolver el problema
● Encapsula responsabilidades
● Ordena los conceptos
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
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.
Clases
Objeto (Clase)
function Person() { }
Objetos
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.
Constructor
function Person() { console.log('Person instantiated');}
var person1 = new Person();var person2 = new Person();
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
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();
Sigue
Para definir un método asignamos una función a un atributo de la clase
No existen métodos por objetos. Todas
las referencias apuntan a la misma
función.
Métodos II
...
person1 = new Person('Male');
var genderTeller = person1.sayGender;person1.sayGender(); // prints 'Male'genderTeller(); // prints undefinedalert(genderTeller === person1.sayGender); // prints truealert(genderTeller === Person.prototype.sayGender); // prints true
Javascript "bindea" el
contexto del objeto a la función
genderTeller.call(person1); //prints 'Male'
Herenciafunction 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 methodStudent.prototype.sayHello = function(){ console.log('hi, I am a student');} Student.prototype.sayGoodBye = function(){ // add sayGoodBye method console.log('goodBye');}
Herencia IIvar student1 = new Student();student1.sayHello();student1.walk();student1.sayGoodBye();
// check inheritanceconsole.log(student1 instanceof Person); // trueconsole.log(student1 instanceof Student); // true
Sobreescribir el prototype de la clase hija no corrige el constructor (Hay que hacerlo manualmente)Nota:
Encapsulamiento: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.
Closures
function makeFunc() { var name = "Mozilla"; function displayName() { alert(name); } return displayName;} var myFunc = makeFunc();myFunc();
//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//Sobró ppt para abajo//Sobró ppt para abajo
makeFunc devuelve displayName antes que esta se ejecute.
La realidad es que myFunc es una closure.
Podemos pensar que la variable name no se necesita más después de ejecutar makeFunc() //NOT!
add5 y add10 son dos closures que
comparten el body de la función pero
contienen diferentes scopes.
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; };} var add5 = makeAdder(5);var add10 = makeAdder(10); console.log(add5(2)); // 7console.log(add10(2)); // 12
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.
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;
Closures en el mundo real (cont.)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();alert(Counter.value()); /* Alerts 2 */Counter.decrement();alert(Counter.value()); /* Alerts 1 */
Creamos una función anónima y la llamamos inmediatamente
El scope es compartido por las tres closures.
Todo lo que no se retorna no se puede acceder desde fuera.
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
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
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
Referenciashttps://developer.mozilla.org/en-US/docs/JavaScript/Introduction_to_Object-Oriented_JavaScripthttps://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Object/createhttps://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Objecthttps://developer.mozilla.org/en-US/docs/JavaScript/Reference/Operators/instanceofhttps://developer.mozilla.org/en-US/docs/JavaScript/Reference/Operators/typeofhttps://developer.mozilla.org/en-US/docs/JavaScript/Guide/Closures
Recommended