Javascript 简明教程
JavaScript - this Keyword
What is 'this' keyword?
在 JavaScript 中，“ this ”关键字包含对该对象引用的地址。它表示函数或当前代码的上下文。它用于访问当前对象的属性和方法。
当在函数中使用此关键字时，该 this 将引用该函数所调用的对象。
在 JavaScript 中，函数也是对象。因此，你还可以将“this”关键字与函数一起使用。
Which object does the 'this' refer to?
由“ this ”关键字引用的对象取决于你如何使用“this”关键字。
例如，
-
“this”关键字在全局作用域引用 window 对象。
-
在函数中使用“this”关键字时，它也表示“window”对象。
-
在函数中的严格模式中，“this”关键字引用一个未定义的对象。
-
在对象方法中使用“this”关键字时，该关键字引用该对象。
-
在事件处理程序中，“this”关键字引用在其中执行事件的元素。
-
在 call()、apply() 和 bind() 等方法中，“this”关键字可以指代不同的对象。
JavaScript 'this' in the Global Scope
在全局作用域中使用“this”关键字时，它表示全局（窗口）对象。在全局作用域中，您可以使用“this”关键字访问全局变量。
Example
在下面的代码中，我们在全局作用域中定义了“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: 10JavaScript 'this' in a Function
在函数中使用“this”关键字时，它表示全局作用域或“窗口”对象。
Example
在下面的代码中，我们在函数内部使用了“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 messsage is: " + this.message;
}
printMessage();
</script>
</body>
</html>The messsage is: Hello World!'this' in a Function in Strict Mode
在严格模式中函数内部使用“this”关键字时，它不会引用任何对象。“this”关键字的值变为未定义。
Example
在下面的代码中，我们在严格模式中函数内部使用了“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' in a Constructor Function
当您使用函数作为构造函数创建对象时，“this”关键字表示该对象。
Example
我们在下面的代码中定义了 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' in an Arrow Function
在箭头函数中使用“this”关键字时，它表示其父对象的范围。
例如，当您在对象方法中定义箭头函数并在其中使用“this”关键字时，它表示对象。如果您在另一个函数中定义箭头函数，“this”关键字表示全局对象。
Example
在下面的代码中，我们在对象的 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' in the Object Method
在对象方法中使用“this”关键字时，它表示对象本身。
Example
在下面的代码中，我们定义了“fruit”对象。该对象包含 printFruitDetails() 方法，在该方法中我们使用“this”关键字访问对象的属性。
<html>
<body>
<div id = "demo"> </div>
<script>
const output = document.getElementById('demo');
const fruit = {
name: "Apple",
color: "red",
printFruitDetails() {
output.innerHTML += "Furit Name = " + this.name + "<br>";
output.innerHTML += "Fruit Color = " + this.color;
}
}
fruit.printFruitDetails();
</script>
</body>
</html>Furit Name = Apple
Fruit Color = red'this' in a Child Function of an Object Method
当您在对象方法中定义函数并在函数中使用“this”关键字时，它表示全局对象，而不是对象。
Example:
在下面的代码中，我们定义了 person 对象。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' in Event Handlers
在事件处理程序中使用“this”关键字是指执行该事件的 HTML 元素。
Example
在下面的代码中，我们在 <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>Explicit Function Binding in JavaScript
在 JavaScript 中，call()、apply() 或 bind() 方法用于显式绑定。
显式绑定允许您借用特定对象的 method。使用这些方法，您可以明确定义“this”关键字的上下文。
下面我们通过示例了解显式绑定。
Example: Using the call() method
在下面的代码中，lion 对象包含颜色和年龄属性。它还包含 printDetails() 方法并使用“this”关键字打印详细信息。
tiger 对象仅包含颜色和年龄属性。我们使用 call() 方法在 tiger 对象的上下文中调用 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: 15Example: Using the bind() method
下面的代码也包含 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