JavaScript 的 this 关键字
示例
const person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
自己试试 »
什么是 this?
在 JavaScript 中，this 关键字指的是一个 对象。
this 关键字指的是 不同的对象，具体取决于它的使用方式。
在对象方法中，this 指的是该 对象。 |
单独使用时，this 指的是 全局对象。 |
在函数中，this 指的是 全局对象。 |
在严格模式下的函数中，this 为 undefined。 |
在事件中，this 指的是接收该事件的 元素。 |
诸如 call()、apply() 和 bind() 之类的方法可以将 this 指向 任何对象。 |
注意
this 不是一个变量。它是一个关键字。你不能更改 this 的值。
this 在方法中
在对象方法中使用时，this 指的是该 对象。
在页面顶部的示例中，this 指的是 person 对象。
因为 fullName 方法是 person 对象的方法。
fullName : function() {
return this.firstName + " " + this.lastName;
}
自己试试 »
this 单独使用
单独使用时，this 指的是 全局对象。
因为 this 在全局作用域中运行。
在浏览器窗口中，全局对象是 [object Window]
在 严格模式 下，单独使用时，this 也指代 全局对象
this 在函数中（默认）
在函数中，全局对象 是 this 的默认绑定。
在浏览器窗口中，全局对象是 [object Window]
this 在函数中（严格模式）
JavaScript 严格模式 不允许默认绑定。
因此，在严格模式下，在函数中使用时，this 为 undefined。
this 在事件处理程序中
在 HTML 事件处理程序中，this 指代接收事件的 HTML 元素
对象方法绑定
在以下示例中，this 是 person 对象
示例
const person = {
firstName : "John",
lastName : "Doe",
id : 5566,
myFunction : function() {
return this;
}
};
自己试试 »
示例
const person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
自己试试 »
即 this.firstName 是 this（person 对象）的 firstName 属性。
显式函数绑定
call() 和 apply() 方法是预定义的 JavaScript 方法。
它们都可以用于以另一个对象作为参数调用对象方法。
以下示例使用 person2 作为参数调用 person1.fullName，this 指代 person2，即使 fullName 是 person1 的方法
示例
const person1 = {
fullName: function() {
return this.firstName + " " + this.lastName;
}
}
const person2 = {
firstName:"John",
lastName: "Doe",
}
// 返回 "John Doe"
person1.fullName.call(person2);
函数借用
使用 bind() 方法，一个对象可以借用另一个对象的方法。
此示例创建了 2 个对象（person 和 member）。
member 对象借用了 person 对象的 fullname 方法
示例
const person = {
firstName:"John",
lastName: "Doe",
fullName: function () {
return this.firstName + " " + this.lastName;
}
}
const member = {
firstName:"Hege",
lastName: "Nilsen",
}
let fullName = person.fullName.bind(member);
自己试试 »
This 优先级
要确定 this 指代哪个对象；请使用以下优先级顺序。
| 优先级 | 对象 |
| 1 | bind() |
| 2 | apply() 和 call() |
| 3 | 对象方法 |
| 4 | 全局作用域 |
this 是否在使用 bind() 调用的函数中？
this 是否在使用 apply() 调用的函数中？
this 是否在使用 call() 调用的函数中？
this 是否在对象函数（方法）中？
this 是否在全局作用域中的函数中？
