esto en JavaScript

thises un valor que tiene diferentes valores dependiendo de dónde se use. No conocer este pequeño detalle de JavaScript puede causar muchos dolores de cabeza, por lo que vale la pena tomarse 5 minutos para aprender todos los trucos.

thises una palabra clave que tiene diferentes valores dependiendo de dónde se use.

No conocer este pequeño detalle de JavaScript puede causar muchos dolores de cabeza, por lo que vale la pena tomarse 5 minutos para aprender todos los trucos.

thisen modo estricto

Fuera de cualquier objeto,thisenModo estrictoes siempreundefined.

Observe que mencioné el modo estricto. Si el modo estricto está deshabilitado (el estado predeterminado si no agrega explícitamente'use strict'en la parte superior de su archivo), se encuentra en el llamadomodo descuidado, ythis- a menos que se mencionen algunos casos específicos a continuación - tiene el valor del objeto global.

Lo que significawindowen un contexto de navegador.

thisen métodos

Un método es una función adjunta a un objeto.

Puedes verlo en varias formas.

Aquí hay uno:

const car = {
  maker: 'Ford',
  model: 'Fiesta',

drive() { console.log(Driving a </span><span style="color:#e6db74">${</span><span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">maker</span><span style="color:#e6db74">}</span><span style="color:#e6db74"> </span><span style="color:#e6db74">${</span><span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">model</span><span style="color:#e6db74">}</span><span style="color:#e6db74"> car!) } }

car.drive() //Driving a Ford Fiesta car!

En este caso, usando una función regular,thisse vincula automáticamente al objeto.

Nota: la declaración del método anterior es la misma quedrive: function() {…, Pero más corto:

const car = {
  maker: 'Ford',
  model: 'Fiesta',

drive: function() { console.log(Driving a </span><span style="color:#e6db74">${</span><span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">maker</span><span style="color:#e6db74">}</span><span style="color:#e6db74"> </span><span style="color:#e6db74">${</span><span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">model</span><span style="color:#e6db74">}</span><span style="color:#e6db74"> car!) } }

Lo mismo funciona en este ejemplo:

const car = {
  maker: 'Ford',
  model: 'Fiesta'
}

car.drive = function() { console.log(Driving a </span><span style="color:#e6db74">${</span><span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">maker</span><span style="color:#e6db74">}</span><span style="color:#e6db74"> </span><span style="color:#e6db74">${</span><span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">model</span><span style="color:#e6db74">}</span><span style="color:#e6db74"> car!) }

car.drive() //Driving a Ford Fiesta car!

Una función de flecha no funciona de la misma manera, ya que está ligada léxicamente:

const car = {
  maker: 'Ford',
  model: 'Fiesta',

drive: () => { console.log(Driving a </span><span style="color:#e6db74">${</span><span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">maker</span><span style="color:#e6db74">}</span><span style="color:#e6db74"> </span><span style="color:#e6db74">${</span><span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">model</span><span style="color:#e6db74">}</span><span style="color:#e6db74"> car!) } }

car.drive() //Driving a undefined undefined car!

Vinculación de funciones de flecha

No puede vincular un valor a una función de flecha, como lo hace con las funciones normales.

No es posible debido a la forma en que funcionan.thisesligado léxicamente, lo que significa que su valor se deriva del contexto en el que se definen.

Pasar explícitamente un objeto para usarlo comothis

JavaScript ofrece algunas formas de mapearthisa cualquier objeto que desee.

Usandobind(), en eldeclaración de funciónpaso:

const car = {
  maker: 'Ford',
  model: 'Fiesta'
}

const drive = function() { console.log(Driving a </span><span style="color:#e6db74">${</span><span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">maker</span><span style="color:#e6db74">}</span><span style="color:#e6db74"> </span><span style="color:#e6db74">${</span><span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">model</span><span style="color:#e6db74">}</span><span style="color:#e6db74"> car!) }.bind(car)

drive() //Driving a Ford Fiesta car!

También puede vincular un método de objeto existente para reasignar suthisvalor:

const car = {
  maker: 'Ford',
  model: 'Fiesta',

drive() { console.log(Driving a </span><span style="color:#e6db74">${</span><span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">maker</span><span style="color:#e6db74">}</span><span style="color:#e6db74"> </span><span style="color:#e6db74">${</span><span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">model</span><span style="color:#e6db74">}</span><span style="color:#e6db74"> car!) } }

const anotherCar = { maker: ‘Audi’, model: ‘A4’ }

car.drive.bind(anotherCar)() //Driving a Audi A4 car!

Usandocall()oapply(), en elinvocación de funciónpaso:

const car = {
  maker: 'Ford',
  model: 'Fiesta'
}

const drive = function(kmh) { console.log(Driving a </span><span style="color:#e6db74">${</span><span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">maker</span><span style="color:#e6db74">}</span><span style="color:#e6db74"> </span><span style="color:#e6db74">${</span><span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">model</span><span style="color:#e6db74">}</span><span style="color:#e6db74"> car at </span><span style="color:#e6db74">${</span><span style="color:#a6e22e">kmh</span><span style="color:#e6db74">}</span><span style="color:#e6db74"> km/h!) }

drive.call(car, 100) //Driving a Ford Fiesta car at 100 km/h! drive.apply(car, [100]) //Driving a Ford Fiesta car at 100 km/h!

El primer parámetro al que le pasascall()oapply()siempre está obligado athis. La diferencia entre call () y apply () es solo que el segundo quiere una matriz como lista de argumentos, mientras que el primero acepta un número variable de parámetros, que pasa como argumentos de función.

El caso especial de los controladores de eventos del navegador

En las devoluciones de llamada de los controladores de eventos,thisse refiere al elemento HTML que recibió el evento:

document.querySelector('#button').addEventListener('click', function(e) {
  console.log(this) //HTMLElement
}

Puedes vincularlo usando

document.querySelector('#button').addEventListener(
  'click',
  function(e) {
    console.log(this) //Window if global, or your context
  }.bind(this)
)

Más tutoriales de js: