ES6箭头函数常见考点与注意事项

ES6箭头函数

参考资料

1. 《ES6标准入门第三版》

1.基本用法

1.1 参数部分

基本使用

var f = () => console.log('Hello')
f() //输出 Hello

如果箭头函数不需要参数或需要多个参数, 就使用圆括号代表参数部分

// 没有参数,（）必不可少
() => console.log('Hello')

// 一个参数,（）可以省略
let foo = v => v
console.log(foo(5)) // 5

// 多个参数，() 必不可少
let foo = (a,b) => console.log(a+b)
foo(1,2) // 3

1.2 语句部分

箭头函数有多行语句 需要使用 { } 把语句包裹起来,单行不需要

let foo = (a,b) => {let c = 1;console.log(a+b+c)}
foo(1,2) // 6

如果语句部分不加 { } 默认生成的结果为 return 语句部分的返回值，如果加了{ }就代表是一个语句，不会自动返回语句的值。

let foo = (a,b) => a+b
let a = foo(1,2) 
console.log(a) // 3 

// 可以表示为
function foo(a,b){
	return a+b;
}


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

//等同于
function foo(a,b){
	a+b
}

2.注意事项（与普通函数的区别）

也可以称作箭头函数与普通函数的区别，主要有四点：

1. 箭头函数体内的 this 对象就是定义时所在的对象,而不是使用时候的对象
2. 不可以当作构造函数 new 不可用。箭头函数不能用 new 关键字来实例化对象，否则报错。
3. 不可以使用 arguments 对象,该对象在函数体内不存在,如果要用,可以用 rest 参数代替.
4. 不可以使用 yield 命令,因此箭头函数不能用作 Generator 函数.

3.箭头函数获取参数

由于箭头函数中没有 arguments 对象, 没办法取得参数列表, 需要借助 rest 参数来获取参数。

const numbers = (...nums) => nums
console.log(numbers(1,2,3,4,5)) // [1,2,3,4,5]

补充：rest参数的解释
ES6引入了 rest 参数(形式为"…变量名"),用于获取函数的多余参数,这样就不需要使用 arguments 对象了。rest 参数搭配的变量是一个数组，该变量将多余的参数放入其中。

4.箭头函数中this的指向

setTimeout 方法是挂在window对象下的, setTimeout 中所执行函数中的 this，永远指向 window 对象。

function foo() {
	setTimeout(function(){
		console.log('id',this.id);
	},100);
var id = 21;
}
foo.call({ id: 42 }); // id 21

箭头函数没有自己的this，所以在箭头函数中，this的指向是固定的，指向定义时所在的对象。同理可得，bind(),call(),apply()方法对箭头函数无效。

function foo() {
	setTimeout(()=>console.log('id',this.id),100);
var id = 21;
}
foo.call({ id: 42 }); // id 42