Javascript/ES6箭头函数

Javascript/ES6箭头函数

---

---

一、箭头函数是什么？

ES6 引入了一种新的语法来编写函数，它就是箭头函数，绝大数，箭头函数与函数表达式创建的函数对象行为是相同的。任何可以使用函数表达式的地方，也可以使用箭头函数。箭头函数是一种函数简写方式， 定义形式是：参数(…)后面跟着箭头 =>，然后是函数内容体。

---

二、箭头函数与普通函数的区别

箭头函数是“=>”，普通函数是“function”。箭头函数不能作为构造函数，不能使用new。箭头函数不绑定arguments，但普通函数可以。箭头函数中的this代表上层对象，普通函数中的this代表当前对象。

1. 箭头函数比普通函数更加简洁
   如果没有参数，就直接写一个空括号即可。
   如果只有一个参数，可以省去参数的括号。
   如果有多个参数，用逗号分割。
   如果函数体的返回值只有一句，可以省略大括号。
2. 箭头函数没有自己的this
   箭头函数不会创建自己的this， 所以它没有自己的this，它只会在自己作用域的上一层继承this。所以箭头函数中this的指向在它在定义时已经确定了，之后不会改变。
3. 箭头函数继承来的this指向永远不会改变

普通函数

// 普通函数
let PI = function() {
    return 3.14;
};

箭头函数

// 箭头函数
let PI = () => {
	return 3.14
}

---

三、箭头函数的使用

箭头函数有两种格式：

一种只包含一个表达式，没有{...} 和return

let PI = x => {return 10 * x}    //多个参数时需要括号，例如(x, y，z)

一种包含多条语句， 这个时候 {...} ，return 就不能省略

		//箭头函数
    var PI = () => 5;
    //等价于
    //普通函数
    var PI = function () {
        return 5;
    };
	//箭头函数
    var PI = (num1, num2) => num1 + num2;
    //等价于
    //普通函数
    var PI = function (num1, num2) {
        return num1 + num2;
    }

提示： 1.函数体内只包含一个表达式 { … }和return可以省略掉。函数体内包含多条表达式 { ...}和return不能省略掉。 2.如果要返回一个对象，如果是单表达式，会报错：x => { foo: x }。因为和函数体的{ ...}有语法冲突，要改为：x => ({ foo: x })

1.箭头函数是匿名函数，不能作为构造函数，不能使用new

代码如下（示例）：

let PI = () => {
    console.log('3.14');
}

let fc = new PI();

2.箭头函数不能使用arguments、super

代码如下（示例）：

// 普通函数
let PI = function() {
	return arguments.length;
}
PI(1, 2, 3); // 3

// 箭头函数
let PI = () => {
	return arguments.length;
}

PI(1, 2,3); // Uncaught ReferenceError: arguments is not defined

3.箭头函数中this 指向

代码如下（示例）：

let PI = 3.14;
const obj_1 = {
	PI: 10,
	fun_1: function() {
		let PI = 20;
		const obj_2 = {
			PI: 30,
			fun_2: () => {
				console.log(this.PI);
			}
		}
		obj_2.fun_2();
	}
}
obj_1.fun_1(); // 返回10

fun_2返回的结果为：10

原因是箭头函数没有this，箭头函数的this指向是父级的this指向。如果没有父级或者父级没有指向，箭头函数的this指向是window ，这里箭头函数的执行上下文是函数fun_1()，所以它就继承了fun_1()的this，obj_1调用的fun_1，所以fun_1的this指向obj_1， 所以obj_1.PI 为 10。

---

四、总结

1. 要有个箭头
2. 箭头的前面是小括号，放形参，只有一个形参的时候可以省略小括号；
3. 箭头的后面是函数体；
4. 如果函数体只有一个语句，没有{}，此时的返回值不需要return；
5. 箭头函数里面的this总是指向最靠近的function 内部的this；
6. 对象里面的方法，尽可能不要使用箭头函数；
7. 箭头函数里面没有arguments，可以使用…reset，接收过来就是数组类型，接收的是形参之外的所有的实参；

---