当前位置：首页 > article >正文

【js】箭头函数和普通函数在this指向的区别

article 2024/11/19 9:23:47

在JavaScript中，箭头函数（Arrow Functions）和普通函数（Function Declarations/Expressions）在this的指向上有显著的不同：

普通函数：

函数定义时：this的值在函数被调用时才会确定，它取决于函数是如何被调用的。
独立调用：如果函数是直接调用的（而不是作为对象的方法），在非严格模式下this指向全局对象（在浏览器中通常是window），在严格模式下this是undefined。
作为对象方法调用：如果函数作为对象的方法被调用，this指向该对象。
构造函数调用：如果函数前面有new关键字，this指向新创建的对象。
call、apply、bind方法：可以使用这些方法显式地设置函数调用时this的值。

箭头函数：

没有自己的this：箭头函数不绑定自己的this，它会捕获其所在上下文的this值作为自己的this值。
定义时的上下文：this的值在箭头函数创建时就已经确定了，它继承自外围作用域。
不可改变：由于箭头函数的this是继承来的，所以使用call、apply和bind方法也不能改变this的值。
不能用作构造函数：箭头函数没有[[Construct]]方法，因此不能用作构造函数来使用new关键字。

示例比较：

普通函数：

function Person() {
  this.age = 0;
  setInterval(function growUp() {
    // 在非严格模式下，这里的`this`指向全局对象，而不是Person实例
    this.age++;
  }, 1000);
}
var p = new Person();

箭头函数：

function Person() {
  this.age = 0;
  setInterval(() => {
    // 这里的`this`正确地指向Person实例
    this.age++;
  }, 1000);
}
var p = new Person();

在第一个例子中，growUp函数是一个普通函数，在setInterval回调中它的this不会指向Person实例，而是指向全局对象或undefined（取决于是否为严格模式）。在第二个例子中，箭头函数在Person的上下文中创建，所以它的this指向Person实例。

因此，箭头函数在处理this时提供了更简洁和可预测的行为，特别是在事件处理和回调函数中，它们避免了this指向错误的问题。然而，这也意味着箭头函数不能用作对象方法，特别是那些需要有自己的this上下文的方法。

当函数作为对象的方法被调用时，this关键字通常指向调用该方法的对象。以下是一些具体情况：

普通函数作为对象方法：

const obj = {
  myMethod: function() {
    // 这里的`this`指向`obj`对象
    console.log(this);
  }
};
obj.myMethod(); // 输出：obj

在上面的例子中，当myMethod被调用时，this指向obj对象。

箭头函数作为对象方法：

const obj = {
  myMethod: () => {
    // 这里的`this`不会指向`obj`对象
    // 而是继承自外围作用域的`this`
    console.log(this);
  }
};
obj.myMethod(); // 输出：Window（或全局对象，取决于调用环境）

在这个例子中，箭头函数myMethod中的this不会指向obj对象，而是继承了它定义时的外围作用域的this值。如果在全局作用域中定义箭头函数，那么this通常指向全局对象（在浏览器中通常是Window）。

注意事项：

如果在严格模式下执行代码，普通函数中的this如果是独立调用的（不是作为对象的方法），则this会是undefined，而不是全局对象。
如果使用了call、apply或bind方法来调用函数，this的值将被显式设置，无论函数是普通函数还是箭头函数（尽管对箭头函数来说，bind不会起作用，因为箭头函数的this不能被改变）。

因此，当函数作为对象的方法调用时，普通函数的this指向调用它的对象，而箭头函数的this指向它定义时的外围作用域的this值。

查看全文

http://www.kler.cn/a/282080.html