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

Por qué orientado a objetos

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.

Recapitulando

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