在 JavaScript 中，'this' 关键字包含了对当前对象的引用。它代表了函数或当前代码的上下文，并且用来访问当前对象的属性和方法。
当 'this' 关字在函数内部使用时，它指的是该函数所调用的对象。
JavaScript 中的函数也是对象，因此可以在函数中使用 'this' 关键字。
'this' 关键字指向的对象
'this' 关键字所指的对象取决于其使用的上下文。
例如：
-
在全局作用域中，'this' 关键字指的是 window 对象（在浏览器环境中）。
-
当你在函数内部使用 'this' 关键字时，它通常代表全局作用域或 'window' 对象。
-
在严格模式下使用 'this' 关键字时，它的值是
undefined。
-
当 'this' 在对象方法中使用时，它指的是该对象。
-
在事件处理器中，'this' 关键字指的是触发事件的元素。
-
使用
call(), apply(), 或 bind() 方法时，'this' 可以指向其他对象。
语法
使用 'this' 关键字的语法如下：
this.property
或者
this.method();
你可以使用 'this' 关键字来访问属性和执行对象的方法。
JavaScript 中全局作用域下的 'this'
当你在全局作用域中使用 'this' 关键字时，它代表全局对象（如浏览器中的 window）。你可以在全局作用域中使用 'this' 关键字来访问全局变量。
示例
在下面的代码中，我们在全局作用域中定义了一个变量 num 和一个函数 printNum()。之后，我们使用 'this' 关键字来访问全局变量和函数。
<html>
<body>
<div id="demo"></div>
<script>
const output = document.getElementById('demo');
var num = 10;
function printNum() {
output.innerHTML += "Inside the function: " + num + "<br>";
}
this.printNum();
output.innerHTML += "Outside the function: " + this.num + "<br>";
</script>
</body>
</html>
输出：
Inside the function: 10
Outside the function: 10
JavaScript 中函数内的 'this'
当你在函数内使用 'this' 关键字时，它通常代表全局作用域或 'window' 对象。
示例
在下面的代码中，我们在函数内部使用了 'this' 关键字。你可以看到，我们在函数内部使用 'this' 关键字来访问全局变量。
<html>
<body>
<div id="demo"></div>
<script>
const output = document.getElementById('demo');
var message = "Hello World!";
function printMessage() {
var message = "Hi! How are you?";
output.innerHTML = "The message is: " + this.message;
}
printMessage();
</script>
</body>
</html>
输出：
The message is: Hello World!
在严格模式下的函数内的 'this'
当你在一个函数内部使用 'this' 关键字并且该函数处于严格模式下时，它不会指向任何对象。'this' 关键字的值变为 undefined。
示例
在下面的代码中，我们在严格模式下使用了 'this' 关键字。它打印出 undefined。
<html>
<body>
<div id="demo"></div>
<script>
let output = document.getElementById('demo');
var message = "Hello World!";
function test() {
"use strict";
output.innerHTML = "The value of this in the strict mode is: " + this;
}
test();
</script>
</body>
</html>
输出：
The value of this in the strict mode is: undefined
构造函数中的 'this'
当你将函数作为构造函数来创建对象时，'this' 关键字指的是该对象。
示例
在下面的代码中，我们定义了一个构造函数 Animal()。我们在构造函数内部使用了 'this' 关键字来初始化对象的属性。
<html>
<body>
<div id="demo"></div>
<script>
const output = document.getElementById('demo');
function Animal() {
this.name = 'Lion';
this.age = 3;
this.color = 'Brown';
}
const newAnimal = new Animal();
output.innerHTML = "Animal Name: " + newAnimal.name + "<br>";
output.innerHTML += "Animal Age: " + newAnimal.age + "<br>";
output.innerHTML += "Animal Color: " + newAnimal.color;
</script>
</body>
</html>
输出：
Animal Name: Lion
Animal Age: 3
Animal Color: Brown
箭头函数中的 'this'
当你在一个箭头函数中使用 'this' 关键字时，它指的是其父作用域的对象。
例如，当你在一个对象方法内部定义一个箭头函数并且在其中使用 'this' 关键字时，它指向的是那个对象。如果在另一个函数内部定义箭头函数，那么 'this' 关键字指向的是全局对象。
示例
在下面的代码中，我们在对象方法 getDetails() 内部定义了一个箭头函数。当我们打印 'this' 关键字的值时，它打印出的是对象。
<html>
<body>
<div id="output1">Value of 'this' inside the getDetails() method: </div>
<div id="output2">Value of 'this' inside the getInnerDetails() method: </div>
<script>
const wall = {
size: "10",
color: "blue",
getDetails() {
document.getElementById('output1').innerHTML += JSON.stringify(this);
const getInnerDetails = () => {
document.getElementById('output2').innerHTML += JSON.stringify(this);
}
getInnerDetails();
}
}
wall.getDetails();
</script>
</body>
</html>
输出：
Value of 'this' inside the getDetails() method: {"size":"10","color":"blue"}
Value of 'this' inside the getInnerDetails() method: {"size":"10","color":"blue"}
对象方法中的 'this'
当你在一个对象方法中使用 'this' 关键字时，它代表的是该对象本身。
示例
在下面的代码中，我们定义了一个对象 fruit。该对象包含一个方法 printFruitDetails()，在该方法内部我们使用 'this' 关键字来访问对象的属性。
<html>
<body>
<div id="demo"></div>
<script>
const output = document.getElementById('demo');
const fruit = {
name: "Apple",
color: "red",
printFruitDetails() {
output.innerHTML += "Fruit Name = " + this.name + "<br>";
output.innerHTML += "Fruit Color = " + this.color;
}
}
fruit.printFruitDetails();
</script>
</body>
</html>
输出：
Fruit Name = Apple
Fruit Color = red
对象方法中的子函数中的 'this'
当你在一个对象方法内部定义一个函数并且在该函数内部使用 'this' 关键字时，它代表的是全局对象而不是该对象。
示例
在下面的代码中，我们定义了一个对象 person。该对象包含一个方法 printDetails()。在 printDetails() 方法内部，我们定义了一个函数 printThis()。
在 printThis() 函数内部，我们打印 'this' 关键字的值，它打印出来的是全局对象。
<html>
<body>
<div id="output">Inside the printThis() function, Value of 'this' = </div>
<script>
const person = {
name: "Salman",
isBusinessman: false,
printDetails() {
function printThis() {
document.getElementById('output').innerHTML += this;
}
printThis();
}
}
person.printDetails();
</script>
</body>
</html>
输出：
Inside the printThis() function, Value of 'this' = [object Window]
JavaScript 中事件处理器中的 'this'
在事件处理器中使用 'this' 关键字时，它指的是触发事件的 HTML 元素。
示例
在下面的代码中，我们在 <div> 元素上添加了一个 onClick 事件处理器。当用户点击 div 元素时，我们使用 'display' 属性隐藏该 div 元素。
<html>
<head>
<style>
div {
height: 200px;
width: 700px;
background-color: red;
}
</style>
</head>
<body>
<p>Click the DIV below to remove it.</p>
<div onclick="this.style.display='none'"> </div>
</body>
</html>
显式函数绑定
在 JavaScript 中，call(), apply(), 或者 bind() 方法用于显式绑定。
显式绑定允许你借用特定对象的方法。使用这些方法，你可以显式地定义 this 关键字的上下文。
让我们通过下面的例子来理解显式绑定。
示例：使用 call() 方法
在下面的代码中，lion 对象包含 color 和 age 属性。它还包含 printDetails() 方法，并使用 this 关键字来打印详情。
tiger 对象仅包含 color 和 age 属性。我们使用 call() 方法来调用 lion 对象中的 printDetails() 方法，并且以 tiger 对象为上下文。因此，该方法在输出中打印了老虎的详情。
<html>
<body>
<div id="demo"></div>
<script>
const output = document.getElementById('demo');
const lion = {
color: "Yellow",
age: 10,
printDetails() {
output.innerHTML += `<p>Color: ${this.color}</p>`;
output.innerHTML += `<p>Age: ${this.age}</p>`;
}
}
const tiger = {
color: "Orange",
age: 15,
}
lion.printDetails.call(tiger);
</script>
</body>
</html>
输出：
Color: Orange
Age: 15
示例：使用 bind() 方法
下面的代码同样包含 lion 和 tiger 对象。之后，我们使用 bind() 方法将 lion 对象中的 printDetails() 方法绑定到 tiger 对象。
之后，我们使用 tigerDetails() 方法来打印 tiger 对象的详情。
<html>
<body>
<div id="demo"></div>
<script>
const output = document.getElementById('demo');
const lion = {
color: "Yellow",
age: 10,
printDetails() {
output.innerHTML += `<p>Color: ${this.color}</p>`;
output.innerHTML += `<p>Age: ${this.age}</p>`;
}
}
const tiger = {
color: "Orange",
age: 15,
}
const tigerDetails = lion.printDetails.bind(tiger);
tigerDetails();
</script>
</body>
</html>
输出：
Color: Orange
Age: 15
JavaScript 中 this 的优先级
你应该按照以下优先级顺序来确定 this 关键字的上下文：
-
-
-
-