05. Creando e implementando objetos y métodos

Creando e implementando Objetos y métodos

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

[email protected]

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) + " "); //102 document.write(parseInt(numero)); //101

var numero = 44.5; document.write(Math.round(numero) + " "); //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 + " "); }

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 + " "); //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(" ");

Objetos nativos

sort()

reverse()

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

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


El Patrón Object Literal

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


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.


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


El Patrón Factory

El objeto prototipo hereda los métodos:

constructor

hasOwnProperty

isPrototypeOf

propertyIsEnumerable

toLocalString

toString

valueOf


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; }


El Patrón Factory

2. Invocando el factory:

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


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


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


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


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


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


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


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; }; }


prototype/private compromise

Invocando a los getters:

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


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;

})();


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);


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.


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 };


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 };


El patrón namespace:

Podemos tener varios archivos JavaScript en la aplicación.

Para crear el namespace solo una vez (Singleton):

var miApp = miApp || {};


(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 }; }());

Software

05. Creando e implementando objetos y métodos