Palabra clave this de JavaScript

Ejemplo

var person = {
  firstName: "Bill",
  lastName : "Gates",
  id       : 678,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

Prueba personalmente

¿Qué es this?

JavaScript this la palabra clave se refiere al objeto al que pertenece.

tiene diferentes valores, dependiendo de su ubicación de uso:

  • En el método,this se refiere al objeto propietario.
  • En el caso individual,this se refiere al objeto global.
  • En la función,this se refiere al objeto global.
  • En la función, en modo estricto,this es undefined.
  • En el evento,this se refiere al elemento que recibe el evento.

como call() y apply() Estos métodos pueden referirse a cualquier objeto.

this en el método

En los métodos del objeto,this se refiere al "propietario" de este método.

En el ejemplo más alto de esta página,this se refiere al objeto person.

el objeto person es el propietario del método fullName.

fullName : function() {
  return this.firstName + " " + this.lastName;
}

Prueba personalmente

this individual

En el uso individual, el propietario es el objeto global, por lo tanto this se refiere al objeto global.

En la ventana del navegador, el objeto global es [object Window]：

Ejemplo

var x = this;

Prueba personalmente

En el modo estricto, si se usa solo, this se refiere al objeto global [object Window]：

Ejemplo

"use strict";
var x = this;

Prueba personalmente

this en la función (por defecto)

en un programa de función de JavaScript, el enlace por defecto del propietario de la función this。

por lo tanto, en una función,this se refiere al objeto global [object Window]。

Ejemplo

function myFunction() {
  return this;
}

Prueba personalmente

this en la función (modo estricto)

El modo estricto de JavaScript no permite el enlace por defecto.

por lo tanto, al usarlo en una función, en modo estricto,this es undefined (undefined）。

Ejemplo

"use strict";
function myFunction() {
  return this;
}

Prueba personalmente

this en el programa de manejo de eventos

En los programas de manejo de eventos de HTML,this se refiere al elemento HTML que recibe este evento:

Ejemplo

<button onclick="this.style.display='none'">
  ¡Haga clic aquí para eliminarme!
</button>

Prueba personalmente

enlazamiento de métodos de objeto

En este ejemplo,this es el objeto person (el objeto person es el "propietario" de esta función):

Ejemplo

var person = {
  firstName  : "Bill",
  lastName   : "Gates",
  id         : 678,
  myFunction : function() {
    return this;
  }
};

Prueba personalmente

Ejemplo

var person = {
  firstName: "Bill",
  lastName : "Gates",
  id       : 678,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

Prueba personalmente

En otras palabras,this.firstName significa thisdel objeto firstName Atributos.

Enlazado de función explícito

call() y apply() Métodos son métodos JavaScript predefinidos.

Ambos se pueden usar para invocar métodos de un objeto con otro objeto como parámetro.

Puede leer más sobre call() y apply() más información.

En el siguiente ejemplo, al llamar a person1.fullName utilizando person2 como parámetro,this Se referirá a person2, incluso si es un método de person1:

Ejemplo

var person1 = {
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}
var person2 = {
  firstName: "Bill",
  lastName: "Gates",
}
person1.fullName.call(person2);  // Devolverá "Bill Gates"

Prueba personalmente