五十八.箭头函数

104 阅读2分钟

定义

(参数) => {函数体};

箭头函数省略了关键字function,没有声明式只有定义式。

箭头函数没有参数或有多个参数需要用()括起来,只有一个参数可以省略();当箭头函数的函数体有多行语句需要用{}括起来,当只有一行语句且语句是返回结果时可以省略{}。

image.png

image.png

this指向

箭头函数没有环境则箭头函数没有this,箭头函数内部可以使用this关键字。但是this的指向和箭头函数的调用者没有关系,this指向是外层作用域(函数或全局)的调用者。this也不能通过call,bind,apply来改变,this不能被劫持。

箭头函数内部this指向判断规则

this离它最近的嵌套关系的function或者对象方法的调用者,没有就是window对象。

1.没有离this最近的嵌套关系的function或对象方法的调用者,则该this就是window对象

image.png

image.png

2.有离this最近的嵌套关系的function的调用,则this就是function的调用者

image.png

image.png

3.有离this最近的嵌套关系的对象的方法,则该方法的调用者就是this

image.png

image.png

箭头函数使用场景

回调函数中经常看到 var self = this 这样的代码,为了将外部 this 传递到回调函数中,那么有了箭头函数,就不需要这样做了,直接使用 this 就行。所以,当我们需要维护一个 this 上下文的时候,就可以使用箭头函数。

ps:箭头函数没有 this、super、arguments 和 new.target 绑定。箭头函数不可以作为构造函数,也就是不能使用 new 命令,否则会报错。

箭头函数的实参表示

箭头函数里面没有arguments,可以使用…剩余运算符...xx,xx是定义的任意变量名,xx接收过来就是数组类型,接收的是形参之外的所有的实参,不会接收形参的实参,且剩余运算符不可以写在形参前。

image.png

image.png

 let fm=(...e,a)=>{
            console.log(e);
        };
        fm(11,12);

image.png

        let fn=(...h)=>{
            console.log(h,111);
        };
        fn(311,530,816,729);
        let fg=(x,...m)=>{
            console.log(x,222);
            console.log(m,333);
        };
        fg(1996,1989,1991,2009);

image.png