en la programación orientada a objetos, una clase es una plantilla de código-programa extensible para crear objetos, proporcionando valores iniciales para el estado (variables miembro) y las implementaciones de comportamiento (funciones miembro o métodos).

en la práctica, a menudo necesitamos crear muchos objetos del mismo tipo, como usuarios, o bienes o lo que sea.

como ya sabemos por el Constructor de capítulo, operador «nuevo», new function puede ayudar con eso.,

pero en el JavaScript moderno, hay una construcción de «clase» más avanzada, que introduce grandes características nuevas que son útiles para la programación orientada a objetos.

de La «clase» de la sintaxis

La sintaxis básica es:

class MyClass { // class methods constructor() { ... } method1() { ... } method2() { ... } method3() { ... } ...}

a Continuación, utilice new MyClass() para crear un nuevo objeto con todos los métodos enumerados.

El constructor() método es llamado automáticamente por new, por lo que podemos inicializar el objeto.,

Por ejemplo:

class User { constructor(name) { this.name = name; } sayHi() { alert(this.name); }}// Usage:let user = new User("John");user.sayHi();

Cuando new User("John") se llama:

1. se crea Un nuevo objeto.
2. constructor ejecuta con el argumento dado y se asigna a this.name.

Then entonces podemos llamar a métodos de objeto, como user.sayHi().

¿Qué es una clase?

entonces, ¿qué es exactamente un class? Esa no es una entidad completamente nueva a nivel de lenguaje, como uno podría pensar.

desvelemos cualquier magia y veamos qué es realmente una clase. Eso ayudará a entender muchos aspectos complejos.

En JavaScript, una clase es un tipo de función.,

Aquí, echar un vistazo:

class User { constructor(name) { this.name = name; } sayHi() { alert(this.name); }}// proof: User is a functionalert(typeof User); // function

Lo class User {...} construir realmente hace es:

1. Crea una función con nombre User, que se convierte en el resultado de la declaración de la clase. El código de la función se toma del método constructor (se asume vacío si no escribimos dicho método).
2. almacena métodos de clase, como sayHi, En User.prototype.,

After new User object is created, when we call its method, it’s taken from the prototype, just as described in the chapter F. prototype. Así que el objeto tiene acceso a métodos de clase.,de class User declaración como:

Aquí está el código para hacer introspección:

no solo un azúcar sintáctico

a veces la gente dice que class es un «azúcar sintáctico» (sintaxis que está diseñada para hacer las cosas más fáciles de leer, pero no introduce nada nuevo), porque en realidad podríamos declarar lo mismo sin class palabra clave en absoluto:

el resultado de esta definición es aproximadamente el mismo., Por lo tanto, hay razones por las que class puede considerarse un azúcar sintáctico para definir un constructor junto con sus métodos prototipo.

aún así, hay diferencias importantes.

1. primero, una función creada por classestá etiquetada por una propiedad interna especial ]:"classConstructor". Así que no es del todo lo mismo que crearlo manualmente.

   el idioma comprueba esa propiedad en una variedad de lugares., Por ejemplo, a diferencia de una función regular, debe ser llamado con new:

   class User { constructor() {}}alert(typeof User); // functionUser(); // Error: Class constructor User cannot be invoked without 'new'

   También, una representación de cadena de un constructor de clase en la mayoría de los motores JavaScript se inicia con la «clase…»

   class User { constructor() {}}alert(User); // class User { ... }

   Hay otras diferencias, vamos a ver pronto.

2. Los métodos de clase no son enumerables.,Una definición de clase establece enumerablebandera a falsepara todos los métodos en el "prototype".

   eso es bueno, porque sifor..in sobre un objeto, generalmente no queremos sus métodos de clase.

3. las Clases siempre use strict.Todo el código dentro de la construcción de clase está automáticamente en modo estricto.

Además class sintaxis trae muchas otras características que exploraremos más adelante.,

expresión de clase

Al igual que las funciones, las clases se pueden definir dentro de otra expresión, pasarlas, devolverlas, asignarlas, etc.

he Aquí un ejemplo de una expresión de la clase:

let User = class { sayHi() { alert("Hello"); }};

Similar a la Función Denominada de Expresiones, expresiones de clase puede tener un nombre.,

si una expresión de clase tiene un nombre, es visible solo dentro de la clase:

incluso podemos hacer clases dinámicamente «bajo demanda», como esto:

Getters/setters

Al igual que los objetos literales, las clases pueden incluir getters/setters, propiedades calculadas, etc.

Aquí hay un ejemplo para user.name implementado usando get/set:

técnicamente, dicha declaración de clase funciona creando getters y setters en User.prototype.,

Calculada nombres

he Aquí un ejemplo con un calculada nombre de método de uso de los corchetes :

class User { () { alert("Hello"); }}new User().sayHi();

Tales características son fáciles de recordar, ya que se asemejan a la de literal de objetos.

campos de clase

Anteriormente, nuestras clases sólo había métodos.

«Class fields» es una sintaxis que permite añadir cualquier propiedad.,

Por ejemplo, vamos a añadir name propiedad class User:

class User { name = "John"; sayHi() { alert(`Hello, ${this.name}!`); }}new User().sayHi(); // Hello, John!

Así que simplemente escribir » = » en la declaración, y eso es todo.,

La diferencia importante de los campos de la clase es que son conjunto de objetos individuales, no de User.prototype:

class User { name = "John";}let user = new User();alert(user.name); // Johnalert(User.prototype.name); // undefined

también podemos asignar valores con el uso de expresiones más complejas y las llamadas a la función:

class User { name = prompt("Name, please?", "John");}let user = new User();alert(user.name); // John

Hacer métodos vinculados con los campos de la clase

Como se demostró en el capítulo enlace de Función funciones en JavaScript tienen una dinámica de this., Depende del contexto de la llamada.

así que si se pasa un método objeto y se llama en otro contexto, this ya no será una referencia a su objeto.

Por ejemplo, este código mostrará undefined:

El problema se llama «perder this«.

Hay dos enfoques para arreglarlo, como se discutió en el capítulo enlace de funciones:

1. pase una función de envoltura, como setTimeout(() => button.click(), 1000).
2. enlaza el método a object, por ejemplo, en el constructor.,

Los campos de clase proporcionan otra sintaxis bastante elegante:

el campo de clase click = () => {...} se crea por objeto, hay una función separada para cada objeto Button, con this dentro de él haciendo referencia a ese objeto. Podemos pasar button.clicken cualquier lugar, y el valor de this siempre será correcto.

eso es especialmente útil en el entorno del navegador, para los oyentes de eventos.,

resumen

la sintaxis básica de la clase se ve así:

MyClass es técnicamente una función (la que proporcionamos como constructor), mientras que los métodos, getters y setters se escriben en MyClass.prototype.

en los próximos capítulos aprenderemos más sobre las clases, incluyendo herencia y otras características.