在这里我们先来看看词法作用域和动态作用域的区别,然后在来介绍双箭头函数的词法作用域。
词法作用域
词法作用域就是定义在词法阶段的作用域。也就是说词法作用域是由你在写代码时将变量和块作用域写在哪里决定的。比如:
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对象。