ES6 箭头函数

箭头函数：语法比函数表达式更加简洁，并没有自己的this，arguments，super，new，target。这些函数表达式更实用于那些本来需要匿名函数的地方，并且他们不能用作构造函数。
语法： ()=>{};
箭头函数的几种形式

形参=>返回值

let fn = num => num*2
	console.log(fn(10))  //输出20

(形参,形参)=>返回值

let fn2=(a,b)=>a+b;
	consolg.log(fn2(2,3)) //输出5

	()=>{
		执行语句
		}

(形参，形参) =>{
执行语句
return;
}
注意：箭头函数在定义的时候，需要绑定一个变量，或者自调用

箭头函数的不定参问题:

在es5中，当我们不确定函数参数的时候，可以使用arguments对象来调用参数

        function fun(){
            console.log(arguments[1])
        }
        fun(1,3,4,5,5)

ES6中没有arguments对象来帮助我们调用参数
rest 参数 (剩余参数)

        let fun2= (...arg)=>{  //arg自定义
            // console.log(arguments);  报错
            console.log(arg) //12,3,5,6
        }
        fun2(12,3,5,6)

箭头函数的this的指向问题
普通函数： this没有绑定事件就指向window，this绑定的话就指向绑定的谁不受当前作用域影响（window与document不一样）
**箭头函数：**本身没有this，this会指向定义函数时所在的作用域；
箭头函数中的this，首先从他的父级作用域中找，如果父级作用域还是箭头函数，继续往上找，一直没有找到指向window

        let fn2= () =>{
            // console.log(this)  指向window          
        }
        fu2();

        let fn4
        let fn5 =function(){
            fn4 =() =>{
                console.log(this)  //this指向window 因为父级也没有绑定事件
            }
            fn4();
        }
        
        // fn5 = fn5.bind(document.body); //this指向body，body改变this的指向
        fn5();

        document.onclick = function(){
            function ffc(){
                    console.log(this);//指向window
                }           

            let ff = () =>{
                console.log(this)  //this指向当前作用域事件
            }
            ffc();
            ff();

        }

箭头函数的如果没传参就按默认参数

        let fun=(a=10,b=5)=>{
            return a+b
        }
        console.log(fun())

Jason–json 发布了87 篇原创文章 · 获赞 10 · 访问量 6957 私信关注

ES6 箭头函数

箭头函数的不定参问题:

相关文章