¿Qué es la palabra clave 'esto' en JavaScript (programación orientada a objetos)

Ámbitos y contextos

Aunque a menudo se usan indistintamente, ámbitos y contextos son ligeramente diferentes.

Un alcance define el acceso a la variable:si una variable es accesible para el código en la parte actual de la aplicación. Por ejemplo, no se puede acceder a una variable declarada dentro de una función fuera de ella, ya que son ámbitos diferentes. .

Un contexto, sin embargo, es el objeto principal del código que se está ejecutando. Como un objeto puede contener varios métodos (que son funciones), cada método tendrá un ámbito diferente. (las funciones en sí) con el mismo contexto (el objeto principal).

Vea más sobre variables y alcances aquí.

Entonces, ¿qué es esto ?

esto es una palabra clave en JavaScript. Se usa como usaría cualquier variable.

esto se refiere a este objeto en el que está trabajando, ahora mismo, donde este está escrito en el código . Es decir, se refiere al contexto actual. .

Si está trabajando en una función , esto se refiere al objeto principal de la función. Si está trabajando en un objeto , esto se refiere al objeto.

JavaScript trata muchas cosas como objetos , así que aquí hay un resumen de lo esto se refiere en cada escenario.

esto Fuera de Métodos, Funciones, Objetos

Si esto se usa solo, fuera de cualquier clase principal, objeto, función, se refiere al objeto global.

var testVar = 9;
console.log(this.testVar); // Prints 9

Arriba, una variable global testVar se define. Para probar que esto hace referencia al objeto global, puede intentar acceder a this.testVar – que devuelve 9.

esto en un método (enlace de método de objeto)

Los objetos en JavaScript son de diferentes clases. Las clases pueden tener métodos – funciones que se pueden ejecutar en cada objeto de la clase dada para hacer cosas con él.

Al escribir código para un método, este siempre se referirá al objeto.

Por ejemplo:

class Car {
    constructor(make, model) {
        this.make = make;
        this.model = model;
    }
}

var fordCar = new Car('Ford', 'Model T');

Arriba, un coche se define la clase. Entonces se pueden crear objetos con esta clase. El constructor El método (una función) se utiliza para establecer los valores del Coche clase cuando se crea establecer atributos para la variable esto .

En este caso, un objeto llamado fordCar es creado. Cuando se ejecuta el constructor, este se refiere al fordCar objeto y establece los valores de marca/modelo que se pasaron como parámetros.

Enlace de funciones explícitas

Es posible cambiar lo esto hace referencia dentro de un método de objeto mediante call() y aplicar() métodos de ese objeto. llamar() y aplicar() son métodos JavaScript integrados que están disponibles para todos objetos de cualquier clase. Ambos métodos funcionan de manera similar y se diferencian en cómo se les pasan los argumentos adicionales después de proporcionar el contexto.

class Car {
    constructor(make, model) {
        this.make = make;
        this.model = model;
    }

    // makeModel method will return the make of model of the current object
    makeModel(){
        return this.make + ' ' + this.model;
    }
}

var fordCar = new Car('Ford', 'Model T');
var toyotaCar = new Car('Toyota', 'Hilux');

fordCar.makeModel.call(toyotaCar);  // Will return "Toyota Hilux" - even though it was called from the fordCar model, as the call method changed the context
fordCar.makeModel.apply(toyotaCar);  // Will return "Toyota Hilux" - even though it was called from the fordCar model, as the apply method changed the context

esto en una Función

Como se explicó anteriormente, funciones tener ámbitos pero no proporciona un contexto . Entonces, dentro de una función independiente sin clase ni objeto principal, esto se referirá al contexto global.

var testVar = 9;

function testFunction(){
    console.log(this.testVar); // Prints 9
}

testFunction(); // Run the function defined above

Funciones y modo estricto

Modo estricto es una configuración opcional que se puede habilitar en JavaScript, lo que le impide hacer algunas cosas que normalmente puede hacer. Estas cosas tienden a ser cosas que se eliminarán de futuras revisiones de JavaScript o cosas que se consideran "descuidadas":código que es válido pero escrito de una manera que probablemente cause errores o sea difícil de interpretar.

Entonces, en modo estricto, este NO referirse al objeto global cuando se usa en una función independiente. No hace referencia a nada y devolverá indefinido .

'use strict';

var testVar = 9;

function testFunction(){
    console.log(this.testVar); // undefined
}

testFunction(); // Run the function defined above

esto en controladores de eventos HTML

Cuando este se llama desde dentro de un controlador de eventos en un elemento HTML, se refiere al propio elemento HTML.

<button onclick="console.log(this);">
    Print information on this HTML element
</button>

El código HTML anterior imprimirá información en  elemento HTML a la consola de JavaScript.

eso =esto; – ¿Qué?

A veces encontrará el siguiente código:

var that = this;

El codificador está asignando el valor actual de esto a una nueva variable llamada esa .

Están haciendo esto porque el contexto está a punto de cambiar (y con él, el valor de esto ), pero quieren conservar el acceso al valor actual de esto .

Si el alcance no está cambiando, asignando esto a una nueva variable le permite seguir accediendo al contexto anterior a través de la variable recién creada (llamada esa aquí, pero puedes llamarlo como quieras).

¿Todavía tienes preguntas? Aquí está el enlace al recurso de Mozilla sobre esto .