Este documento describe la creación y uso de objetos en JavaScript. Explica objetos nativos como String, Math y Array, y sus métodos. También cubre la creación de objetos personalizados mediante literales de objetos, factories y clases simuladas, así como herencia y el uso de namespaces para evitar la contaminación del espacio de nombres global.
1. Creando e implementando Objetos y
métodos
Danae Aguilar Guzmán
MCT, MS, MCTS, MCP
danaeaguilar@gmail.com
2. Contenido del Módulo
Objetos nativos
Objetos personalizados
Herencia de un objeto
Manteniendo objetos fuera del espacio de
nombres global
3. 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.
4. Objetos nativos
Objetos String
length
var string1 = new String("Hola");
var string2 = "Como estas?";
var nombre = new String("Pepito");
document.write(nombre.length); //6
5. 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);
6. 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);
7. 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());
8. 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());
9. 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
10. 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
11. 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
12. 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
13. 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);
14. 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>");
15. 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();
17. 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.
18. 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
19. Objetos personalizados
El Patrón Factory
El objeto prototipo hereda los métodos:
constructor
hasOwnProperty
isPrototypeOf
propertyIsEnumerable
toLocalString
toString
valueOf
20. 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;
}
21. Objetos personalizados
El Patrón Factory
2. Invocando el factory:
var automovil1 = getVehiculo(2011,
'Suzuki',
'Vitara');
var automovil2 = getVehiculo(2010,
'Nissan',
'XTerra');
22. 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
23. 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
24. 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;
};
}
Privados
25. 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;
};
}
Privados
26. 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
27. 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úblicos
28. 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; };
}
30. 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;
})();
31. 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);
32. 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.
33. 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
};
34. 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
};
35. 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 || {};
36. 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
};
}());