Your SlideShare is downloading. ×

Object Oriented Javascript

198
views

Published on


0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
198
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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