JavaScript - this 关键字

什么是 this 关键字?

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

当 this 关键字在函数内部使用时，this 将指向调用该函数的对象。

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

'this' 指的是哪个对象?

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

例如，

• 'this' 关键字在全局范围内引用 window 对象。

• 在函数内部使用 'this' 关键字时，它也代表 'window' 对象。

• 在函数的严格模式下，'this' 关键字引用 undefined。

• 在对象方法中使用 'this' 关键字时，它引用的是对象。

• 在事件处理程序中，'this' 关键字引用事件所针对的元素执行。

• call()、apply() 和 bind() 等方法中的 'this' 关键字可以引用不同的对象。

语法

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

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

输出

The messsage 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 += "Furit Name = " + this.name + "<br>";
            output.innerHTML += "Fruit Color = " + this.color;
         }
      }
      fruit.printFruitDetails();
   </script>
</body>
</html>

输出

Furit Name = Apple
Fruit Color = red

对象方法子函数中的"this"

当您在对象方法内部定义函数并在函数内部使用"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() 方法

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

老虎对象仅包含 color 和 age 属性。我们使用 call() 方法，在老虎对象的上下文中调用狮子对象的 printDetails() 方法。因此，该方法会在输出中打印老虎的详细信息。

<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' 关键字的上下文。

• 1. bind() 方法
• 2. call 和 apply() 方法
• 3. 对象方法
• 4. 全局作用域