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

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

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

29. Objetos personalizados
prototype/private compromise
Invocando a los getters:
Vehiculo.prototype.obtenerDatos = function () {
return 'Vehículo: ' + this.getAnio() +
' ' + this.getMarca() +
' ' + this.getModelo();
}

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