js中this关键字的简单理解

当一个函数被调用时，this 关键字通常指向调用该函数的对象。但是，在 JavaScript 中，this 的值是在函数被调用时确定的，并且在不同的情况下它可能会指向不同的对象。箭头函数的行为有所不同，它们的 this 值被绑定到了定义时的上下文，而不是调用时的上下文。让我们看一些示例来理解这一点：

// 示例 1: 在对象方法中使用箭头函数

const obj = {
  name: "Alice",
  greet: function() {
    // 在普通函数中，this 指向当前对象
    console.log("Hello, " + this.name); // 输出 "Hello, Alice"
  },
  greetArrow: () => {
    // 在箭头函数中，this 指向定义时的上下文，即外部的 this
    console.log("Hello, " + this.name); // 输出 "Hello, undefined"
  }
};

obj.greet(); // 调用普通方法，输出 "Hello, Alice"
obj.greetArrow(); // 调用箭头函数方法，输出 "Hello, undefined"

在上面的示例中，obj 对象有两个方法，一个是普通函数 greet()，另一个是箭头函数 greetArrow()。在 greet() 方法中，this 指向 obj 对象本身，因此 this.name 取到的是对象的 name 属性。但是，在 greetArrow() 方法中，由于箭头函数的 this 绑定到了定义时的上下文，即全局上下文，而全局上下文中并没有 name 属性，因此输出的是 undefined。

现在让我们再看一个在类中使用箭头函数的示例：

class Example {
  constructor() {
    this.name = "Bob";
  }

  greet() {
    // 在普通方法中，this 指向当前对象
    console.log("Hello, " + this.name); // 输出 "Hello, Bob"
  }

  greetArrow = () => {
    // 在箭头函数中，this 指向定义时的上下文，即 Example 类的实例
    console.log("Hello, " + this.name); // 输出 "Hello, Bob"
  }
}

const example = new Example();
example.greet(); // 调用普通方法，输出 "Hello, Bob"
example.greetArrow(); // 调用箭头函数方法，输出 "Hello, Bob"

在这个示例中，Example 类中有两个方法，一个是普通方法 greet()，另一个是类字段中定义的箭头函数 greetArrow。在 greetArrow 中，箭头函数的 this 绑定到了 Example 类的实例，因此无论在哪里调用该方法，this.name 始终指向实例的 name 属性。