05. Creando e implementando objetos y métodos
-
Upload
danae-aguilar-guzman -
Category
Software
-
view
54 -
download
0
Transcript of 05. Creando e implementando objetos y métodos
![Page 2: 05. Creando e implementando objetos y métodos](https://reader031.fdocuments.net/reader031/viewer/2022021814/58ee72621a28abca2d8b4645/html5/thumbnails/2.jpg)
Contenido del Módulo
Objetos nativos
Objetos personalizados
Herencia de un objeto
Manteniendo objetos fuera del espacio de nombres global
![Page 3: 05. Creando e implementando objetos y métodos](https://reader031.fdocuments.net/reader031/viewer/2022021814/58ee72621a28abca2d8b4645/html5/thumbnails/3.jpg)
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.
![Page 4: 05. Creando e implementando objetos y métodos](https://reader031.fdocuments.net/reader031/viewer/2022021814/58ee72621a28abca2d8b4645/html5/thumbnails/4.jpg)
Objetos nativos
Objetos String
length
var string1 = new String("Hola"); var string2 = "Como estas?";
var nombre = new String("Pepito"); document.write(nombre.length); //6
![Page 5: 05. Creando e implementando objetos y métodos](https://reader031.fdocuments.net/reader031/viewer/2022021814/58ee72621a28abca2d8b4645/html5/thumbnails/5.jpg)
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);
![Page 6: 05. Creando e implementando objetos y métodos](https://reader031.fdocuments.net/reader031/viewer/2022021814/58ee72621a28abca2d8b4645/html5/thumbnails/6.jpg)
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);
![Page 7: 05. Creando e implementando objetos y métodos](https://reader031.fdocuments.net/reader031/viewer/2022021814/58ee72621a28abca2d8b4645/html5/thumbnails/7.jpg)
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());
![Page 8: 05. Creando e implementando objetos y métodos](https://reader031.fdocuments.net/reader031/viewer/2022021814/58ee72621a28abca2d8b4645/html5/thumbnails/8.jpg)
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());
![Page 9: 05. Creando e implementando objetos y métodos](https://reader031.fdocuments.net/reader031/viewer/2022021814/58ee72621a28abca2d8b4645/html5/thumbnails/9.jpg)
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
![Page 10: 05. Creando e implementando objetos y métodos](https://reader031.fdocuments.net/reader031/viewer/2022021814/58ee72621a28abca2d8b4645/html5/thumbnails/10.jpg)
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
![Page 11: 05. Creando e implementando objetos y métodos](https://reader031.fdocuments.net/reader031/viewer/2022021814/58ee72621a28abca2d8b4645/html5/thumbnails/11.jpg)
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
![Page 12: 05. Creando e implementando objetos y métodos](https://reader031.fdocuments.net/reader031/viewer/2022021814/58ee72621a28abca2d8b4645/html5/thumbnails/12.jpg)
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
![Page 13: 05. Creando e implementando objetos y métodos](https://reader031.fdocuments.net/reader031/viewer/2022021814/58ee72621a28abca2d8b4645/html5/thumbnails/13.jpg)
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);
![Page 14: 05. Creando e implementando objetos y métodos](https://reader031.fdocuments.net/reader031/viewer/2022021814/58ee72621a28abca2d8b4645/html5/thumbnails/14.jpg)
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>");
![Page 15: 05. Creando e implementando objetos y métodos](https://reader031.fdocuments.net/reader031/viewer/2022021814/58ee72621a28abca2d8b4645/html5/thumbnails/15.jpg)
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();
![Page 16: 05. Creando e implementando objetos y métodos](https://reader031.fdocuments.net/reader031/viewer/2022021814/58ee72621a28abca2d8b4645/html5/thumbnails/16.jpg)
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; } };
![Page 17: 05. Creando e implementando objetos y métodos](https://reader031.fdocuments.net/reader031/viewer/2022021814/58ee72621a28abca2d8b4645/html5/thumbnails/17.jpg)
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.
![Page 18: 05. Creando e implementando objetos y métodos](https://reader031.fdocuments.net/reader031/viewer/2022021814/58ee72621a28abca2d8b4645/html5/thumbnails/18.jpg)
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
![Page 19: 05. Creando e implementando objetos y métodos](https://reader031.fdocuments.net/reader031/viewer/2022021814/58ee72621a28abca2d8b4645/html5/thumbnails/19.jpg)
Objetos personalizados
El Patrón Factory
El objeto prototipo hereda los métodos:
constructor
hasOwnProperty
isPrototypeOf
propertyIsEnumerable
toLocalString
toString
valueOf
![Page 20: 05. Creando e implementando objetos y métodos](https://reader031.fdocuments.net/reader031/viewer/2022021814/58ee72621a28abca2d8b4645/html5/thumbnails/20.jpg)
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; }
![Page 21: 05. Creando e implementando objetos y métodos](https://reader031.fdocuments.net/reader031/viewer/2022021814/58ee72621a28abca2d8b4645/html5/thumbnails/21.jpg)
Objetos personalizados
El Patrón Factory
2. Invocando el factory:
var automovil1 = getVehiculo(2011, 'Suzuki', 'Vitara'); var automovil2 = getVehiculo(2010, 'Nissan', 'XTerra');
![Page 22: 05. Creando e implementando objetos y métodos](https://reader031.fdocuments.net/reader031/viewer/2022021814/58ee72621a28abca2d8b4645/html5/thumbnails/22.jpg)
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
![Page 23: 05. Creando e implementando objetos y métodos](https://reader031.fdocuments.net/reader031/viewer/2022021814/58ee72621a28abca2d8b4645/html5/thumbnails/23.jpg)
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
![Page 24: 05. Creando e implementando objetos y métodos](https://reader031.fdocuments.net/reader031/viewer/2022021814/58ee72621a28abca2d8b4645/html5/thumbnails/24.jpg)
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
![Page 25: 05. Creando e implementando objetos y métodos](https://reader031.fdocuments.net/reader031/viewer/2022021814/58ee72621a28abca2d8b4645/html5/thumbnails/25.jpg)
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
![Page 26: 05. Creando e implementando objetos y métodos](https://reader031.fdocuments.net/reader031/viewer/2022021814/58ee72621a28abca2d8b4645/html5/thumbnails/26.jpg)
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
![Page 27: 05. Creando e implementando objetos y métodos](https://reader031.fdocuments.net/reader031/viewer/2022021814/58ee72621a28abca2d8b4645/html5/thumbnails/27.jpg)
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
![Page 28: 05. Creando e implementando objetos y métodos](https://reader031.fdocuments.net/reader031/viewer/2022021814/58ee72621a28abca2d8b4645/html5/thumbnails/28.jpg)
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; }; }
![Page 29: 05. Creando e implementando objetos y métodos](https://reader031.fdocuments.net/reader031/viewer/2022021814/58ee72621a28abca2d8b4645/html5/thumbnails/29.jpg)
Objetos personalizados
prototype/private compromise
Invocando a los getters:
Vehiculo.prototype.obtenerDatos = function () { return 'Vehículo: ' + this.getAnio() + ' ' + this.getMarca() + ' ' + this.getModelo(); }
![Page 30: 05. Creando e implementando objetos y métodos](https://reader031.fdocuments.net/reader031/viewer/2022021814/58ee72621a28abca2d8b4645/html5/thumbnails/30.jpg)
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;
})();
![Page 31: 05. Creando e implementando objetos y métodos](https://reader031.fdocuments.net/reader031/viewer/2022021814/58ee72621a28abca2d8b4645/html5/thumbnails/31.jpg)
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);
![Page 32: 05. Creando e implementando objetos y métodos](https://reader031.fdocuments.net/reader031/viewer/2022021814/58ee72621a28abca2d8b4645/html5/thumbnails/32.jpg)
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.
![Page 33: 05. Creando e implementando objetos y métodos](https://reader031.fdocuments.net/reader031/viewer/2022021814/58ee72621a28abca2d8b4645/html5/thumbnails/33.jpg)
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 };
![Page 34: 05. Creando e implementando objetos y métodos](https://reader031.fdocuments.net/reader031/viewer/2022021814/58ee72621a28abca2d8b4645/html5/thumbnails/34.jpg)
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 };
![Page 35: 05. Creando e implementando objetos y métodos](https://reader031.fdocuments.net/reader031/viewer/2022021814/58ee72621a28abca2d8b4645/html5/thumbnails/35.jpg)
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 || {};
![Page 36: 05. Creando e implementando objetos y métodos](https://reader031.fdocuments.net/reader031/viewer/2022021814/58ee72621a28abca2d8b4645/html5/thumbnails/36.jpg)
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 }; }());