Objetos, prototipos y clases en JavaScript

JavaScript se basa en un modelo de programación simple orientado a objetos, siendo los objetos una parte fundamental del lenguaje. Casi todo en JavaScript es un objeto. A diferencia de otros lenguajes de programación orientados a objetos como Java, los objetos de JavaScript son muy flexibles. .

Objetos

Un objeto es una colección de pares clave-valor llamados propiedades. La clave de una propiedad es una cadena o símbolo (también conocido como nombre de propiedad ) y el valor puede ser cualquier cosa. Hay varias formas de crear un objeto en JavaScript. La forma más simple y popular es usar objeto literal sintaxis:

const user = {
    fisrtName: 'John',
    lastName: 'Doe',
    age: 29 
};

Los objetos también se pueden crear usando el nuevo operador . El new la palabra clave se puede usar con Object incorporado función constructora o función constructora definida por el usuario:

// in-built constructor function
const user = new Object();
user.fisrtName = 'John';
user.lastName = 'Doe';
user.age = 29;

// user-defined constructor function
function User(fisrtName, lastName, age) {
    this.fisrtName = fisrtName;
    this.lastName = lastName;
    this.age = age;
};

const user = new User('John', 'Doe', 29);

El valor de una propiedad también puede ser una función. Tal propiedad se llama método:

const user = {
    fisrtName: 'John',
    lastName: 'Doe',
    age: 29,
    fullName: function () {
        return `${this.fisrtName} ${this.lastName}`;
    }
};

Se puede acceder a los valores de las propiedades mediante el punto (. ) notación y el corchete ([] ) notación:

// dot notation
console.log(user.fullName()); // John Doe
console.log(user.age); // 29

// square bracket notation - does not work for methods
console.log(user['fisrtName']); // John

Puede agregar nuevas propiedades a un objeto existente simplemente asignándoles valores:

user.country = 'United States';

// method can also be added
user.ageRange = function() {
    return `${this.age - 5}-${this.age + 5}`;
}

Para eliminar una propiedad del objeto, use el delete operador:

delete user.age;

Para iterar sobre todas las claves de un objeto, podemos usar el for...in bucle:

for (const key in user) {
    console.log(user[key]);
}

La sintaxis literal de objeto solo se puede utilizar para crear un solo objeto. Para crear múltiples objetos del mismo tipo, debe usar la función de constructor de objetos:

function Animal(name, icon) {
    this.name = name;
    this.icon = icon;
};

const rabbit = new Animal('Rabbit','🐰');
const cat = new Animal('Cat','🐱');

No podemos asignar valores directamente a un constructor de objetos para agregar nuevas propiedades y métodos. Se deben agregar nuevas propiedades dentro de la función constructora de objetos:

Animal.color = 'Red'; // wrong way

// correct way
function Animal(name, icon, color) {
    // ...
    this.color = color;
};

Prototipos

Todos los objetos en JavaScript heredan propiedades y métodos de otro objeto llamado prototipo. El prototype La propiedad nos permite agregar nuevas propiedades y métodos a los constructores de objetos existentes. Las nuevas propiedades se comparten entre todas las instancias del tipo especificado, en lugar de solo una instancia del objeto.

Agreguemos nuevas propiedades a todos los objetos de tipo Animal vía prototipo:

// add property
Animal.prototype.color = 'White';

// add method
Animal.prototype.meow = function() {
    if(this.name === 'Cat') {
        return `${this.name} can meow!`;
    } else {
        return `${this.name} cannot meow!`;
    }
}

Ahora el anterior cat y rabbit los objetos tienen la propiedad color y método meow() porque el prototype de Animal los tiene:

console.log(cat.color); // White
console.log(rabbit.meow()); // Rabbit cannot meow!
console.log(cat.meow()); // Cat can meow!

Si desea acceder al prototype compartido propiedad a través de una instancia de un tipo específico, hay un __proto__ propiedad disponible. A través de esta propiedad, puede modificar las propiedades del prototipo existente o incluso agregar nuevas propiedades. Desde el prototype la propiedad se comparte entre todas las instancias, los cambios se realizan en el prototype de una instancia propiedad o método se reflejará en todas las instancias:

cat.__proto__.color = 'Black';
cat.__proto__.eatMeat = true;

console.log(rabbit.color); // Black
console.log(rabbit.eatMeat); // true

Similar a los objetos, el prototype la propiedad o el método se pueden eliminar usando el delete operador:

delete cat.__proto__.eatMeat;
// OR
delete Animal.prototype.eatMeat;

console.log(rabbit.eatMeat); // undefined

Como podemos ver arriba, el prototype La propiedad es una parte central de los conceptos básicos de objetos en JavaScript. Cualquier cambio realizado en esta propiedad afecta a todas las instancias de ese tipo de objeto en particular.

Clases

El concepto de clases se introdujo en JavaScript en ES6 (ECMA2015). En el paradigma de la programación orientada a objetos, una clase es un modelo para crear objetos con propiedades y métodos mientras se encapsulan los detalles de implementación del usuario. Sin embargo, el concepto de clases verdaderas no existe en JavaScript.

Las clases de JavaScript no son más que azúcar sintáctica sobre las funciones existentes de herencia y constructor basadas en prototipos. Veamos un ejemplo:

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    sayHi() {
        return `👋 ${this.name}!`;
    }
}

Ahora, si queremos crear una nueva instancia de Person clase, debemos usar el new operador:

const bill = new Person('Bill', 25);
console.log(bill.sayHi()); // 👋 Bill!

Cuando creamos un objeto de Person class, el constructor de la clase hace lo siguiente:

  1. Cree una nueva función llamada Person y copie todas las propiedades declaradas dentro del constructor (name y age ).
  2. Agregue todos los métodos de la clase, como sayHi() , a Person.prototype propiedad.

Posteriormente, cuando llamamos a cualquier método del objeto, se toma del prototype propiedad. Eche un vistazo a este artículo para obtener más información sobre las clases de JavaScript.

Resumen

Los objetos son una parte importante del lenguaje JavaScript. Casi todo en JavaScript es un objeto.

  • Un objeto es una colección de propiedades clave-valor. Se puede crear un objeto con sintaxis literal de objeto o sintaxis de función de constructor de objeto.
  • Cada vez que se crea una nueva función en JavaScript, el motor de JavaScript adjunta automáticamente un prototype propiedad a ello. Los cambios realizados en esta propiedad se comparten entre todas las instancias de un tipo de objeto en particular. Es una excelente manera de agregar nuevas propiedades a las funciones de construcción de objetos existentes.
  • ES6 trajo clases a JavaScript, que no son más que una nueva forma de escribir funciones de constructor utilizando la funcionalidad prototipo.

Si desea obtener más información sobre los objetos, aquí hay una guía detallada de MDN que explica cómo usar objetos, propiedades y métodos.