Clases en JavaScript - Coding N Concepts

En este tutorial, aprenderemos cómo crear clases en JavaScript.

Índice
  1. declaración de clase
  2. Métodos
  3. Ejemplos
  4. Más información sobre Obtener y configurar
  5. Herencia

declaración de clase

Veamos el ejemplo de creación de clases en JavaScript usando function constructor y class palabra clave:

// ES5 Function Constructor
function Car(brand, color, price) {
  this.brand = brand;
  this.color = color;
  this.price = price;
}

// ES6 Class
class Car {
  constructor(brand, color, price) {
    this.brand = brand;
    this.color = color;
    this.price = price;
  }
}

Tenga en cuenta que class es un tipo de función, por lo que la usamos para reemplazar function. En este sentido, las dos formas de crear una clase son prácticamente iguales.

Podemos hacer nuestro código aún más corto así:

class Car {
  constructor(brand, color, price) {
    Object.assign(this, { brand, color, price});
  }
}

Métodos

Agreguemos algunos métodos a nuestro Car clasificar

  • Método Getter Setter (método de instancia) se llama desde la instancia de clase. Se definen usando get y set palabras clave para obtener y establecer propiedades respectivamente.
  • método de creación de prototipos (método de instancia) se llama desde la instancia de clase. Se utilizan para acceder a las propiedades de las instancias y realizar ciertas operaciones en ellas.
  • método estático (método de clase) se llama directamente desde la clase. Se definen usando static palabra clave y se utiliza a menudo para crear funciones de utilidad.
class Car {
  constructor(brand, color, price) {
    this._brand = brand;
    this._color = color;
    this._price = price;
  }

  // getter method
  get color(){
    return `color is ${this._color.toUpperCase()}`;
  }

  // setter method
  set color(newColor){
    this._color = newColor;
  }

  // prototype method
  drive(){
    return `driving ${this._brand} ${this._color} color car`;
  }

  // static method
  static compareCars(car1, car2){
    return `${car2._brand} is ${(car1._price > car2._price) ? "cheaper" : "costlier"} then ${car1._brand}`
  }
}

Ejemplos

Vamos a crear algunos objetos usando Car clasificar y llamar a sus métodos getter, setter, prototipo y estático

let redToyotaCar = new Car("Toyota", "red", 500000);

console.log(redToyotaCar);  
// prints Car {_brand: "Toyota", _color: "red", _price: 500000}

console.log(redToyotaCar.color);  
// (getter method)
// prints 'color is RED'

console.log(redToyotaCar.drive());  
// (prototype method)
// prints 'driving Toyota red color car'

redToyotaCar.color = "blue";  
// (setter method)
// set color to blue

console.log(redToyotaCar.color); 
// (getter method)
// prints 'color is BLUE'

console.log(redToyotaCar.drive()); 
// (prototype method)
// prints 'driving Toyota blue color car'

let blackAudiCar = new Car("Audi", "black", 900000);
console.log(Car.compareCars(redToyotaCar, blackAudiCar));  
// (static method)
// prints 'Audi is costlier then Toyota'

Más información sobre Obtener y configurar

En la clase Carcreamos métodos get y set con el nombre color:-

// getter method
get color(){
  return `color is ${this._color.toUpperCase()}`;
}

// setter method
set color(newColor){
  this._color = newColor;
}

y llamamos a estos métodos getter y setter usando this.color:-

console.log(this.color);  
// (call getter method)

this.color = "blue";  
// (call setter method)

También ves que hemos creado una propiedad _color, que se inicializa dentro del constructor. Veamos la diferencia entre estos dos: -

  1. this.color se utiliza para acceder a los métodos getter y setter
  2. this._color se utiliza para acceder _color propiedad que se inicializa dentro del constructor.

Si usamos el mismo color propiedad en el constructor también, entonces se verá así:

class Car {
  constructor(brand, color, price) {
    this.brand = brand;
    this.color = color;
    this.price = price;
  }

  // getter method
  get color(){
    return `color is ${this.color.toUpperCase()}`;  
    //${this.color.toUpperCase()} will call get method again, cause recursive loop
  }

  // setter method
  set color(newColor){
    this.color = newColor;
    // this.color will call get method again, cause recursive loop
  }
}

En este caso, al llamar a métodos getter o setter usando this.color y ya que accedemos this.color nuevamente dentro de estos métodos, el método getter se llamará recursivamente y provocará un desbordamiento de pila:

VM172:12 Uncaught RangeError: Maximum call stack size exceeded
    at Car.set color [as color] (<anonymous>:12:16)
    at Car.set color [as color] (<anonymous>:12:16)
    at Car.set color [as color] (<anonymous>:12:16)
    at Car.set color [as color] (<anonymous>:12:16)
    at Car.set color [as color] (<anonymous>:12:16)
    at Car.set color [as color] (<anonymous>:12:16)
    at Car.set color [as color] (<anonymous>:12:16)
    at Car.set color [as color] (<anonymous>:12:16)
    at Car.set color [as color] (<anonymous>:12:16)
    at Car.set color [as color] (<anonymous>:12:16)

Para evitar esto, asegúrese de no acceder a la propiedad con el mismo nombre que el nombre del método getter o setter. Puede seguir cualquier convención de nomenclatura, un ejemplo es agregar el sufijo get y set en los nombres de los métodos getter setter:

class Car {
  constructor(brand, color, price) {
    this.brand = brand;
    this.color = color;
    this.price = price;
  }

  // getter method
  get getColor(){
    return `color is ${this.color.toUpperCase()}`;  
  }

  // setter method
  set setColor(newColor){
    this.color = newColor;
  }
}

Herencia

Digamos que queremos crear un Toyota subclase de Auto clase y agregue campos adicionales como "modelo" y "marca".

class Toyota extends Car {
    constructor(color, price, model, make){
        super("Toyota", color, price);
        Object.assign(this, {model, make});
    }
    drive(){
        return `${super.drive()} made in ${this.make}`;
    }
}

Vamos a crear objetos a partir de Toyota subclase

let toyotaCamery = new Toyota("red", 800000, "Camary", 2010);

console.log(toyotaCamery);
// prints Toyota {_brand: "Toyota", _color: "red", _price: 800000, model: "Camary", make: 2010}

console.log(toyotaCamery.color);
// prints 'color is RED'

console.log(toyotaCamery.drive());
// prints 'driving Toyota red color car made in 2010'

Vemos que creando una subclase usando ES6 class palabra clave es muy conveniente y fácil.

Si quieres conocer otros artículos parecidos a Clases en JavaScript - Coding N Concepts puedes visitar la categoría Tutoriales.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir

Esta página web utiliza cookies para analizar de forma anónima y estadística el uso que haces de la web, mejorar los contenidos y tu experiencia de navegación. Para más información accede a la Política de Cookies . Ver mas