ES6 - 箭头函数

箭头函数

es6的新方法，优化前端写法，便于开发人员开发。定义需要绑定一个变量或者自调用。

箭头函数

函数形式

• 形式一

	// () => 返回值

    let fn = () => 2;
    console.log(fn());    

• 形式二

	// 形参 => 返回值
	
	let fn2 = num => num*2;
    console.log(fn2(10));   

• 形式三

	// (形参,形参) => 返回值
	
	let fn3 = (a,b) => a+b;
    console.log(fn3(2,5));
    // 没有参数或多个参数时，都需要带有()。  只有一个参数的时候，可以省略()

• 形式四

	// () => {
    // 	执行语句
    // }
	let fn = () => {
		console.log('hello')
	}

• 形式五

	// (形参,形参) => {
	// 	执行语句;
	// 	return 返回值;
	// }
	let fn = (a=10,b=5) => {
		console.log('hello')
		return a+b;
	}
	console.log(fn(6));

• 形式六（自调用）

    // ((a,b) =>{
    //     console.log(a+b)
    // })(1,2)
    
    ((a,b) =>{
        console.log(a+b)
    })(1,2)

箭头函数不定参

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

	function fun(){
		console.log(arguments[0]);
	}
    fun(1,2,3,4,5,6,7);

• es6中，没有arguments对象来帮助我们调用参数

	let fun = () =>{
        console.log(arguments);
    }
    fun(12,3,4,5,6,2,4);
    
    //rest 参数(剩余参数)
    let fun2 = (...arg) => {
    	console.log(arg);
    }
    fun2(12,3,4,5,6,7,8);

箭头函数 this 指向

箭头函数，本身没有this this会指向 定义函数时 所在的作用域

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

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

• 修改箭头函数中的 this 指向

	document.onclick = function(){
		console.log(this);
        // function ff(){//未绑定给变量、事件默认为全局函数
        //     console.log(this);
        // }

        let ff = ()=>{
			//函数所在作用域为点击事件，绑定给document
			//this指向 document
            console.log(this);
        }
        ff();
	}

箭头函数默认参数

箭头函数的默认参数
是在没有传参时，直接使用的
传入参数时，则使用传入的参数

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