Creación de objetos en JavaScript (4 formas diferentes)

JavaScript es un lenguaje flexible orientado a objetos cuando se trata de sintaxis. En este artículo, veremos las diferentes formas de instanciar objetos en JavaScript.
Antes de continuar, es importante tener en cuenta que JavaScript es un lenguaje basado en objetos basado en prototipos, en lugar de estar basado en clases. Debido a esta base diferente, puede ser menos evidente cómo JavaScript le permite crear jerarquías de objetos y tener una herencia de propiedades y sus valores.

Creando objeto con un constructor:

Una de las formas más fáciles de instanciar un objeto en JavaScript. El constructor no es más que una función y, con la ayuda de la nueva palabra clave, la función del constructor permite crear múltiples objetos del mismo tipo, como se muestra a continuación:

//simple function
function vehicle(name,maker,engine){
    this.name = name;
    this.maker = maker;
    this.engine = engine;
}
//new keyword to create an object
let car  = new vehicle('GT','BMW','1998cc');
//property accessors
console.log(car.name);
console.log(car.maker);
console.log(car['engine']);

Salida:

Explicación: Una clase en OOP tiene dos componentes principales, ciertos parámetros y pocas funciones miembro. En este método declaramos una función similar a una clase, hay tres parámetros, nombre, fabricante y motor (la palabra clave this se usa para diferenciar el nombre, fabricante, motor de la clase al nombre, fabricante, motor de los argumentos que están siendo suministrados). Luego simplemente creamos un objeto obj del vehículo, lo inicializamos y llamamos su método.

Usando literales de objetos:

Los literales son formas más pequeñas y sencillas de definir objetos. Simplemente definimos la propiedad y los valores entre llaves como se muestra a continuación:

//creating js objects with object literal
let car = {
    name : 'GT',
    maker : 'BMW',
    engine : '1998cc'
};
//property accessor
console.log(car.name); //dot notation
console.log(car['maker']); //bracket notation

Salida:

en el código anterior, creamos un objeto simple llamado automóvil con la ayuda del objeto literal, que tiene propiedades como nombre, fabricante, motor. Luego usamos los métodos de acceso a la propiedad ( notación de puntos, notación de corchetes) para consola. valores.
Ahora veamos cómo podemos agregar más propiedades a un objeto ya definido:

let car = {
    name : 'GT',
    maker : 'BMW',
    engine : '1998cc'
};
//adding property to the object
car.brakesType = 'All Disc';
console.log(car);

Agregamos una nueva propiedad llamada brakesType al objeto de automóvil definido anteriormente y cuando consolamos. registramos el objeto completo obtenemos:
Salida:

los métodos también pueden ser parte del objeto durante la creación o se pueden agregar más tarde como propiedades como se muestra a continuación:

//adding methods to the car object
let car = {
    name : 'GT',
    maker : 'BMW',
    engine : '1998cc',
    start : function(){
        console.log('Starting the engine...');
    }
};
car.start();
// Adding method stop() later to the object
car.stop = function() {
    console.log('Applying Brake...');  
}
car.stop();

Salida:

Explicación: En el código anterior, el método de inicio se agregó al objeto del automóvil y luego fue llamado por car.start() y también se agregó el método de detención después de que el objeto ya se declaró.

Creando objetos con el método Object.create():

El método Object.create() crea un nuevo objeto, utilizando un objeto existente como prototipo del objeto recién creado.
Ejemplo:

const coder = {
    isStudying : false,
    printIntroduction : function(){
        console.log(`My name is ${this.name}. Am I studying?: ${this.isStudying}`);
    }
};
const me = Object.create(coder);
me.name = 'Mukul';
me.isStudying = true;
me.printIntroduction();

Producción:

Usando clases es6:

ES6 admite el concepto de clase como cualquier otro lenguaje orientado a objetos o tipificado estáticamente. Por lo tanto, el objeto se puede crear a partir de una clase en javascript, como se muestra a continuación:

//using es6 classes
class Vehicle {
  constructor(name, maker, engine) {
    this.name = name;
    this.maker =  maker;
    this.engine = engine;
  }
}
  
let car1 = new Vehicle('GT', 'BMW', '1998cc');
  
console.log(car1.name);  //GT

Producción: