CODEHERO
CURSOS
SERIES
CMO LO HAGO
NOTCIAS
Publicidad
CURSOS / JAVASCRIPT
JavaScript Desmitificado:
Objetos
PUBLICADO POR OSCAR GONZLEZ
EL 17 FEB
CON 0 COMENTARIOS
Detalles del Tutorial
Dificultad: Aprendiz
Duracin: 30 min
Ms artculos en JavaScript Desmitificado
Este es el artculo nmero 1 de 7 de la serie JavaScript Desmitificado - Mostrar todos
Creo que no tengo que empezar esta serie definiedo JavaScript, porque en realidad
cualquier persona interesada en el mundo del software sabe o programa javascript.
Y hago mal uso gramatical de las comillas para decir sabe, porque este lenguaje es
tan usado mundialmente que cualquier persona puede agregar en su curriculum que
programa JavaScript. Lo cierto es que es muy fcil creer que Javascript es solo para
manipular documentos HTML, yo lo crea, hasta que decid tomrmelo en serio.
Antes de empezar veamos un poco de background.
Historia
Javascript apareci por primera vez al pblico como parte del explorador Netscape
Navigator 2.0 en 1996. Y luego, al ao siguiente, fue estandarizado por ECMA
International llamndolo ECMAScript.
Lo que conocemos como JavaScript hoy en da es una implementacin de la
especificacin de lenguaje ECMAScript, de la cual cambien derivan lenguajes como
ActionScript, JScript, TypeScript, etc.
La especificacin de ECMAScript cambia con el tiempo, introduciendo soluciones a
viejos problemas y soporte para nuevas tecnologas.
Javascript es un lenguaje de scripting y a la vez orientado a objetos, que aunque su
nombre incluye Java no tiene nada o poco que ver con el lenguaje Java, de hecho,
inicialmente iba a llamarse LifeScript, pero tras los acuerdos entre Sun Microsystems
y Netscape decidieron llamarlo JavaScript para mercadearlo como un complemento
de scripting del lenguaje Java.
A pesar de que inicialmente fue pensado como un lenguaje de scripting para
exploradores hoy podemos ver JavaScript del lado del servidor con [Link]
Entonces, como todo el mundo sabe JavaScript no voy a empezar esta serie
explicando cosas bsicas como crear variables, operaciones, condicionales o ciclos.
Vamos directo a lo que nos interesa.
Objetos
El enfoque orientado a objetos de JavaScript es un poco diferente al que podemos ver
en otros lenguajes que implementan el paradigma.
Existen tres maneras de hacer una instancia de un objeto en javascript:
La forma literal: var x = {};. Con esto creamos un objeto vaco.
Utilizando el operador new: var x = new Object();.
Utilizando la funcin create: baz = [Link](null);.
A continuacin explico las diferencias de crear objetos con estas tres formas
diferentes.
Objetos literales
La forma literal es permite describir objetos de manera clara y compacta. Puedes
describir objetos entre llaves con propiedades separadas por comas. Esta forma no es
invocada explcitamente, es solo un atajo para usar el mtodo [Link]().
1
2
3
4
5
6
7
8
9
1
0
1
1
var card = {
name: 'Oscar'
};
var card2 = [Link]([Link], {
bar: {
name: 'Oscar'
} });
[Link]([Link]); // -> Oscar
[Link]([Link]); // -> Oscar
Por ser tan simple la forma literal es que el constructor del objeto no puede ser
redefinido, de modo que no se puede definir un objeto cuyo prototipo sea diferente al
por defecto. Ya explicar lo que es el prototipo ms adelante.
Objetos con operador new
El operador new crea una instancia de un objeto. Este acepta un constructor y una
serie de argumentos opcionales.
1 var Person = function (name) {
2
[Link] = name || '';
3 };
4
5 var sinNombre = new Person();
6 var oscar = new Person('Oscar');
Veamos lo que hace intrnsecamente este operador (new):
1.
Se crea el objeto nuevo.
2.
Se conecta el constructor del nuevo objeto a la funcin Person.
3.
Se conecta el prototipo del objeto Object con [Link].
4.
Se asigna cualquier argumento pasado a la funcin al objeto creado.
Este enfoque le da al lenguaje un estilo de clases que confunde a mucha gente,
porque realmente no existen las clases en Javascript como las conocemos en otros
lenguajes como Java, C#, Objective-C. En Javascript hay solo objetos que pueden ser
extendidos.
Objetos con [Link]()
Esta forma fue introducida en ECMAScript 5. Basicamente hace lo mismo que la
forma con el operador new, solo que esta tiene sintaxis ms consistente con el resto
del lenguaje, ademas de facilitar la herencia por prototipo.
1
2
3
4
5
6
7
8
9
1
0
1
1
var Person = {
introduce: function(age) {
[Link]( 'Hola, mi nombre es ' + [Link] + ' y tengo ' + age + ' aos de edad');
}
};
var oscar = [Link](Person, {
'name': {
value: 'Oscar'
}
});
1
2
1
[Link](26);
3
1
4
realmente no existen las clases en Javascript como las conocemos en otros
lenguajes () hay solo objetos que pueden ser extendidos
Extendiendo objetos
JavaScript es un lenguaje muy flexible. Permite agregar funciones y propiedades a
objetos de manera dinmica sin mucho esfuerzo.
1
2
3
4
5
6
7
8
9
1
0
1
1
1
2
1
3
1
4
1
5
1
6
1
7
1
8
1
9
2
0
2
1
var Person = function (name) {
[Link] = name || '';
[Link] = function() {
return 'Hola, mi nombre es ' + [Link];
};
};
// Creando una nueva persona
var oscar = new Person('Oscar');
// Agregando atributo nuevo
[Link] = 'Gonzlez';
// Agregando una funcin nueva
[Link] = function () {
return [Link]() + ' ' + [Link];
};
[Link]([Link]()); // -> "Hola, mi nombre es Oscar Gonzlez"
Esta es una manera de expresar herencia de objetos. Un tanto extrao porque
estamos acostumbrados a herencia de clases.
Prototipos
Los prototipos permiten conectar entre si a los objetos. JavaScript usa una cadena de
prototipos, de manera que, cuando intentas hacer una referencia una propiedad, se
viaja a travs de la cadena hasta alcanzar la en la conexin correcta. Se puede
acceder al prototipo de un objeto de la siguiente manera:
1
2
3
4
5
6
7
8
9
1
0
1
1
1
2
1
3
1
4
1
5
1
6
1
7
1
8
1
9
2
0
2
1
2
2
2
3
2
4
2
[Link] define el prototipo para un objeto instanciado con el
operador new
[Link](oscar) retorna el prototipo de un objeto
var Person = function (name) {
[Link] = name || '';
};
var oscar = new Person('Oscar');
var pepe = new Person('Pepe');
// Definiendo una funcin por el prototipo afecta todas las instancias de un objeto
[Link] = function() {
return 'Hola, mi nombre es ' + [Link];
};
[Link]([Link]());
[Link]([Link]());
// Definir una funcin con el mismo nombre solo afecta al objeto localmente
[Link] = function() {
return 'Hola, mi nombre alreves es ' + [Link]("").reverse().join("");
};
[Link]([Link]());
[Link]([Link]());
// no afecta porque las propiedades locales tienen preferencia
[Link] = 'Jose';
[Link]([Link]());
[Link]([Link]());
5
2
6
2
7
2
8
2
9
Propiedades y mtodos privados
En ejemplos anteriores hemos visto como se crean propiedades y mtodos pblicos.
Veamos ahora los privados.
1
2
3
4
5
6
7
8
9
1
0
1
1
1
2
1
3
1
4
1
5
1
6
1
7
1
8
1
9
2
0
2
1
2
2
2
3
2
4
var Person = function (name) {
// propiedad pblica
[Link] = name || '';
// propiedad privada
var lastname = 'Gonzlez';
// propiedad privada
var myName = [Link];
// mtodo privado
var fullName = function () {
return myName + ' ' + lastname;
}
// mtodo pblico
[Link] = function() {
return 'Hola, mi nombre es ' + fullName();
};
};
var oscar = new Person('Oscar');
[Link]([Link]); // -> "Oscar"
[Link]([Link]());// -> "Hola, mi nombre es Oscar Gonzlez"
[Link]([Link]); // -> undefined
[Link]([Link]()); // Error: -> "Object [object Object] has no method 'fullName'"
2
5
2
6
2
7
2
8
2
9
Conclusin
En este tutorial he presentado los fundamentos de los objetos en JavaScript. Por
supuesto que todava se puede decir mucho ms sobre el tema, pero pasaramos das
hablando. Con esto es mas que suficiente para estar, como dicen, up and running
con el paradigma POO en JavaScript.
Dudas o comentarios pueden ser dejados en la seccin correspondiente ms abajo.
Si te ha gustado esta publicacin, ayudamos compartindola en tus redes sociales
favoritas.
Saludos.