JavaScript中的this例题实战总结详析

2023年6月11日上午12:36 • JavaScript

下面我将为你详细讲解“JavaScript中的this例题实战总结详析”。

一、什么是this

在JavaScript中，this是一个关键字，通常用来指向当前对象。this的具体指向取决于函数被调用的方式。在不同的上下文环境中，this指向的对象不同，因此理解this的指向也非常重要。

具体来说，this有以下四种指向。

全局环境下的this
当函数未被绑定到任何上下文对象时，this指向全局对象，在浏览器中，this指向window对象。
函数环境下的this
当函数被调用时，this的指向将取决于函数的调用方式。如果函数作为普通函数调用，this将指向全局对象或undefined；如果函数作为对象的方法调用，this将指向该对象。
构造函数环境下的this
当函数被用作构造函数时，this将指向新创建的对象。
显式绑定的this
函数调用时，可以使用apply、call、bind等方法来显式指定this的值。

二、例题实战

下面我们通过两个例题来进一步认识this的指向。

例题1：计算器

以计算器为例，需要在全局环境下定义一个计算器对象，并提供加法、减法、乘法、除法四个方法。在调用这些方法时，需要指定当前对象为计算器对象。

代码如下：

let calculator = {
  result: 0,
  add: function(value) {
    this.result += value;
    return this;
  },
  subtract: function(value) {
    this.result -= value;
    return this;
  },
  multiply: function(value) {
    this.result *= value;
    return this;
  },
  divide: function(value) {
    this.result /= value;
    return this;
  }
};

let result = calculator.add(5).multiply(3).subtract(2).divide(1).result;

console.log(result); // Output: 13

在上述代码中，我们定义了一个calculator对象，它包括result、add、subtract、multiply和divide五个属性。在这些方法中，我们使用了this关键字，这些方法都将返回当前对象，以便支持链式调用。最后，我们调用了add、multiply、subtract和divide四个方法，并计算出结果。

例题2：事件处理函数

假设我们有一个HTML页面，它包含了一个按钮和一段JavaScript代码。当用户单击按钮时，JavaScript代码将会被执行。

代码如下：

<!DOCTYPE html>
<html>
  <body>
    <button onclick="sayHello()">Say Hello</button>

    <script>
      function sayHello() {
        console.log(this);
      }
    </script>
  </body>
</html>

在上述代码中，我们定义了一个名为sayHello的函数，当用户单击按钮时，该函数被调用，并将this输出到控制台中。由于该函数是通过按钮的onclick事件来调用的，因此该函数中的this指向按钮本身。