Scribd
Cargar
88 vistas

JavaScript Desmitificado - Objetos

Este documento presenta los fundamentos de los objetos en JavaScript. Explica tres formas de crear objetos: usando literales, el operador new y Object.create(). También cubre conceptos como prototipos, herencia de objetos, propiedades y métodos públicos vs privados. El objetivo es proveer una introducción básica pero suficiente para empezar a usar el paradigma de programación orientada a objetos en JavaScript.

Cargado por

Francisco Retana
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
88 vistas

JavaScript Desmitificado - Objetos

Este documento presenta los fundamentos de los objetos en JavaScript. Explica tres formas de crear objetos: usando literales, el operador new y Object.create(). También cubre conceptos como prototipos, herencia de objetos, propiedades y métodos públicos vs privados. El objetivo es proveer una introducción básica pero suficiente para empezar a usar el paradigma de programación orientada a objetos en JavaScript.

Cargado por

Francisco Retana
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 8

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 Node.js
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 = Object.create(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 Object.create().

1
2
3
4
5
6
7
8
9
1
0
1
1

var card = {
name: 'Oscar'
};
var card2 = Object.create(Object.prototype, {
bar: {
name: 'Oscar'
} });
console.log(card.bar); // -> Oscar
console.log(card2.bar); // -> 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
this.name = 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 Person.prototype.

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 Object.create()


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) {
console.log( 'Hola, mi nombre es ' + this.name + ' y tengo ' + age + ' aos de edad');
}
};
var oscar = Object.create(Person, {
'name': {
value: 'Oscar'
}
});

1
2
1
oscar.introduce(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) {


this.name = name || '';
this.introduce = function() {
return 'Hola, mi nombre es ' + this.name;
};
};
// Creando una nueva persona
var oscar = new Person('Oscar');
// Agregando atributo nuevo
oscar.lastname = 'Gonzlez';
// Agregando una funcin nueva
oscar.introduceFull = function () {
return this.introduce() + ' ' + this.lastname;
};
console.log(oscar.introduceFull()); // -> "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

Person.prototype define el prototipo para un objeto instanciado con el


operador new
Object.getPrototypeOf(oscar) retorna el prototipo de un objeto

var Person = function (name) {


this.name = name || '';
};
var oscar = new Person('Oscar');
var pepe = new Person('Pepe');
// Definiendo una funcin por el prototipo afecta todas las instancias de un objeto
Person.prototype.introduce = function() {
return 'Hola, mi nombre es ' + this.name;
};
console.log(oscar.introduce());
console.log(pepe.introduce());
// Definir una funcin con el mismo nombre solo afecta al objeto localmente
oscar.introduce = function() {
return 'Hola, mi nombre alreves es ' + this.name.split("").reverse().join("");
};
console.log(oscar.introduce());
console.log(pepe.introduce());
// no afecta porque las propiedades locales tienen preferencia
Person.prototype.name = 'Jose';
console.log(oscar.introduce());
console.log(pepe.introduce());

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
this.name = name || '';
// propiedad privada
var lastname = 'Gonzlez';
// propiedad privada
var myName = this.name;
// mtodo privado
var fullName = function () {
return myName + ' ' + lastname;
}
// mtodo pblico
this.introduce = function() {
return 'Hola, mi nombre es ' + fullName();
};
};
var oscar = new Person('Oscar');
console.log(oscar.name); // -> "Oscar"
console.log(oscar.introduce());// -> "Hola, mi nombre es Oscar Gonzlez"
console.log(oscar.lastname); // -> undefined
console.log(oscar.fullName()); // 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.

También podría gustarte