Palabra clave this de JavaScript

En comparación con otros lenguajes, el operador this en JavaScript tiene un comportamiento ligeramente diferente.

En JavaScript, el operador this hace referencia al objeto al que pertenece.

Según la posición de uso, tiene diferentes valores:

• En el método, this hace referencia aObjeto propietario

• Por separado, this se refiere a全局对象

• 在函数中，this引用全局对象

• 在函数中，在严格模式下，this是未定义的

• 在事件中，this指的是接收事件的元素

• 像call()和apply()这样的方法，可以将其引用到任何对象

方法上下文

在对象方法中，this指代方法的user。

在下面的示例中，当调用user.getName()时，函数内部将this绑定到user对象：

var user = {
firstName: "Vishal",
lastName : "Choudhary",
age :　22,
getName : function() {
　return this.firstName　+　" "　+　this.lastName;
};
});
document.write(user.getName());　　　//　"Vishal Choudhary"

这里user对象是所有者getName的方法。

全局上下文

在全局执行上下文中（在任何函数之外），this无论是否处于严格模式下，都引用全局对象。

//　在Web浏览器中，窗口对象也是全局对象：
console.log(this === window);　　//　true
a =　50;
console.log(window.a);　//　50
this.b = "w3codebox";
console.log(window.b)　　//　"w3codebox"
console.log(b)　//　"w3codebox"

在浏览器窗口中，全局对象是[object Window]。

函数上下文

在函数内部，this值取决于函数的调用方式。

由于以下代码不在严格模式下，this因此默认为全局对象，即浏览器中的[object Window]：

function myFunc() {
return this;
};

在严格模式，然而this的值是undefined：

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

因此，在严格模式下，如果执行上下文未定义它，则它将保持未定义状态。

this在DOM事件处理程序中

当一个函数用作事件处理程序时，this将被设置为触发事件的元素：

let btn = document.querySelector("button");
btn.onclick = function() {
this.style.display = "none";
});

从内联事件处理程序调用代码时，会将this设置为放置监听器的元素：

<button onclick="this.style.display='none'">点击删除我</button>

这是另一个示例：

<button onclick="alert(this)">点击</button>

显式函数绑定

call()和apply()方法是预定义的JavaScript方法。

它们都可以用于调用以另一个对象作为参数的对象方法。

function add(c, d) {
return this.a　+　this.b　+　c　+　d;
};
var obj = {a:5, b:10});
add.call(obj,　5,　7);　　//　27
add.apply(obj, [10,　20]);　//　45

箭头函数（=>）

在箭头函数（=>）中，this始终指向它被创建时所处的词法作用域中的this。

在全局代码中，它将被设置为全局对象：

var globalObj = this;
var myFunc = (() => this);
document.write(myFunc() === globalObj);　　　//　true