当前位置 博文首页 > 纸飞机博客:箭头函数=>

    纸飞机博客:箭头函数=>

    作者:[db:作者] 时间:2021-09-07 10:07

    箭头函数是ES6引入的一种更简洁的函数写法。是匿名函数,只能作为表达式的操作数。语法:(参数)=> {函数体。对比普通函数声明,箭头函数格式更简洁,没有自己的this,不能作为构造函数,没有arguments,没有函数提升。

    1、简洁的代码格式

    //只有 1个参数时,可以省略(),直接写参数名
    let double = x=>x+x;
    //有0个或者多个参数时,参数列表要用()包裹起来
    let add = (a,b)=>a+b
    let rand = ()=>Math.random();
    //函数体只有1条语句时,{}和 return 可省略,右边值自动隐式return
    let double = v=>v+v;
    //如果语句为多条,函数体需用{}包裹,且需手动return
    let total = v=>{
        var sum = 0;
        for(let i = 0;i < v;i++){
            sum+=i;
        }
        return sum;
    }

    2、没有自己的this

    箭头函数中访问的 this实际上是其父级作用域中的this,箭头函数本身的this是不存在的。避免了之前先用that=this这种hack写法。同时,使用 bind,call,apply不能修改其this指向

    var obj1 = {
        age: 1,
        say: function() {
            setTimeout(() => {
                console.log(this,this.age); //objl 1 i
            },0);
        }
    };
    obj1.say();

    3、不能作为构造函数

    如果通过new关键字调用,程序会抛出错误。同时也没有原型,不存在prototype这个属性。

    var Person = (name) => {
        this.name = name;
    }
    var person = new Person("jack");
    //Uncaught Type Error: Person is not a constructor

    4、没有自己的arguments

    可以使用rest参数代替arguments来访问箭头函数的参数列表。

    var foo = (val) => {
        console.log(arguments);
        // Uncaught ReferenceError: arguments is not defined
    };
    foo();

    5、箭头函数是函数表达式(函数不提升)

    非函数声明,不能像函数声明一样被提升。

    //函数声明被提升,可以正常执行
    console.log(getA)///getA(){}
    getA()// A'
    function getA() {
        console.log('A')
    }
    //箭头函数为表达式,提升的是变量getB,赋值为undefined。下一句执行时由于getB不是函数而报错。
    console.log(getB)// undefined
    getB();//Uncaught TypeError: getB is nota function
    var getB = ()=>{
        console.log('B')
    }
    //注:普通函数表达式var demo=function(){}跟箭头函数表达式一样,也是提升的变量而不是函数
    cs
    下一篇:没有了