JavascriptOrientado aObjetos
Estudiante de Analista en Tecnologías de la Información.Trabajé TCS Uy, TCS Arg, GuruYu, moove-it y ahora en InfUy.Desarro...
Por qué orientado a objetos
Cómo llegamos hasta acá● El browser como plataforma por  encima del SO● Javascript es el único lenguaje   Aplicaciones  de...
Que desafíos enfrentamos    Nuevas                             Más códigofuncionalidadesMás puntos de                     ...
Qué es la programación orientada aobjetos● Una forma de entender y resolver el  problema● Encapsula responsabilidades● Ord...
Prototipos en vez de clases● Reuso de comportamiento se hace mediante  la decoración o (clonación) de objetos  existentes ...
Objeto (Clase)                                                        Clasesfunction Person() { }                         ...
Constructorfunction Person() {  console.log(Person instantiated);}var person1 = new Person();var person2 = new Person();  ...
Atributosfunction Person(gender) {  this.gender = gender;  console.log(Person instantiated);}male = new Person(Male);femal...
Métodosfunction Person(gender) {  this.gender = gender;  console.log(Person instantiated);}Person.prototype.sayGender = fu...
Métodos II    ...    person1 = new Person(Male);    var genderTeller = person1.sayGender;    person1.sayGender(); // print...
Herenciafunction Person() {} // define the Person ClassPerson.prototype.walk = function(){   console.log(I am walking!);};...
Herencia II      var student1 = new Student();      student1.sayHello();      student1.walk();      student1.sayGoodBye();...
Recapitulando
Closures                               makeFunc devuelvefunction makeFunc() {          displayName antes que esta  var nam...
Qué es una closureUn tipo de objeto que combina: una función y elentorno (scope) en la cual esta función escreada.function...
Closures en el mundo realUna closure es un tipo de objeto que nos permiteasociar datos (el environment) con una funciónque...
Closures en el mundo real (cont.)function makeSizer(size) {  return function() {     document.body.style.fontSize = size +...
Closures en el mundo real (cont.)var Counter = (function() {  var privateCounter = 0;                Creamos una función a...
Closures cuando● Usaríamos un objeto con un sólo método:  Eventos, callbacks, etc.● Nos interesa privatizar ciertos método...
Prototype cuando● Queremos modelar objetos, herencias y  polimorfismos.● El comportamiento de un objeto puede ser  modific...
Para finalizar"Las prácticas ya no tienen que ver con lonecesario, lo razonable o lo pertinente si nocon aquello que es po...
Referenciashttps://developer.mozilla.org/en-US/docs/JavaScript/Introduction_to_Object-Oriented_JavaScripthttps://developer...
Upcoming SlideShare
Loading in …5
×

Javascript OOP

1,063 views

Published on

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.

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,063
On SlideShare
0
From Embeds
0
Number of Embeds
124
Actions
Shares
0
Downloads
65
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Javascript OOP

  1. 1. JavascriptOrientado aObjetos
  2. 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. 3. Por qué orientado a objetos
  4. 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. 5. Que desafíos enfrentamos Nuevas Más códigofuncionalidadesMás puntos de Menor visibilidad fallosMenor calidad
  6. 6. Qué es la programación orientada aobjetos● Una forma de entender y resolver el problema● Encapsula responsabilidades● Ordena los conceptos
  7. 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. 8. Objeto (Clase) Clasesfunction Person() { } Objetosvar 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. 9. Constructorfunction 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. 10. Atributosfunction 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 PersonCada ejemplo o instancia contendrá la propiedad gender
  11. 11. Métodosfunction 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 unatributo de la clase Sigue
  12. 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 trueNo existen métodospor objetos. Todas las referenciasapuntan a la misma función. Javascript "bindea" el contexto del objeto a la función genderTeller.call(person1); //prints Male
  13. 13. Herenciafunction Person() {} // define the Person ClassPerson.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 PersonStudent.prototype.constructor = Student; // correct the constructorpointer 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);
  14. 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 delEncapsulamiento: padre (el método walk por ejemplo) y sin embargo puede usarlo. Tampoco es necesario definirlo a menos que queramos cambiarlo.
  15. 15. Recapitulando
  16. 16. Closures makeFunc devuelvefunction 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 ejecutarvar 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. 17. Qué es una closureUn tipo de objeto que combina: una función y elentorno (scope) en la cual esta función escreada.function makeAdder(x) { return function(y) { return x + y; };} add5 y add10 sonvar add5 = makeAdder(5); dos closures quevar add10 = makeAdder(10); comparten el bodyconsole.log(add5(2)); // 7 de la función peroconsole.log(add10(2)); // 12 contienen diferentes scopes.
  18. 18. Closures en el mundo realUna closure es un tipo de objeto que nos permiteasociar datos (el environment) con una funciónque trabaje sobre esos datos.Un objeto permite asociar datos (propiedades)con uno o más métodos (funciones) que trabajesobre esos datos.Podemos usar closures donde normalmenteusaríamos un objeto con un sólo método. Porejemplo: eventos.
  19. 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. 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. 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. 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. 23. Para finalizar"Las prácticas ya no tienen que ver con lonecesario, lo razonable o lo pertinente si nocon aquello que es posible hacer -que seconvierte, fatalmente, en aquello que debemoshacer." Sandino Núñez, Prohibido Pensar"Existe el medio y la tecnología mucho antesque aparezca la necesidad o la razón." Sandino Núñez, Prohibido Pensar
  24. 24. 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

×