双箭头函数词法作用域

本文探讨了词法作用域和动态作用域的区别,并重点讲解了双箭头函数如何在JavaScript中实现其特有的this绑定机制,强调了在严格模式下双箭头函数的this行为变化。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在这里我们先来看看词法作用域和动态作用域的区别,然后在来介绍双箭头函数的词法作用域。

词法作用域

  词法作用域就是定义在词法阶段的作用域。也就是说词法作用域是由你在写代码时将变量和块作用域写在哪里决定的。比如:
  

var a = 4;
function foo(){
    console.log(a)
}
function bar(){
    var b = 3;
    foo();
}
bar();

  该代码的执行结果为:3。
  这是因为foo中的a会首先在foo的作用域内去找,如果没有找到则会到其定义的作用域去找,并不是沿着调用栈去找的。

动态作用域

  动态作用域并不关心函数和作用域是如何声明以及在任何处声明的,只关心它们从何处调用。换句话说,作用域链是基于调用栈的,而不是代码中的作用域嵌套。比如:

var a = 4;
var foo = {
 a:3,
 bar: function(){
    console.log(this.a);
 }
};
foo.bar();

该代码执行结果为3。
因为foo.bar在执行的时候会动态的绑定this,此时的this指向的是foo对象而不是全局window对象。

双箭头函数

上面介绍了词法作用域和动态作用域的区别,下面来看下双箭头函数是如何实现this指针的绑定。

var a = 4;
var foo = {
 a:3,
 bar:()=>{
    console.log(this.a);
 }
};
foo.bar();

  该代码的执行结果为4。
  因为双箭头函数this指针的绑定是基于词法作用域的,并不是动态作用域。在foo中bar的this指针是在运行阶段动态绑定上去的,但是在定义阶段bar中的this指向的全局this。所以输出结果为4。
  需要注意的是:如果在严格模式下上述代码是会报错的。因为严格模式下this不会指向全局this对象。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值