码迷,mamicode.com
首页 > 其他好文 > 详细

ES6 函数

时间:2020-02-22 00:29:30      阅读:65      评论:0      收藏:0      [点我收藏+]

标签:body   cti   pre   简写   win   argument   作用域   turn   问题   

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);
}

 

ES6 函数

标签:body   cti   pre   简写   win   argument   作用域   turn   问题   

原文地址:https://www.cnblogs.com/Afanadmin/p/12343702.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!