Introduccin a JavaScript orientado a

objetos
JavaScript dispone de fuertes capacidades de programacin orientada a objetos, a pesar de que han tenido
lugar algunos debates respecto a sus diferencias de su capacidades en comparacin con otros lenguajes.
Este artculo comienza con una Introduccin a la programacin orientada a objetos, luego examina el modelo
de objetos de JavaScript y, nalmente, muestra los conceptos de programacin orientada a objetos en
JavaScript.

Revisin de JavaScript
Si no te sientes seguro acerca de los conceptos de JavaScript tales como variables, tipos, funciones y el mbito
de aplicacin, puedes leer sobre estos temas en Una nueva introduccin a JavaScript . Tambin puedes
consultar la Gua de JavaScript 1.5.

Programacin orientada a objetos

La programacin orientada a objetos es un paradigma de programacin que utiliza la abstraccin para crear
modelos basados en el mundo real. Utiliza diversas tcnicas de paradigmas previamente establecidas,
incluyendo la modularidad, polimorsmo y encapsulamiento. Hoy en da, muchos lenguajes de
programacin (como Java, JavaScript, C#, C++, Python, PHP, Ruby y Objective-C) soportan programacin
orientada a objetos (POO).
La programacin orientada a objetos puede considerarse como el diseo de software a travs de una
conjunto de objetos que cooperan, a diferencia de un punto de vista tradicional en el que un programa puede
considerarse como un conjunto de funciones, o simplemente como una lista de instrucciones para la
computadora. En la programacin orientada a objetos, cada objeto es capaz de recibir mensajes, procesar
datos y enviar mensajes a otros objetos. Cada objeto puede verse como una pequea mquina independiente
con un papel o responsabilidad denida.
OOP pretende promover una mayor exibilidad y facilidad de mantenimiento en la programacin y es muy
popular en la ingeniera de software a gran escala. Gracias a su fuerte nfasis en la modularidad, el cdigo
orientado al objetos est concebido para ser ms fcil de desarrollar y ms fcil de entender posteriormente,

prestndose a un anlisis ms directo, a una mayor codicacin y comprensin de situaciones y

procedimientos complejos que otros mtodos de programacin menos modulares. 2

Terminologa
Clase
Dene las caractersticas del Objeto.
Objeto
Una instancia de una Clase.
Propiedad
Una caracterstica del Objeto, como el color.
Mtodo
Una capacidad del Objeto, como caminar.
Constructor
Es un mtodo llamado en el momento de la creacin de instancias.
Herencia
Una Clase puede heredar caractersticas de otra Clase.
Encapsulamiento
Una Clase slo dene las caractersticas del Objeto, un Mtodo slo dene cmo se ejecuta el Mtodo.
Abstraccin
La conjuncin de herencia compleja, mtodos, propiedades que un objeto debe ser capaz de simular en un
modelo de la realidad.
Polimorsmo
Diferentes Clases podran denir el mismo mtodo o propiedad.
Para una descripcin ms extensa de programacin orientada a objetos, consulta ! Programacin orientada a
objetos en Wikipedia.

Programacin basada en prototipos

La programacin basada en prototipos es un estilo de programacin orientada a objetos en la que las clases
no estn presentes y la reutilizacin de comportamiento (conocido como herencia en lenguajes basados en
clases) se lleva a cabo a travs de un proceso de decoracin de objetos existentes que sirven de prototipos.

Este modelo tambin se conoce como programacin sin clases, orientada a prototipos o basada en ejemplos.
El ejemplo original (y ms cannico) de un lenguaje basado en prototipos es el lenguaje de programacin
autodesarrollado por David Ungar y Randall Smith. Sin embargo, el estilo de programacin sin clases se ha
hecho cada vez ms popular y ha sido adoptado para lenguajes de programacin como JavaScript, Cecil,
NewtonScript, Io, MOO, REBOL, Kevo, Squeak (cuando se utiliza el Viewer framework para manipular los
componentes Morphic) y varios otros. 2

Programacin orientada a objetos de JavaScript

Namespace
Un espacio de nombres es un contenedor que permite asociar toda la funcionalidad de un determinado
objeto con un nombre nico. En JavaScript un espacio de nombres es un objeto que permite a mtodos,
propiedades y objetos asociarse. La idea de crear espacios de nombres en JavaScript es simple: Crear un nico
objeto global para las variables, mtodos, funciones convirtiendolos en propiedades de ese objeto. El uso de
los namespace permite minimizar el conicto de nombres con otros objetos haciendolos nicos dentro de
nuestra aplicacin.
Un espacio de nombres es un objeto:
Vamos a crear un objeto global llamado MIAPLICACION

// namespace global

2
3

var MIAPLICACION = MIAPLICACION || {};

Nota: Para continuar con las mejores prcticas vamos a utilizar maysculas para los namespace.

En el cdigo de ejemplo anterior comprobamos si MIAPLICACION ya se encuentra denida. Si es as utilizamos

el objeto global MIAPLICACION que existe, si este no existe creamos un objeto vaco llamado MIAPLICACION
que encapsular mtodos, funciones, variables y otros objetos que vayamos a crear.
Tambin podemos crear Sub-espacios de nombres:

// Sub-namespace

2
3

MIAPLICACION.event = {} ;

A continuacin se muestra el cdigo para la creacin de un espacio de nombre y como agregar variables,
funciones y mtodos:

1
2
3
4
5
6
7
8

// Creacin del contenedor llamado MIAPLICACION.metodoComun de mtodo y propiedades comun

MIAPLICACION.metodoComun = {
regExParaNombre: "", // define regex para la validacin del nombre
regExParaTelefono: "", // define regex para validacin del telfono
validaNombre: function(nombre){
// Hace algo con el nombre que usted ingresa a la variable reExParaNombre
// usando "this.regExParaNombre"
},

9
10
11
12
13

validaNroTelefono: function (numTelefono){

// Hace algo con el nmero de telfono
}
}

14
15
16
17
18
19
20
21
22
23
24
25

// Objeto junto a la declaracin del mtodo

MIAPLICACION.event = {
addListener: function(el, type, fn){
// cdigo de relleno
},
removeListener: function(el, type, fn){
// cdigo de relleno
},
getEvent: function(e) {
// cdigo de relleno
}

26
27
28

// Puedes agregar otras propiedades y mtodos

}

29
30
31

// Sintaxis de utilizacin del mtodo addListener:

MIAPLICACION.event.addListener("turel", "tipo", callback);

Objetos bsicos
JavaScript tiene varios objetos incluidos en su ncleo, como Math, Object, Array y String. El siguiente ejemplo
muestra cmo utilizar el objeto Math para obtener un nmero al azar mediante el uso de su mtodo
random().

alert (Math.random ());

Nota: este y todos los dems ejemplos suponen que una funcin llamada alert (como el que se incluye en
los navegadores web) se dene de forma global. La funcin alert no es realmente parte de JavaScript.

Consulta Core JavaScript 1.5 Reference:Global Objects para obtener una lista de los objetos bsicos en
JavaScript.
Cada objeto en JavaScript es una instancia del objeto Object, por lo tanto, hereda todas sus propiedades y
mtodos.

Objetos personalizados
La clase
JavaScript es un lenguaje basado en prototipos que no contiene ninguna declaracin de clase, como se
encuentra, por ejemplo, en C + + o Java. Esto es a veces confuso para los programadores acostumbrados a los
lenguajes con una declaracin de clase. En su lugar, JavaScript utiliza funciones como clases. Denir una clase
es tan fcil como denir una funcin. En el ejemplo siguiente se dene una nueva clase llamada Persona.

function Persona() { }

El objeto (ejemplo de clase)

Para crear un nuevo ejemplo de un objeto obj utilizamos la declaracin new obj , asignando el resultado (que
es de tipo obj ) a una variable para tener acceso ms tarde.
En el siguiente ejemplo se dene una clase llamada Persona y creamos dos instancias ( persona1 y persona2 ).

1
2

function Persona() {
}

3
4
5

var persona1 = new Persona();

var persona2 = new Persona();

Por favor, consulta tambin Object.create para ver un mtodo nuevo y alternativo de creacin de ejemplos.

El constructor
El constructor es llamado en el momento de la creacin de la instancia (el momento en que se crea la
instancia del objeto). El constructor es un mtodo de la clase. En JavaScript, la funcin sirve como el

constructor del objeto, por lo tanto, no hay necesidad de denir explcitamente un mtodo constructor. Cada
accin declarada en la clase es ejecutada en el momento de la creacin de la instancia.
El constructor se usa para establecer las propiedades del objeto o para llamar a los mtodos para preparar el
objeto para su uso. Ms adelante describiremos como agregar mtodos a clase y sus deniciones ya que se
realiza utilizando una sintaxis diferente.
En el siguiente ejemplo, el constructor de la clase Persona muestra un alerta que dice (Una instancia de
persona) cuando se crea la instancia de la clase Persona.

1
2
3

function Persona() {
alert('Una instancia de Persona');
}

4
5
6

var persona1 = new Persona();

var persona2 = new Persona();

La propiedad (atributo del objeto)

Las propiedades son variables contenidas en la clase, cada instancia del objeto tiene dichas propiedades. Las
propiedades deben establecerse a la propiedad prototipo de la clase (funcin), para que la herencia funcione
correctamente.
Para trabajar con propiedades dentro de la clase se utiliza la palabra reservada this , que se reere al objeto
actual. El acceso (lectura o escritura) a una propiedad desde fuera de la clase se hace con la sintaxis:
NombreDeLaInstancia.Propiedad. Es la misma sintaxis utilizada por C++, Java y algunos lenguajes ms.
(Desde dentro de la clase la sintaxis es this.Propiedad que se utiliza para obtener o establecer el valor de la
propiedad).
En el siguiente ejemplo denimos la propiedad primerNombre de la clase Persona y la denimos en la
creacin de la instancia.

1
2
3
4

function Persona(primerNombre) {
this.primerNombre = primerNombre;
alert('Una instancia de Persona');
}

5
6
7

var persona1 = new Persona("Alicia");

var persona2 = new Persona("Sebastian");

8
9
10

// Muestra el primer nombre de persona1

alert ('persona1 es ' + persona1.primerNombre); // muestra "persona1 es Alicia"

11

alert ('persona2 es ' + persona2.primerNombre); // muestra "persona2 es Sebastian"

Los mtodos
Los mtodos siguen la misma lgica que las propiedades, la diferencia es que son funciones y se denen
como funciones. Llamar a un mtodo es similar a acceder a una propiedad, pero se agrega () al nal del
nombre del mtodo, posiblemente con argumentos.
En el siguiente ejemplo se dene y utiliza el mtodo diHola() para la clase Persona.

1
2
3

function Persona(primerNombre) {
this.primerNombre = primerNombre;
}

4
5
6
7

Persona.prototype.diHola = function() {
alert ('Hola, Soy ' + this.primerNombre);
};

8
9
10

var persona1 = new Persona("Alicia");

var persona2 = new Persona("Sebastian");

11
12
13
14

// Llamadas al mtodo diHola de la clase Persona.

persona1.diHola(); // muestra "Hola, Soy Alicia"
persona2.diHola(); // muestra "Hola, Soy Sebastian"

En JavaScript los mtodos son objetos como lo es una funcin normal y se vinculan a un objeto como lo hace
una propiedad, lo que signica que se pueden invocar desde "fuera de su contexto". Considera el siguiente
cdigo de ejemplo:

1
2
3

function Persona(primerNombre) {
this.primerNombre = primerNombre;
}

4
5
6
7

Persona.prototype.diHola = function() {
alert ("Hola, Soy " + this.primerNombre);
};

8
9
10
11

var persona1 = new Persona("Alicia");

var persona2 = new Persona("Sebastian");
var funcionSaludar = persona1.diHola;

12
13
14

persona1.diHola(); // muestra "Hola, Soy Alicia"

persona2.diHola(); // muestra "Hola, Soy Sebastian"

15
16
17

funcionSaludar(); // muestra "Hola, Soy undefined ( da un er

// TypeError en modo estricto

18
19
20

alert(funcionSaludar === persona1.diHola); // muestra true (verdadero)

alert(funcionSaludar === Persona.prototype.diHola); // muestra true (verdadero)
funcionSaludar.call(persona1); // muestra "Hola, Soy Alicia"

En el ejemplo se muestran todas las referencias que tenemos de la funcin diHola una de ellas
es persona1, otra en Persona.prototype, en la variable funcionSaludar, etc. todas se reeren a la misma
funcin. El valor durante una llamada a la funcin depende de como realizamos esa llamada. En el comn de
los casos cuando la llamamos desde una expresin donde tenemos a la funcin desde la propiedad del objeto
persona1.diHola(). Se establece en el objeto que tenemos en la funcin (persona1), razn por la cual
persona1.diHola() utiliza el nombre "Alicia" y persona2.diHola() utiliza el nombre "Sebastian". Pero si
realizamos la llamada de otra manera, se establecer de otra manera: Llamandola desde una variable
funcionSaludar() Este establece al objeto global (windows, en los navegadores). Desde este objeto
(probablemente) no tiene a la propiedad primerNombre, que nalizar con "Hola, Soy indenido". (El cual se
incluye en modo de cdigo suelto, sino sera diferente [un error] en modo estricto, pero para evitar
confusiones ahora no vamos a entra en detalles.) O podemos establecerla de forma explicita utilizando
Function.call ( Function.apply), como se muestra al nal del ejemplo funcionSaludar.call(persona1).

Consulta ms informacin al respecto en Function.call y Function.apply

Herencia
La herencia es una manera de crear una clase como una versin especializada de una o ms clases (JavaScript
slo permite herencia simple). La clase especializada comnmente se llama hija o secundaria, y la otra clase se
le llama padre o primaria. En JavaScript la herencia se logra mediante la asignacin de una instancia de la clase
primaria a la clase secundaria, y luego se hace la especializacin.

JavaScript no detecta la clase hija prototype.constructor, vea las propiedades del Core JavaScript 1.5
Reference:Global Objects:Object:prototype, as que debemos decrselo de forma manual.

En el siguiente ejemplo denimos la clase Estudiante como una clase secundaria de Persona . Luego
redenimos el mtodo diHola() y agregamos el mtodo diAdios().

1
2
3
4
5
6

// Definimos el constructor Persona

function Persona(primerNombre) {
this.primerNombre = primerNombre;
}

7
8
9
10
11
12
13

// Agregamos un par de mtodos a Persona.prototype

Persona.prototype.caminar = function() {
alert("Estoy caminando!");
};
Persona.prototype.diHola = function(){
alert("Hola, Soy" + this.primerNombre);
};

14
15
16
17
18
19

// Definimos el constructor Estudiante

function Estudiante(primerNombre, asunto) {
// Llamamos al constructor padre, nos aseguramos (utilizando Function#call) que "this"
// ha establecido correctamente durante la llamada
Persona.call(this, primerNombre);

20
21
22
23

//Inicializamos las propiedades especficas de Estudiante

this.asunto = asunto;
};

24
25
26
27
28
29
30

// Creamos el objeto Estudiante.prototype que hereda desde Persona.prototype

// Nota: Un error comn es utilizar "new Persona()" para crear Estudiante.prototype
// Esto es incorrecto por varias razones, y no menos importante, nosotros no le estamos p
// a Persona desde el argumento "primerNombre". El lugar correcto para llamar a Persona
// es arriba, donde nosotros llamamos a Estudiante.
Estudiante.prototype = Object.create(Persona.prototype); // Vea las siguientes notas

31
32
33

// Establecer la propiedad "constructor" para referencias a Estudiante

Estudiante.prototype.constructor = Estudiante;

34
35
36
37
38

// Remplazar el mtodo "diHola"

Estudiante.prototype.diHola = function(){
alert("Hola, Soy " + this.primerNombre + ". Yo estoy estudiando " + this.asunto + ".");
};

39
40
41
42
43

// Agregamos el mtodo "diAdios"

Estudiante.prototype.diAdios = function() {
alert(" Adios !");
};

44
45
46
47
48
49

// Ejemplos de uso
var estudiante1 = new Estudiante("Carolina", "Fsica Aplicada");
estudiante1.diHola(); // muestra "Hola, Soy Carolina. Yo estoy estudianto Fsica Aplic
estudiante1.caminar(); // muestra "Yo estoy caminando !"
estudiante1.diAdios(); // muestra " Adios !"

50
51
52

// Comprobamos que las instancias funcionan correctamente

alert(estudiante1 instanceof Persona); // devuelve true
alert(estudiante1 instanceof Estudiante); // devuelve true

Con respecto a la lnea Estudiante.prototype = Object.create(Persona.prototype); : Sobre los motores

antiguos de JavaScript sin Object.create, se puede utilizar un "polyll" (aka "shim", vea el enlace del artculo), o
se puede utilizar una funcin que obtiene el mismo resultado, como por ejemplo:

1
2
3
4
5

function crearObjeto(proto) {
function ctor() { }
ctor.prototype = proto;
return new ctor();
}

6
7
8

// uso:
Estudiante.prototype = crearObjeto(Persona.prototype);

Ver Object.create para conocer ms sobre lo que hace, y complementar con los motores antiguos.

Encapsulacin
En el ejemplo anterior, Student no tiene que saber cmo se aplica el mtodo walk() de la clase Person, pero,
sin embargo, puede utilizar ese mtodo. La clase Student no tiene que denir explcitamente ese mtodo, a
menos que queramos cambiarlo. Esto se denomina la encapsulacin, por medio de la cual cada clase hereda
los mtodos de su elemento primario y slo tiene que denir las cosas que desea cambiar.

Abstraccin
Un mecanismo que permite modelar la parte actual del problema de trabajo. Esto se puede lograr por
herencia (especializacin) o por composicin. JavaScript logra la especializacin por herencia y por
composicin al permitir que las instancias de clases sean los valores de los atributos de otros objetos.
La clase Function de JavaScript hereda de la clase de Object (esto demuestra la especializacin del modelo) y la
propiedad Function.prototype es un ejemplo de Objeto (esto demuestra la composicin)

1
2
3

var foo = function() {};

alert( 'foo es una Funcin: ' + (foo instanceof Function) );
alert( 'foo.prototype es un Objeto: ' + (foo.prototype instanceof Object) );

Polimorsmo
Al igual que todos los mtodos y propiedades estn denidas dentro de la propiedad prototipo, las diferentes

clases pueden denir mtodos con el mismo nombre. Los mtodos estn en el mbito de la clase en que
estn denidos. Esto slo es verdadero cuando las dos clases no tienen una relacin primario-secundario
(cuando uno no hereda del otro en una cadena de herencia).

Notas
Las tcnicas presentadas en este artculo para aplicar la programacin orientada a objetos no son las nicas
que se pueden utilizar en JavaScript, que es muy exible en trminos de cmo se puede realizar la
programacin orientada a objetos.
Del mismo modo, las tcnicas presentadas aqu no utilizan ninguna modicacin o hack de lenguaje ni imitan
las implementaciones de teoras de objetos de otros lenguajes.
Hay otras tcnicas que hacen incluso programacin orientado a objetos ms avanzada en JavaScript, pero que
estn fuera del alcance de este artculo introductorio.

Referencias
1. Mozilla. "Core JavaScript 1.5 Guide", http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Guide.
2. Wikipedia. "Programacin orientada a objetos", ! http://es.wikipedia.org/wiki/Program...tada_a_objetos.
3.

Descripcin general de POO en JavaScript por Kyle Simpson.