JavaScript - this 关键字

什么是 'this' 关键词？

在 JavaScript 中，'this' 关键字包含对对象的引用。它表示函数或当前代码的上下文。它用于访问当前对象的属性和方法。

在函数中使用 this 关键字时，this 将引用调用函数时使用的对象。

在 JavaScript 中，函数也是对象。因此，您也可以将 'this' 关键字与 Functions 一起使用。

“this”指的是哪个对象？

'this' 关键字引用的对象取决于您如何使用 'this' 关键字。

例如

'this' 关键字引用全局范围内的 window 对象。
当你在函数中使用 'this' 关键字时，它也表示 'window' 对象。
'this' 关键字是指函数中 strict 模式下的 undefined。
在 object 方法中使用 'this' 关键字时引用该对象。
在事件处理程序中，'this' 关键字引用执行事件的元素。
call（）、apply（）和 bind（）等方法中的 'this' 关键字可以引用不同的对象。

语法

按照下面的语法在 JavaScript 中使用 'this' 关键字 &minus

this.property
OR
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 messsage is: " + this.message;
	 	 	 }
	 	 	 printMessage();
	 	</script>
</body>
</html>

输出

The messsage is: Hello World!

严格模式下的函数中的 'this'

当你在 strict 模式下在函数中使用 'this' 关键字时，它不会引用任何对象。'this' 关键字的值变为 undefined。

例

在下面的代码中，我们在 strict 模式下在函数内部使用 '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' 关键字时，它引用其父对象的范围。

例如，当您在 object 方法中定义 arrow 函数并在其中使用 '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"}

object 方法中的 'this'

当你在 object 方法中使用 '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 += "Furit Name = " + this.name + "<br>";
	 	 	 	 	 	 output.innerHTML += "Fruit Color = " + this.color;
	 	 	 	 	}
	 	 	 }
	 	 	 fruit.printFruitDetails();
	 	</script>
</body>
</html>

输出

Furit Name = Apple
Fruit Color = red

object 方法的子函数中的 'this'

当您在 object 方法中定义函数并在函数中使用 'this' 关键字时，它表示全局对象而不是对象。

例：

在下面的代码中，我们定义了 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'

将 'this' 关键字与事件处理程序一起使用是指执行事件的 HTML 元素。

例

在下面的代码中，我们已将 onClick 事件处理程序添加到 <div> 元素中。当用户点击 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 显式函数绑定

在 JavaScript 中，call（）、apply（）或 bind（）方法用于显式绑定。

显式绑定允许您借用特定对象的方法。使用这些方法，您可以显式定义 'this' 关键字的上下文。

让我们使用下面的示例来理解显式绑定。

示例：使用 call（）方法

在下面的代码中，lion 对象包含 color 和 age 属性。它还包含 printDetails（）方法，并使用 'this' 关键字打印详细信息。

tiger 对象仅包含 color 和 age 属性。我们使用 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: 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>

输出