ES6中的箭头函数的语法、指向、不定参数

箭头函数的语法

  function fn1() {

            console.log(1);

        }

        let fn2 = () => {

            console.log(2);

        }

        fn1()//1

        fn2()//2

        //箭头函数： 形参=>返回值

        //单个形参的最简写法，箭头函数作为匿名的回调函数是可以省略let fn ,既(形参)=>{语句}

        let fn = nub => nub * 2

        console.log(fn(10));//20

		//多个形参，语句单一。(形参1，形参2)=>返回值

		let fn = (num1, num2, num3) => num1 * num2 * num3

        console.log(fn(2, 3, 4))//24

        //多个形参，多条语句，不加return返回undefined

        let fn = (num1, num2, num3) => { let a = num1 + num2; let b =              num1 + num3 ;console.log(a + b)}

        console.log(fn(2, 3, 4))//报错undefined,与普通函数的没有return的值相同都是undefined

 		//多个形参，多条语句，必须用return返回函数值

 		let fn = (num1, num2, num3) => { let a = num1 + num2; let b =             num1 + num3 ;return(a + b)}

        console.log(fn(2, 3, 4))//11

箭头函数的不定参

不定参对应普通函数的arguments

         function fn1() {

            console.log(arguments);

        }

        fn1(1, 2, 3, 4)//伪数组arguments[1,2,3,4]

        let fn2 = () => {

            console.log(arguments);

        }

        fn2(1, 2, 3, 4)//arguments is not defined,也就是箭头函数没有不定参

		//解决剩余参数的方法

	let fn3 = (a, b, ...c) => {

            console.log(a, b, c)

        }

        fn3(1, 2, 3, 4)//1,2,[3,4],剩余参数以数组保存

        let fn3 = (a, b, ...c) => {

            console.log(c[0])

        }

         fn3(1, 2, 3, 4)//3,注意剩余参数以Array[3,4]进行保存

箭头函数的this的指向

		//本质，箭头函数的this在定义时所在的对象，其实质是因为箭头函数没有自己的this,用的是外层的this

	function fn1() {

            console.log(this);

        }

        fn1()//window

        let fn2 = () => {

            console.log(this);

        }

        fn2()//window,箭头函数本身没有this指向，在调用时指向其声明时所在作用域，这里声明在全局作用域下所以指向window

		//在点击事件中

		document.onclick = function () {

            let fn = () => { console.log(this) }

            fn()//this指向#document,指向调用时的作用域

        }

	//深入理解

	let fn

        let fn2 = function () {

            console.log(this);

            fn = () => { console.log(this) }

        }

        fn2()//先调用fn2为了给fn赋值为函数，全局函数this打印结果是指向window

        fn()//箭头函数调用时应指向声明所在的作用域，fn声明在fn2中，所以指向与fn2相同

	//深入理解--变形

       	let fn

        let fn2 = function () {

            console.log(this);

            fn = () => { console.log(this) }

        }

        fn2 = fn2.bind(document.body)//先调用fn2为了给fn赋值为函数

        fn2()//body

        fn()//body