Clases

JavaScript usa un modelo de herencia de prototipo: cada objeto hereda los campos (propiedades) y métodos del objeto prototipo.

class

La palabra clave class se utiliza para definir una clase:

class MyClass {
  // métodos de clase
  constructor() { ... }
  method1() { ... }
  method2() { ... }
  method3() { ... }
  ...
}

Esta sintaxis se llama declaración de clase.

Los métodos en una clase no están separados por una coma

La sintaxis de las clases es diferente de los objetos literales. No se requieren comas dentro de las clases.

La clase puede no tener un nombre. Con una expresión de clase, puede asignar una clase a una variable :

const UserClass = class {
  // cuerpo de clase
}

Las clases se pueden exportar como módulos. Este es un ejemplo de una exportación predeterminada:

export default class User {
  // cuerpo de clase
}

Y aquí hay un ejemplo de una exportación con nombre:

export class User {
  // cuerpo de clase
}

Una clase se vuelve útil cuando crea una instancia de la clase. Una instancia es un objeto que contiene los datos y el comportamiento descrito clase.

El operador new crea una instancia de una clase en JavaScript como esta: instance = new Class().

Por ejemplo, puede crear una instancia de la clase Usuario 👤 usando el operador new:

const myUser = new User()

new User() crea una instancia de la clase User 👤.

Video

Inicialización: constructor()

constructor(...) es un método especial en el cuerpo de una clase que inicializa una instancia. Este es el lugar donde puede establecer los valores iniciales de los campos o realizar cualquier ajuste en los objetos.

En el siguiente ejemplo, el constructor establece el valor inicial del campo name:

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

El constructor de la clase User toma un parámetro name, que se usa para establecer el valor inicial del campo 'este.nombre'.

Dentro del constructor, el valor de this es igual a la instancia recién creada.

Los argumentos utilizados para instanciar la clase se convierten en parámetros del constructor :

Editor en vivo

function learnJavaScript() { class User { constructor(name) { name // => 'Jon Snow' this.name = name } } const user = new User('Jon Snow') // Aquí puedes cambiar el valor return user.name }

function learnJavaScript() {
  class User {
    constructor(name) {
      name // => 'Jon Snow'
      this.name = name
    }
  }

  const user = new User('Jon Snow') // Aquí puedes cambiar el valor
  return user.name
}

Resultado

Loading...

El parámetro name dentro del constructor se establece en Jon Snow.

Si no define un constructor para una clase, se crea un constructor predeterminado. El constructor predeterminado es una función vacía⚙️ que no modifica la instancia.

Una clase solo puede tener un método llamado constructor.

Clases de rechazo

Ya que en el curso de nuestra escuela enseñamos a desarrollar aplicaciones móviles utilizando la biblioteca [React] (https://ru.reactjs.org), donde la innovación es React Hooks te permite usar el estado y otras características de React sin escribir clases. Por lo tanto, ya no tiene sentido hablar de clases, ya que las hemos abandonado.

¿Problemas?

Escribe en Discord o Telegram chat y suscríbete a nuestras noticias

Preguntas:

¿Cuál es la palabra clave para definir una clase?

1. constructor()
2. class
3. this

Si los métodos dentro de una clase están separados por una coma.

1. true
2. false

¿Cuántos métodos constructor() pueden estar en una clase?

1. Ilimitado
2. Hasta diez
3. Solo uno

Para comprender cuánto ha aprendido esta lección, realice una prueba en la aplicación móvil de nuestra escuela sobre este tema o en nuestro bot de Telegram.

Enlaces:

1. MDN web docs
2. Learn JavaScript

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Philipp Dvinyaninov

Dmitriy Vasilev 💵

Resoner2005 🐛 🎨 🖋

Navernoss 🖋 🐛 🎨