Cómo utilizar las clases de JavaScript

En 2015, el estándar ECMAScript 6 (ES6) introdujo clases. Aprende todo sobre ellos

En 2015, el estándar ECMAScript 6 (ES6) introdujo clases.

JavaScript tiene una forma poco común de implementar la herencia: herencia prototípica.Herencia prototípica, aunque en mi opinión es genial, es diferente a la implementación de herencia de la mayoría de los otros lenguajes de programación populares, que se basan en clases.

Las personas que provenían de Java o Python u otros lenguajes tuvieron dificultades para comprender las complejidades de la herencia prototípica, por lo que el comité ECMAScript decidió espolvorear azúcar sintáctica sobre la herencia prototípica para que se parezca a cómo funciona la herencia basada en clases en otras implementaciones populares.

Esto es importante: JavaScript bajo el capó sigue siendo el mismo y puede acceder a un prototipo de objeto de la forma habitual.

Una definición de clase

Así es como se ve una clase.

class Person {
  constructor(name) {
    this.name = name
  }

hello() { return 'Hello, I am ’ + this.name + ‘.’ } }

Una clase tiene un identificador, que podemos usar para crear nuevos objetos usandonew ClassIdentifier().

Cuando se inicializa el objeto, elconstructorse llama al método, con los parámetros pasados.

Una clase también tiene tantos métodos como necesite. En este casohelloes un método y se puede llamar a todos los objetos derivados de esta clase:

const flavio = new Person('Flavio')
flavio.hello()

Herencia de clases

Una clase puede extender otra clase, y los objetos inicializados usando esa clase heredan todos los métodos de ambas clases.

Si la clase heredada tiene un método con el mismo nombre que una de las clases más altas en la jerarquía, el método más cercano tiene prioridad:

class Programmer extends Person {
  hello() {
    return super.hello() + ' I am a programmer.'
  }
}

const flavio = new Programmer(‘Flavio’) flavio.hello()

(el programa anterior imprime "Hola, soy Flavio. Soy un programador.")

Las clases no tienen declaraciones explícitas de variables de clase, pero debe inicializar cualquier variable en el constructor.

Dentro de una clase, puede hacer referencia a la llamada de la clase principalsuper().

Métodos estáticos

Normalmente, los métodos se definen en la instancia, no en la clase.

Los métodos estáticos se ejecutan en la clase en su lugar:

class Person {
  static genericHello() {
    return 'Hello'
  }
}

Person.genericHello() //Hello

Métodos privados

JavaScript no tiene una forma incorporada para definir métodos privados o protegidos.

Hay soluciones, pero no las describiré aquí.

Getters y setters

Puede agregar métodos con el prefijogetosetpara crear un captador y un definidor, que son dos piezas de código diferentes que se ejecutan en función de lo que estás haciendo: acceder a la variable o modificar su valor.

class Person {
  constructor(name) {
    this._name = name
  }

set name(value) { this._name = value }

get name() { return this._name } }

Si solo tiene un getter, la propiedad no se puede establecer, y cualquier intento de hacerlo (fuera del constructor, que establece el valor cuando inicializa un nuevo objeto con esta clase) será ignorado:

class Person {
  constructor(name) {
    this._name = name
  }

get name() { return this._name } }

Si solo tiene un setter, puede cambiar el valor pero no acceder a él desde el exterior:

class Person {
  constructor(name) {
    this._name = name
  }

set name(value) { this._name = value } }

Los getters y setters son muy útiles cuando desea ejecutar algún código al cambiar el valor de la propiedad, o si desea crear una propiedad "calculada". Puede alterar los valores que devuelve utilizando un captador.

También puede ejecutar algún código, como iniciar sesión en la consola o en un archivo cuando se cambia un valor.


Más tutoriales de js: