Objetos en javascript

En JavaScript todo es un objeto o forma parte de un objeto, inclusive las variables que declares en el ámbito global forman parte de un objeto y esas son las cosas que vamos a tratar en este post de objetos en JavaScript.

Primero empecemos con lo antes mencionado, a que objeto pertenece una variable que acabamos de crear globalmente y si es así, entonces los demás objetos que creo dentro de JavaScript también están dentro de este objeto.

Si tomamos esto como una jerarquía, el objeto que representa el documento es objeto document (DOM-Document Object Model).

Un ejemplo gráfico:

Por otro lado, tenemos el BOM(Browser Object Model) y el GJO(Global Javascript Object). Estos 3 se les llama buid-in objects y vienen con el navegador.

Nuestra variable seria parte GJO, interactuamos con el DOM cuando llamamos a document, el objeto global GJO siempre existe.

A continuación nos centraremos más en como declarar un objeto en JavaScript, como agregar propiedades y métodos al objeto y talvez otros asuntos relacionados con los objetos.

Cómo declarar un objeto.

Hay varias maneras de declarar un objeto en JavaScript hoy en día, a continuación veremos las distintas formas de declararlo.

Declarando un objeto usando { }

Por ejemplo, en otro post usé marcas de autos para hacer un objeto JSON, veamos como hacerlo en JavaScript. Hagamos un objeto auto.

var auto = {
	marca:"jaguar",
	puertas :2,
	//ahora 2 metodos
	prenderAuto:function(){
		alert("el auto esta prendido");
	},
	apagarAuto:function(){
		alert("el auto esta apagado");
	}
}
alert(auto.marca);
alert(auto.puertas);
auto.prenderAuto();
auto.apagarAuto();
//ahora que pasa si hago esto?(por supuesto nos dará undefined)
alert(auto.direccion);
auto.direccion = "electrica";
alert(auto.direccion);//hemos agregado la propiedad direccion

A esta forma de declarar se le llama notación literal del objeto, veamos el mismo objeto pero declarado de otra manera.

var auto ={};
//agrego las propiedades y métodos del objeto luego (solo agregaré 1 y 1)
auto.marca ="jaguar";
auto.apagarAuto = function(){
   alert("el auto esta apagado");
};

Declarando un objeto con new Object()

Mismo ejemplo usando new Object().

var auto= new Object();
auto.marca ="jaguar";
auto.apagarAuto = function(){
   alert("el auto está apagado");
};

Además, cuando usamos new Object() estamos usando una notación por constructor (constructor notation). Ahora bien, lo más probable es que queramos hacer un objeto auto y lo llamemos con new auto() para hacer esto tenemos que hacer un constructor.

Creando un Constructor para un objeto en JavaScript.

Primero para crear el constructor debo crear una función que se llame auto.

function auto(marca,puertas){
   this.marca = marca;
   this.puertas =puertas;
   this.apagarAuto = function(){
      alert("el auto esta apagado");
   };
}
//luego podemos crear nuestro objeto asi
var x1 = new auto("jaguar",4);
alert(x1.marca);//nos debería dar jaguar como respuesta

Finalmente, concluimos que para crear un constructor de mi objeto auto solo tengo que usar la palabra clave function y la palabra clave this, la palabra clave this es para referirse al objeto que estamos creando con esa función.

También podemos agregar que los objetos en JavaScript no usan clases así que no verá la palabra clave class en JavaScript.

Declaración class

Desde ES6 podemos usar la declaración class para construir una clase que después podemos llamar con new. Entonces podemos declarar una clase con la siguiente sintaxis:

class name [extends] {
  // Contenido de la clase
}

Como puede ver también tenemos herencia en esta forma de crear la clase, esto no quiere decir que no tuviéramos herencia antes de ES6 en JavaScript, solo que era un tanto engorrosa.

Veamos un ejemplo rápido:

class vehiculo {
	puertas = null;
	ruedas = 2;
	
	constructor(p,r){
		this.ruedas = r;
		this.puertas = p;
	}
	
	datos(){
		console.log(`el vehiculo tiene ${this.puertas} puertas y ${this.ruedas} ruedas`);
	}
}

var a = new vehiculo(6,5);
a.datos();

el vehiculo tiene 6 puertas y 5 ruedas

Usando expresion class

También tenemos esta forma de usar la declaración class, tal como usábamos en las funciones de JavaScript podemos utilizarlas en una expresión donde incluso el nombre de la clase es opcional.

var MyClass = class [className] [extends] {
  // class body
};

Pasemos el objeto de la clase vista en declaración class.

var vehiculo = class {
	puertas = null;
	ruedas = 2;
	
	constructor(p,r){
		this.ruedas = r;
		this.puertas = p;
	}
	
	datos(){
		console.log(`el vehiculo tiene ${this.puertas} puertas y ${this.ruedas} ruedas`);
	}
}

var a = new vehiculo(6,5);
a.datos();

el vehiculo tiene 6 puertas y 5 ruedas