ES6 函数

Posted 2021-03-08 afanadmin

ES6 函数

箭头函数的基本写法与概念

{
    // 箭头函数: function的简写
    /* function fn(){

    } */
    /* let fn = ()=>{
        console.log(1);
    }
    fn(); */
    /* 
        写法:
            形参=>返回值
            (形参)=>返回值
            ()=>返回值
            ()=>{
                执行语句
                返回值
            }
            写箭头函数的时候必须把它存起来;
    */
    {
        let fn = nub=>nub*2;
        console.log(fn(10));//20
    }
    {
        let fn = (num,nub)=>num*nub;
        console.log(fn(20,10));//200
    }
    {
        let fn = ()=>10;
        console.log(fn());
    }
    {
        let fn = ()=>{
            console.log("执行语句1");
            return "返回值";
        }
        fn();
        console.log(fn());
    }
}

箭头函数的不定参:

{
    {
        function fn(){
            console.log(arguments)
        }
        fn(1,2,3,4,5);
    }
    {
        let fn = ()=>{
            // console.log(arguments);//报错
            // 箭头函数没有不定参
        }
        fn(1,2,3,4,5);
    }
}

箭头函数的rest参数:

{
    let fn = (...arg)=>{
        // (...arg); 和剩余参数很相似-> (a,b,...arg)
        console.log(arg);
    }
    fn(1,2,3);
}

箭头函数的this问题:

{
    // document.onclick = function(){
    //     console.log(this);//document;
    // }

    // document.onclick = ()=>{
    //     console.log(this);//window
    // }
    
    document.onclick = function(){
        let fn = ()=>{
            console.log(this);//document
        }

        // function fn(){
        //     console.log(this);//window
        // }

        fn();
    }
    /* 
        从上面可以看出箭头函数本身没有this,调用箭头函数this的时候,指向的是其声明时所在的作用域的this
    */
    {
        let fn;
        let fn2 = function(){
            console.log(this);
            fn = ()=>{
                console.log(this);
            }
        };
        {
            fn2();//-> window
            fn();//window
        }

        {
            fn2 = fn2.bind(document.body);
            fn2();//body
            fn();//body
        }
    }
}

箭头函数默认配置:

{
    let fn = (a=10,b=2)=>{
        // a = 10;
        // b = 2;
        console.log(a*b);
    }
    console.log(10);
}