Información sobre clases de JavaScript

Introdución

JavaScript é un idioma baseado en prototipados e cada obxecto ten unha propiedade interna oculta chamada ] que se pode empregar para ampliar propiedades e métodos de obxectos. Pode obter máis información sobre os prototipos da nosa información de titorías sobre os prototipos ea herdanza en JavaScript.

Ata hai pouco, os esforzos utilizaban funcións de construción para imitar un patrón de deseño orientado a obxectos en JavaScript. A especificación de idioma de ECMAScript 2015, moitas veces chamada ES6, introduciu clases en linguaxe JavaScript. As clases de JavaScript realmente non ofrecen unha funcionalidade adicional e moitas veces se describen como elementos que proporcionan “azucre sintáctico” en comparación cos prototipos e herdanza, xa que ofrecen sintaxe máis limpa e máis limpa. Debido a que outras linguaxes de programación usan clases, a sintaxe de clase JavaScript permite aos desenvolvedores alternar as linguas máis directamente.

As clases son funcións

A clase JavaScript é un tipo de función. As clases están declaradas coa palabra clave class. Imos usar a función de sintaxe de expresión para arrincar unha sintaxe de expresión de función e clase para arrincar unha clase.

// Initializing a function with a function expressionconst x = function() {}

// Initializing a class with a class expressionconst y = class {}

Podemos acceder a ] dun obxecto usando o método

. Usaremos isto para probar a función baleira que creamos.

Object.getPrototypeOf(x);

Output
ƒ () { }

Tamén podemos usar ese método en a clase que acaba de crear.

Object.getPrototypeOf(y);

Output
ƒ () { }

o código declarado con function e class Mostra unha función ]. Con prototipos, calquera función pode ser convertida nunha instancia de constructor medio a palabra clave new.

const x = function() {}// Initialize a constructor from a functionconst constructorFromFunction = new x();console.log(constructorFromFunction);

Output
x {}constructor: ƒ ()

tamén.

const y = class {}// Initialize a constructor from a classconst constructorFromClass = new y();console.log(constructorFromClass);

Output
y {}constructor: class

Estes exemplos de Os construtores de prototipos, se non, están baleiros. Non obstante, podemos ver que, baixo a sintaxe, ambos métodos alcanzan o mesmo resultado final.

Definir unha clase

No prototipo Tutorial e herdanza, preparamos un exemplo en función da creación de caracteres Nun xogo de roles baseados en texto. Continuaremos con ese exemplo aquí para actualizar a sintaxe das funcións ás clases.

Unha función constructora está inicializada con varios parámetros que serían asignados como propiedades de this , en alusión á propia función. A primeira letra do identificador sería maiúscula por convención.

// Initializing a constructor functionfunction Hero(name, level) { this.name = name; this.level = level;}

Cando traducimos isto á sintaxe de clase, que é mostrar entón, vemos que a súa estrutura é bastante similar.

Sabemos que unha función de constructor está deseñada Ser un esquema de obxecto para o uso de maiúsculas na primeira letra do inicializador (opcional) e a través da familiaridade coa sintaxe. A palabra clave class comunícase de forma máis directa o obxectivo da nosa función.

A única diferenza na sintaxe de inicialización ten que ver co uso da palabra clave class no canto de e coa asignación das propiedades dentro dun método constructor().

Definir métodos

A práctica común coas funcións de construción é asignar métodos directamente a prototype no canto de inicialización, como se pode ver no a continuación.

function Hero(name, level) { this.name = name; this.level = level;}// Adding a method to the constructorHero.prototype.greet = function() { return `${this.name} says hello.`;}

con clases, esta sintaxe é simplificada e a O método pódese engadir directamente ás clases. Ao usar a definición do método do método introducido en ES6, conséguese unha concisión aínda maior ao definir un método.

class Hero { constructor(name, level) { this.name = name; this.level = level; } // Adding a method to the constructor greet() { return `${this.name} says hello.`; }}

Imos observar estas propiedades e métodos en acción. Crearemos unha nova instancia de Hero usando a palabra clave new e asigna algúns valores.

Se imprimimos máis información sobre o noso novo obxecto con , podemos apreciar máis detalles sobre o que sucede coa inicialización de clase.

Output
Hero {name: "Varg", level: 1}__proto__: ▶ constructor: class Hero ▶ greet: ƒ greet()

Podemos ver no resultado de que as funcións constructor() e greet() aplicou a __proto__ ou ] de hero1 e non directamente como Un método no obxecto hero1. Aínda que isto se revela na creación de funcións de constructor, non é evidente ao crear clases. As clases permiten unha sintaxe máis sinxela e sucinta, aínda que sacrifican algunha claridade no proceso.

Expandir unha clase

Unha característica vantaxosa das funcións e as clases de construción é que poden ser ampliadas a novos esquemas de obxectos baseados no elemento principal. Isto impide a repetición de código para obxectos similares, pero necesitan características adicionais ou máis específicas.

Pode crear novas funcións de construción do elemento principal usando o método call(). No seguinte exemplo, crearemos unha clase de caracteres máis específica chamada Mage e asignaremos as propiedades de Hero usando , ademais de engadir unha propiedade.

// Creating a new constructor from the parentfunction Mage(name, level, spell) { // Chain constructor with call Hero.call(this, name, level); this.spell = spell;}

Neste punto, Podemos crear unha nova instancia de Mage usando as mesmas propiedades de Hero, así como un novo que engadimos.

Ao enviar hero2 á consola, podemos apreciar que creamos unha nova clase Mage baseado na constructora.

Output
Mage {name: "Lejon", level: 2, spell: "Magic Missile"}__proto__: ▶ constructor: ƒ Mage(name, level, spell)

con clases ES6, a palabra clave úsase no seu lugar de call para acceder ás funcións principais. Usaremos para referirse á clase principal.

// Creating a new class from the parentclass Mage extends Hero { constructor(name, level, spell) { // Chain constructor with super super(name, level); // Add a new property this.spell = spell; }}

Agora podemos crear unha nova instancia de Mage do mesmo xeito.

Prime hero2 na consola e veremos o resultado.

Output
Mage {name: "Lejon", level: 2, spell: "Magic Missile"}__proto__: Hero ▶ constructor: class Mage

O resultado é case exactamente o mesmo, coa diferenza que na construción da clase ] está ligada ao elemento principal; Neste caso, Hero.

A continuación hai unha comparación paralela de todo o proceso de inicialización, a incorporación de métodos e herdanza dunha función de constructor e unha clase.

function Hero(name, level) { this.name = name; this.level = level;}// Adding a method to the constructorHero.prototype.greet = function() { return `${this.name} says hello.`;}// Creating a new constructor from the parentfunction Mage(name, level, spell) { // Chain constructor with call Hero.call(this, name, level); this.spell = spell;}

// Initializing a classclass Hero { constructor(name, level) { this.name = name; this.level = level; } // Adding a method to the constructor greet() { return `${this.name} says hello.`; }}// Creating a new class from the parentclass Mage extends Hero { constructor(name, level, spell) { // Chain constructor with super super(name, level); // Add a new property this.spell = spell; }}

aínda que A sintaxe é bastante diferente, o resultado subxacente é case o mesmo para ambos métodos. As clases ofrécennos unha alternativa máis concisa para crear esquemas de obxectos e as funcións de constructor describen máis precisamente o que ocorre no fondo.

Conclusión

Neste tutorial, incorporou coñecementos sobre as semellanzas e Diferenzas entre as funcións de constructor de JavaScript e as clases ES6. Tanto as clases como as funcións de construción imitan un modelo de herdanza orientado a obxectos para JavaScript, que é un idioma de patrimonio baseado en prototipos.

A comprensión do patrimonio prototípico é fundamental para realizar eficazmente como desenvolvedor de JavaScript. Familiarizarse con clases é moi útil, xa que nas populares bibliotecas de JavaScript que a sintaxe úsase a miúdo class.