05. Creando e implementando objetos y métodos

Creando e implementando Objetos y métodos

Danae Aguilar Guzmán MCT, MS, MCTS, MCP

danaeaguilar@gmail.com

Contenido del Módulo

Objetos nativos

Objetos personalizados

Herencia de un objeto

Manteniendo objetos fuera del espacio de nombres global

Objetos en JavaScript

JavaScript es un lenguaje de programación orientado a objetos basado en prototipos

En JavaScript todo es un objeto.

Puedes crear un nuevo objeto de la nada, o crear un objeto a partir de un clon de un objeto existente, conocido como un prototipo.

Puedes simular la creación de un objeto usando una función.

Objetos nativos

Objetos String

length

var string1 = new String("Hola"); var string2 = "Como estas?";

var nombre = new String("Pepito"); document.write(nombre.length); //6

Objetos nativos

charAt()

charCodeAt()

var cadena = prompt("Ingrese algun texto", "Hola!"); var ultimoCaracter = cadena.charAt(cadena.length - 1); document.write("EL ultimo caracter es " + ultimoCaracter);

var cadena = prompt("Ingrese algun texto", "Hola!"); var primerCharCode = cadena.charCodeAt(0); document.write("El primer char code es: " + primerCharCode);

Objetos nativos

fromCharCode()

indexOf() y lastIndexOf()

var cadena; cadena = String.fromCharCode(65, 66, 67); document.write(cadena); //ABC

var cadena = "Hola pepito, como estas Pepito?"; var posicion = cadena.indexOf("Pepito"); alert(posicion);

Objetos nativos

substr() y substring()

toLowerCase() y toUpperCase()

var cadena = "JavaScript"; var subCadena = cadena.substring(0, 4); alert(subCadena);

var cadena = "Una Cadena Con MINUSCULAS"; alert(cadena.toLowerCase());

Objetos nativos

substr() y substring()

toLowerCase() y toUpperCase()

var cadena = "JavaScript"; var subCadena = cadena.substring(0, 4); alert(subCadena);

var cadena = "Una Cadena Con MINUSCULAS"; alert(cadena.toLowerCase());

Objetos nativos

Objetos Math

abs()

var radio = prompt("Ingrese el radio del círculo", ""); var area = (Math.PI) * radio * radio; document.write("El area es " + area);

var numero = -101; document.write(Math.abs(numero)); // 101

Objetos nativos

ceil() y floor()

round()

var numero = 101.01; document.write(Math.ceil(numero) + "<br>"); //102 document.write(parseInt(numero)); //101

var numero = 44.5; document.write(Math.round(numero) + "<br>"); //45 numero = 44.49; document.write(Math.round(numero)); //44

Objetos nativos

random()

pow()

var cantidadLanzamientos; var valorDado; for (cantidadLanzamientos = 0; cantidadLanzamientos < 10; cantidadLanzamientos++) { valorDado = (Math.floor(Math.random() * 6) + 1); document.write(valorDado + "<br>"); }

var resultado = Math.pow(5, 3); document.write(resultado); //125

Objetos nativos

Objeto Number

toFixed()

var numero1 = new Number(123); var numero2 = new Number('123');

var costo = 9.99; var masImpuestos = 9.99 * 1.075; document.write("El total es $" + masImpuestos + "<br>"); //10.73925 masImpuestos = masImpuestos.toFixed(2); document.write("Total con 2 decimales " + masImpuestos); //10.74

Objetos nativos

Objetos Array

concat()

var nombres = new Array(); nombres[0] = "Pepito"; nombres[1] = "Anita"; nombres[11] = "Luchito"; document.write("El ultimo nombre es " + nombres[nombres.length - 1]);

var nombres = new Array("Pepito", "Anita", "Luchito"); var edades = new Array(21, 31, 19); var arreglo = names.concat(ages);

Objetos nativos

slice()

join()

var nombres = new Array("Pepito", "Sara", "Anita", "Luchito", "Boby"); var arreglo = nombres.slice(1, 3);

var compras = new Array("Crereal","Platano","Leche","Pan"); var listaCompras = compras.join("<br>");

Objetos nativos

sort()

reverse()

var nombres = new Array("Pepito", "Sara", "Anita", "Luchito", "Boby"); nombres.sort(); document.write("Los nombres en orden" + "<br>"); var indice; for (indice = 0; indice < nombres.length; indice++) { document.write(nombres[indice] + "<br>"); }

var compras = new Array("Crereal", "Platano", "Papas", "Leche", "Pan"); compras.reverse();

Objetos personalizados

El Patrón Object Literal

var automovil = { anio: 2010, marca: 'Nissan', modelo: 'XTerra', obtenerDatos: function () { return 'Vehiculo: ' + this.anio + ' ' + this.marca + ' ' + this.modelo; } };

Objetos personalizados

El Patrón Object Literal

La manera mas fácil de crear objetos en JavaScript

Las llaves indican el objeto y contienen propiedades y métodos

No tienen un prototipo asociado al objeto

Usado para representar datos, ej: para enviarlos a otro código.

No se crea un tipo, solo instancias.

Objetos personalizados

El Patrón Factory

JavaScript tiene un tipo Object, podemos usarlo para crear objetos programáticamente.

Object tiene un prototipo que es clonado cuando usamos la palabra clave new

Objetos personalizados

El Patrón Factory

El objeto prototipo hereda los métodos:

constructor

hasOwnProperty

isPrototypeOf

propertyIsEnumerable

toLocalString

toString

valueOf

Objetos personalizados

El Patrón Factory

1. Declarando el factory:

function getVehiculo(anio, marca, modelo) { var vehiculo = new Object(); vehiculo.anio = anio; vehiculo.marca = marca; vehiculo.modelo = modelo; vehiculo.obtenerDatos = function () { return 'Vehiculo: ' + this.anio + ' ' + this.marca + ' ' + this.modelo; }; return vehiculo; }

Objetos personalizados

El Patrón Factory

2. Invocando el factory:

var automovil1 = getVehiculo(2011, 'Suzuki', 'Vitara'); var automovil2 = getVehiculo(2010, 'Nissan', 'XTerra');

Objetos personalizados

El Patrón Factory

Aprovecha la naturaleza dinámica de JavaScript para agregar propiedades y métodos.

Podemos crear varias instancias

Las instancias son de tipo Object

Las propiedades son públicas

Objetos personalizados

Creando una clase

En JavaScript no existe la palabra reservada class

Se puede simular una clase con una función que será la función constructor.

Usamos var para definir las propiedades privadas

Usamos new para crear una instancia.

Cada instancia tiene su propia copia de los datos y métodos

Objetos personalizados

Creando una clase

1. Definiendo la clase:

function Vehiculo(elAnio, laMarca, elModelo) { var anio = elAnio; var marca = laMarca; var modelo = elModelo; this.obtenerDatos = function () { return 'Vehículo: ' + anio + ' ' + marca + ' ' + modelo; }; }

Pri

vad

os

Objetos personalizados

Creando una clase

1. Definiendo la clase:

function Vehiculo(elAnio, laMarca, elModelo) { var anio = elAnio; var marca = laMarca; var modelo = elModelo; this.obtenerDatos = function () { return 'Vehiculo: ' + anio + ' ' + marca + ' ' + modelo; }; }

Pri

vad

os

Objetos personalizados

La propiedad prototype

En JavaScript todo es de tipo Object.

Object tiene una propiedad prototype.

El prototype contiene propiedades y métodos disponibles para todas las instancias del tipo.

El prototype no tiene acceso a propiedades privadas.

Debemos exponer las propiedades para accederlas desde el prototype

Objetos personalizados

La propiedad prototype

Definimos el método para compartir con todas las instancias:

function Vehiculo(elAnio, laMarca, elModelo) { this.anio = elAnio; this.marca = laMarca; this.modelo = elModelo; }

Vehiculo.prototype.obtenerDatos = function() { return 'Vehículo: ' + this.year + ' ' + this.make + ' ' + this.model; };

Pú

blic

os

Objetos personalizados

prototype/private compromise

Exponer los datos en solo lectura (Los getters):

function Vehiculo(elAnio, laMarca, elModelo) { var anio = elAnio; var marca = laMarca; var modelo = elModelo; this.getAnio = function () { return anio; }; this.getMarca = function () { return marca; }; this.getModelo = function () { return modelo; }; }

Objetos personalizados

prototype/private compromise

Invocando a los getters:

Vehiculo.prototype.obtenerDatos = function () { return 'Vehículo: ' + this.getAnio() + ' ' + this.getMarca() + ' ' + this.getModelo(); }

Herencia de un objeto

Tenemos la clase base:

var Vehiculo = (function () { function Vehiculo(anio, marca, modelo) { this.anio = anio; this.marca = marca; this.modelo = modelo; } Vehiculo.prototype.obtenerDatos = function () { return this.anio + ' ' + this.marca + ' ' + this.modelo; }; Vehiculo.prototype.iniciarMotor = function () { return 'Broom'; }; return Vehiculo;

})();

Herencia de un objeto

Definiendo la clase hija:

var Auto = (function (padre) { Auto.prototype = new Vehiculo(); Auto.prototype.constructor = Auto; function Auto(anio, marca, modelo) { padre.call(this, anio, marca, modelo); this.CantidadRuedas = 4; } Auto.prototype.obtenerDatos = function () { return 'Tipo de vehiculo: Auto ' + parent.prototype.getInfo.call(this); }; return Auto; })(Vehiculo);

Manteniendo objetos fuera del espacio de nombres global

Un problema común es la polución del espacio de nombres global.

En JavaScript no tenemos la palabra reservada namespace.

Se puede implementar un equivalente a un namespace.

Manteniendo objetos fuera del espacio de nombres global

Ejemplo. Si tenemos:

Tenemos 5 entradas en el espacio de nombres global

var cantidadVehiculos = 3; var vehiculos = new Array(); function Carro() { } function Camion() { } var reparacion = { descripcion: 'cambiado de bujias', costo: 100 };

Manteniendo objetos fuera del espacio de nombres global

El patrón namespace:

Tenemos solo 1 entrada en el espacio de nombres global, la propiedad miApp

var miApp = {}; miApp.cantidadVehiculos = 5; miApp.vehiculos = new Array(); miApp.Carro = function () { } miApp.Camion = function () { } miApp.reparacion = { descripcion: 'cambiado de bujias', costo: 100 };

Manteniendo objetos fuera del espacio de nombres global

El patrón namespace:

Podemos tener varios archivos JavaScript en la aplicación.

Para crear el namespace solo una vez (Singleton):

var miApp = miApp || {};

Manteniendo objetos fuera del espacio de nombres global

(IIFE) immediately invoked function, al crear un namespace:

(function () { this.miApp = this.miApp || {}; var ns = this.miApp; var cantidadVehiculos = 5; var vehicles = new Array(); ns.Carro = function () { } ns.Camion = function () { } var repair = { description: 'cambiado de bujias', cost: 100 }; }());