美文网首页前端开发es6入门基础
ES6基础入门教程(七)箭头函数

ES6基础入门教程(七)箭头函数

作者: 党云龙 | 来源:发表于2019-10-30 10:31 被阅读0次

    箭头函数,懒人的勋章


    很多时候,我懒得去写function。这种蹩脚的写法让我的代码看起来非常的不高级。
    因为只要一个人上过初中他就能从字面上翻译我的代码...

    所以es6中增加了新的function写法,箭头函数。让你可以省略function这一串字符,甚至连方法里面的return都可以省略。

    来看示例


    const fun1 = x=>x*2;
    console.log(fun1(2)) // 打印4
    

    从例子中可以发现,前面的x是我们传进去的参数,后面的x*2是返回值。

    他其实就相当于是:

    function fun(x){
        return x*2;
    }
    

    是不是非常简单?

    但是它有三种情况需要注意一下:

    // 没有参数 也需要把()给写上,否则会报错
    const fun = ()=>{
        console.log("没有参数");
    }
    // 有参数
    const fun2 = (x,y)=>{
        console.log(x);
        console.log(y);
    }
    // 可变参数
    const fun3 = (x,y,...z)=>{
        console.log(x);
        console.log(y);
        //console.log(z);
        for(let i of z){
            console.log(i);
        }
    }
    fun3("hello","world",1,2,3,4,5)
    

    此时注意如果你返回的是一个对象,需要用括号包裹起来:

    const fun1 = ()=>({a:1});
    console.log(fun1())
    

    如果你以为箭头函数仅仅就是一个缩写,那你就错了, 箭头函数还有一个犀利的地方再于,他解决了一个es5中的著名bug。

    es5中this的指向错误问题


    请看代码:

    //注意 在function作用域,this默认指的是function本身,却不是对象本体
    //在这个情况下它应该指它的父级
    const myNum={
        num:10,
        numFun:function(){
            let num = this.num;
            console.log(this.num); //10
            let numf=function(){
                console.log(this.num); //undefined
                let numz=this.num;
                console.log(numz); //undefined
            }
            numf();
        }
    }
    myNum.numFun()
    
    

    箭头函数中this还是指父级本体,而不是function函数作用域
    更何况我还经常使用拼音(因为我懒得去百度机翻)。

    const myNum={
        num:10,
        numFun:function(){
            let num = this.num;
            let numf=()=>{
                let numz=this.num;
                console.log(numz);//10
            }
            numf();
        }
    }
    myNum.numFun()
    

    相关文章

      网友评论

        本文标题:ES6基础入门教程(七)箭头函数

        本文链接:https://www.haomeiwen.com/subject/qqqovctx.html