CLASES DE JAVESCRIPT

Introducción

Tipo de Clases de JavaScript. JavaScript es un lenguaje basado en prototipos, y cada objeto en JavaScript tiene una propiedad interna oculta llamada Prototype que se puede usar para extender propiedades y métodos de objetos. Puede leer más sobre prototipos en nuestro tutorial Comprender los prototipos y la herencia en JavaScript .

Hasta hace poco, los desarrolladores industriosos usaban funciones de constructor para imitar un patrón de diseño orientado a objetos en JavaScript. La especificación del lenguaje ECMAScript 2015, a menudo denominada ES6, introdujo las clases en el lenguaje JavaScript. Las clases en JavaScript en realidad no ofrecen funcionalidad adicional, y se describen a menudo como que proporcionan "azúcar sintáctica" sobre prototipos y herencia, ya que ofrecen una sintaxis más limpia y más elegante. Debido a que otros lenguajes de programación usan clases, la sintaxis de clase en JavaScript hace que sea más sencillo para los desarrolladores moverse entre idiomas.

Las clases son funciones

Una clase de JavaScript es un tipo de función. Las clases se declaran con la palabra clave class . Utilizaremos la sintaxis de expresión de función para inicializar una función y la sintaxis de expresión de clase para inicializar una clase.

// Initializing a function with a function expression
const x = function() {}

// Initializing a class with a class expression
const y = class {}

Podemos acceder al Prototype de un objeto utilizando el método Object.getPrototypeOf() . Vamos a usar eso para probar la función vacía que creamos.

Object.getPrototypeOf(x);

Output



ƒ () { [native code] }

También podemos usar ese método en la clase que acabamos de crear.

Object.getPrototypeOf(y);

Output



ƒ () { [native code] }

El código declarado con function y class devuelve una función Prototype . Con los prototipos, cualquier función puede convertirse en una instancia de constructor utilizando la new palabra clave.

const x = function() {}

// Initialize a constructor from a function
const constructorFromFunction = new x();

console.log(constructorFromFunction);

Output



x {}
constructor: ƒ ()

Esto se aplica a las clases también.

const y = class {}

// Initialize a constructor from a class
const constructorFromClass = new y();

console.log(constructorFromClass);

Output









y {}
constructor: class

Estos prototipos de ejemplos de constructores están vacíos, pero podemos ver cómo debajo de la sintaxis, ambos métodos están logrando el mismo resultado final.

Definiendo una clase

En el tutorial de prototipos y herencia , creamos un ejemplo basado en la creación de personajes en un juego de rol basado en texto. Continuemos con ese ejemplo aquí para actualizar la sintaxis de las funciones a las clases.

Una función constructor se inicializa con una serie de parámetros, que se asignarían como propiedades de this , refiriéndose a la función en sí misma. La primera letra del identificador estaría en mayúscula por convención.

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

Cuando traducimos esto a la sintaxis de clase , que se muestra a continuación, vemos que está estructurado de manera muy similar.

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

Sabemos que una función de constructor debe ser un plano de objeto mediante el uso de mayúsculas de la primera letra del inicializador (que es opcional) y mediante la familiaridad con la sintaxis. La palabra clave class comunica de manera más directa el objetivo de nuestra función.

La única diferencia en la sintaxis de la inicialización es usar la palabra clave class lugar de la function y asignar las propiedades dentro de un método constructor() .

Definición de métodos

La práctica común con las funciones de constructor es asignar métodos directamente al prototype lugar de en la inicialización, como se ve en el método de greet() continuación.

function Hero(name, level) {
    this.name = name;
    this.level = level;
}

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

Con las clases, esta sintaxis se simplifica y el método se puede agregar directamente a la clase. Usando la abreviatura de definición de método introducida en ES6, definir un método es un proceso aún más conciso.

class Hero {
    constructor(name, level) {
        this.name = name;
        this.level = level;
    }

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

Echemos un vistazo a estas propiedades y métodos en acción. Crearemos una nueva instancia de Hero utilizando la new palabra clave y asignaremos algunos valores.

const hero1 = new Hero('Varg', 1);

Si imprimimos más información sobre nuestro nuevo objeto con console.log(hero1) , podemos ver más detalles sobre lo que está sucediendo con la inicialización de la clase.

Output









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

Podemos ver en el resultado que las funciones constructor() y greet() se aplicaron al __proto__ , o Prototype de hero1 , y no directamente como un método en el objeto hero1 . Si bien esto es claro al hacer funciones de constructor, no es obvio al crear clases. Las clases permiten una sintaxis más simple y sucinta, pero sacrifican algo de claridad en el proceso.

Extendiendo una clase

Una característica ventajosa de las clases y funciones de constructor es que se pueden extender a nuevos planos de objetos basados ​​en el elemento primario. Esto evita la repetición de código para objetos que son similares pero que necesitan algunas características adicionales o más específicas.

Se pueden crear nuevas funciones de constructor desde el padre utilizando el método call() . En el siguiente ejemplo, crearemos una clase de caracteres más específica llamada Mage , y le asignaremos las propiedades de Hero usando call() , además de agregar una propiedad adicional.

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

    this.spell = spell;
}

En este punto, podemos crear una nueva instancia de Mage utilizando las mismas propiedades que Hero y una nueva que agregamos.

const hero2 = new Mage('Lejon', 2, 'Magic Missile');

Al enviar hero2 a la consola, podemos ver que hemos creado un nuevo Mage basado en el constructor.

Output









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

Con las clases ES6, la palabra clave super se usa en lugar de call para acceder a las funciones principales. Usaremos extends para referirnos a la clase padre.

// Creating a new class from the parent
class Mage extends Hero {
    constructor(name, level, spell) {
        // Chain constructor with super
        super(name, level);

        // Add a new property
        this.spell = spell;
    }
}

Ahora podemos crear una nueva instancia de Mage de la misma manera.

const hero2 = new Mage('Lejon', 2, 'Magic Missile');

Imprimiremos hero2 en la consola y hero2 la salida.

Output









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

La salida es casi exactamente la misma, excepto que en la construcción de la clase, el Prototype está vinculado al padre, en este caso Hero .

A continuación se muestra una comparación lado a lado de todo el proceso de inicialización, adición de métodos y herencia de una función de constructor y una clase.

function Hero(name, level) {
    this.name = name;
    this.level = level;
}

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

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

    this.spell = spell;
}

// Initializing a class
class 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 parent
class Mage extends Hero {
    constructor(name, level, spell) {
        // Chain constructor with super
        super(name, level);

        // Add a new property
        this.spell = spell;
    }
}

Aunque la sintaxis es bastante diferente, el resultado subyacente es casi el mismo entre ambos métodos. Las clases nos brindan una forma más concisa de crear planos de objetos, y las funciones de constructor describen con mayor precisión lo que sucede debajo del capó.

Conclusión

En este tutorial, aprendimos sobre las similitudes y diferencias entre las funciones del constructor de JavaScript y las clases de ES6. Tanto las clases como los constructores imitan un modelo de herencia orientado a objetos a JavaScript, que es un lenguaje de herencia basado en prototipos.

Comprender la herencia prototípica es primordial para ser un desarrollador de JavaScript efectivo. Estar familiarizado con las clases es extremadamente útil, ya que las populares bibliotecas de JavaScript como React hacen un uso frecuente de la sintaxis de la class .