Cómo crear y usar clases de JavaScript [Ejemplos]

Este tutorial explicará las clases de JavaScript y cómo se relacionan con objetos . Se proporcionan ejemplos de código y sintaxis.

Pero primero, un repaso rápido de los objetos de JavaScript.

Objetos JavaScript

En JavaScript, los objetos son un contenedor para un conjunto de propiedades y métodos.

Un automóvil, por ejemplo, podría modelarse como un objeto. Podría tener propiedades que describan al fabricanteaño en que se hizo y el color .

Los métodos son funciones que son parte del objeto, que cuando son llamadas, interactúan con el objeto de alguna manera. Un coche puede tener un bocinazo método que activa una alerta, o un drive método que cambia su posición.

var myHonda = {
    manufacturer: "honda",
    year: "2002",
    colour: "yellow"
};

Arriba, se crea un objeto JavaScript que describe un automóvil Honda amarillo de 2002. Los objetos pueden tener cualquier número de propiedades y métodos.

Clases de JavaScript

No existe una estructura rígida para los objetos:las propiedades se pueden agregar y quitar, o existir en algunos objetos y no en otros. Las clases proporcionan una plantilla para crear objetos con una lista preestablecida de propiedades y pueden incluir métodos preestablecidos.

Todos los objetos creados usando esa clase tendrán esas propiedades y métodos disponibles, completados con los valores únicos para ese objeto

Crear/Definir Clases y Propiedades

Las clases son un tipo de función:funciones que crean objetos.

Cada clase debe tener un constructor método. Este método se llama cuando se crea un objeto usando la clase y establece las propiedades de la clase. Las propiedades definidas en el constructor son las propiedades predefinidas para esa clase.

class Car {
    constructor(manufacturer, year, colour) {
        this.manufacturer = manufacturer;
        this.year = year;
        this.colour = colour;
    }
}

Hay otras formas de crear clases, como se describe en los documentos de la Red de desarrolladores de Mozilla.

Métodos de clase

Los métodos, las funciones contenidas dentro de la clase, también se pueden agregar en la definición de la clase. Usan sintaxis de función estándar y simplemente se pueden enumerar después del constructor en la definición de clase.

class Car {
    constructor(manufacturer, year, colour) {
        this.manufacturer = manufacturer;
        this.year = year;
        this.colour = colour;
    }
    honk(){
        //Code to honk here
    }
    drive(direction){
        //Code to drive here
    }
}

Creación de objetos a partir de clases

Los nuevos objetos se crean usando el nuevo palabra clave seguida del nombre de la clase y las propiedades en el orden en que están definidas en el constructor.

let myHonda = new Car("honda", "2002", "yellow");

Lo anterior creará un objeto Honda amarillo 2002 de la clase Coche .

Las clases están diseñadas para ser reutilizables, para crear objetos consistentes que actúan de la misma manera. Puede crear tantos objetos como desee de una clase.

let myHonda = new Car("honda", "2002", "yellow");
let myToyota = new Car("toyota", "1987", "red");

Acceder a las propiedades propias de un objeto con 'esto'?

Como se ve en las funciones constructoras anteriores, cuando un objeto se refiere a sí mismo, usa this palabra clave. esto no se refiere a la clase, sino al objeto individual de esa clase.

Lea más sobre 'esto' en JavaScript aquí.

A continuación, se ha agregado un nuevo método que usa this para actualizar el color del coche:

class Car {
    constructor(manufacturer, year, colour) {
        this.manufacturer = manufacturer;
        this.year = year;
        this.colour = colour;
    }
    honk(){
        //Code to honk here
    }
    drive(direction){
        //Code to drive here
    }
    changeColour(colour){
        this.colour = colour;
    }
}


No