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' 关键字：

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'

当您在严格模式下的函数内部使用 '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 元素。

示例

在下方的代码中，我们在 <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 中的显式函数绑定

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

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

让我们通过下面的例子来理解显式绑定。

示例：使用 call() 方法

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

tiger 对象只包含 color 和 age 属性。我们使用 call() 方法来调用 lion 对象的 printDetails() 方法，并使用 tiger 对象作为上下文。因此，该方法会输出 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”关键字的上下文。

  • 1. bind() 方法
  • 2. call 和 apply() 方法
  • 3. 对象方法
  • 4. 全局作用域
打印页面
上一页
下一页
广告