箭头函数

Posted 2021-02-14 qingshanyici

ES6里添加一个特殊的语法形式用于函数声明，叫做箭头函数。格式如下：

var foo=a=>{
    console.log(a);
}
foo(3);//3

 

 

为什么要用箭头函数来声明一个函数？当然是为了少让你敲几个单词啦。(?ω?) 开玩笑的。

var obj={
    id:‘Alice‘,
    cool:function coolFn(){
        console.log(this.id);
    }
}

var id=‘whatever!‘;
obj.cool();//Alice
setTimeout(obj.cool, 100);//whatever!为啥我这里显示的是undifined？

 

可以看到，cool()函数弄丢了this的绑定。解决的方法就是定义一个常量等于this。代码如下：

var obj={
    count:0,
    cool:function coolFn(){
        var me=this;
        if(me.count<1){
            setTimeout(function timer(){
                me.count++;
                console.log(‘Alice‘);
            }, 100);
        }
    }
};
obj.cool();//Alice

 

 

而在箭头函数中，引入了一个叫做this词法的行为：

var obj={
    count:0,
    cool:function coolFn(){
        if(this.count<1){
            setTimeout(()=>{
                this.count++;
                console.log("Awesome!")
            },100);
        }
    }
};
obj.cool();//Awesome!

 

箭头函数在涉及this绑定时的行为和普通的函数行为完全不一致。它放弃了所有普通this绑定的规则，而是用当前的词法作用域覆盖了this本来的值。

因此，箭头函数并非与this进行了解绑，而是“继承”了cool()函数的this绑定。因此，调用它就不会出错。

 

还有更可取的方法，是正确使用和包含this机制。

var obj={
    count:0,
    cool:function coolFn(){
        if(this.count<1){
            setTimeout(function timer(){
                this.count++;
                console.log(‘whatever‘);
            }.bind(this),100);
        }
    }
}
obj.cool();//whatever