编辑这个页面须要登录或更高权限！

JavaScript this 关键字

与其他语言相比，this关键字在JavaScript中的行为略有不同。

JavaScript中，this关键字引用其所属的对象。

根据使用位置，它具有不同的值：

  • 在方法中，this引用所有者对象

  • 单独地，this指的是全局对象

  • 在函数中，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 = "NHOOO";
console.log(window.b)  // "NHOOO"
console.log(b) // "NHOOO"
测试看看‹/›

在浏览器窗口中，全局对象是[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
测试看看‹/›
JavaScript 常见错误JavaScript 严格模式(use strict)

JavaScript菜鸟教程
JavaScript 对象
JavaScript 函数
JS HTML DOM
JS 浏览器BOM
AJAX 菜鸟教程
JavaScript 参考手册