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