首页 > web前端 > js教程 > 与常规函数相比,ES6 箭头函数中'this”的工作方式有何不同?

与常规函数相比,ES6 箭头函数中'this”的工作方式有何不同?

Linda Hamilton
发布: 2024-12-17 15:43:16
原创
528 人浏览过

How Does `this` Work Differently in ES6 Arrow Functions Compared to Regular Functions?

理解 ES6 箭头函数中的“this”

在 JavaScript 中,this 的值取决于使用它的上下文。使用箭头函数时,“词法绑定”的概念变得相关,它决定了 this 的行为。

箭头函数从定义它们的封闭上下文继承 this 的值。与常规函数不同,箭头函数不会为此创建自己的作用域。考虑以下代码:

var testFunction = () => {
  console.log(this);
};
testFunction();
登录后复制

这里,箭头函数 testFunction 从其封闭上下文(在本例中为全局范围)捕获 this 的值。因此,console.log(this) 将输出全局对象。

相反,常规函数可以为此创建自己的作用域。例如:

function Person() {
  this.age = 0;

  const increaseAge = function() {
    this.age++; // `this` refers to the Person object
  };

  increaseAge();
}

const p = new Person();
登录后复制

在此示例中,increaseAge 函数嵌套在 Person 构造函数中。当它被调用时,this 指的是 Person 类的实例,因为它是使用 new 关键字创建的。

总而言之,箭头函数从其封闭上下文继承 this 的值,确保它与周围的代码。此行为与常规函数不同,常规函数为此创建自己的作用域。理解这一关键差异对于在 JavaScript 开发中正确处理箭头函数中的这一点至关重要。

以上是与常规函数相比,ES6 箭头函数中'this”的工作方式有何不同?的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板