简单理解箭头函数

1. 基本用法

1.1 参数

1️⃣ 无参数情况

var fun = () => 18;
// 等同于
var fun = function () { return 18; };

2️⃣ 多个参数情况

var fun = (num1, num2) => num1 + num2;
// 等同于
var fun = function (num1, num2) { return um1 + num2; };

---

1.2 代码块的写法

1️⃣ 如果箭头函数的代码块只有一条语句，无需使用 return 语句。

var fun = () => 18;

2️⃣ 如果多于一条语句，就要使用大括号将它们括起来，并且使用 return 语句。

var fun = () => {
	let name = '小鱼';
	return name;
}

3️⃣ 由于大括号被解释为代码块，所以如果箭头函数直接返回一个对象，必须在对象外面加上括号，否则会报错。

// 报错
var fun = id => { id: id, name: '小鱼' };

// 不报错
var fun = id => ({ id: id, name: '小鱼' });

---

1.3 与变量解构结合使用

var fun = ({first, last}) => first + '' + last;
// 等同于
function fun (person) {
	return person.first + '' +person.last;
}

---

2. 使用注意点

2.1 箭头函数 this 指向上层作用域中的 this

对于普通函数来说，内部的 this 指向函数运行时所在的对象，但是箭头函数本身没有 this 对象，其内部的 this 是定义时上层作用域中的 this。

var name = '小鱼';

function fun1 () {
	setTimeout(() => {
		console.log(this.name);
	}, 100);
};

fun1();
fun1.call({ name: '小熊' });

// '小鱼'
// '小熊'

fun1 中 setTimeout() 的参数是一个箭头函数，是在 fun1 函数中定义的，内部 this 指向了 fun1 函数中的 this。当this指向window对象时，打印出'小鱼'；当this指向{name: '小熊'}时，打印出'小熊';

总之，箭头函数根本没有自己的this，导致内部的this 就是外层代码块的this。

🚨 注意：由于箭头函数没有自己的this，所以也就不能使用call()、apply()、bind()这些方法去改变 this 的指向。

(function () {
  setTimeout(
    (() => {
      console.log(this);
    }).bind({ name: "小熊" }),
    100
  );
}.call({ name: "小鱼" }));

// {name:'小鱼'}

上面代码中，箭头函数没有自己的this，所以bind方法无效，内部的this指向外部的this。

---

2.2 不能用作构造函数

当使用new关键字时，构造函数会把函数体内的this绑定到新创建的对象。由于箭头函数没有自己的this，所以也就不能用作构造函数。

---

2.3 没有 arguments 对象

除了this，arguments、super和new.target 这三个变量在箭头函数也是不存在的，都是指向外层函数的对应变量。

function fun () {
	setTimeout(() => {
		console.log(arguments);
	}, 100);
};

fun(1, 2, 3, 4);  // [1, 2, 3, 4]

上面代码中，箭头函数内部的变量arguments，其实是函数fun的arguments 变量。

---

3. 不适用场合

1️⃣ 定义对象的方法，且该方法内部包括 this。

var name = '小鱼';
var age = 180;

const obj = {
	name: '小熊',
	age: 18,
	getName: () => {
		console.log(this.name);
	},
	getAge: function () {
		console.log(this.age);
	}
}

obj.getName();  // '小鱼'
obj.getAge();   // 18

上面代码中，如果对象的方法是普通函数，该方法内部的 this 指向 obj，比如 obj.getAge()；如果是箭头函数，使得 this 指向全局对象，因此不会得到预期结果。这是因为对象不构成单独的作用域，导致 getName 箭头函数定义时的作用域就是全局作用域。

2️⃣ 需要动态 this 的时候，也不应该使用箭头函数。

var btn = document.getElementById('btn');
btn.addEventListener('click', () => {
	this.classList.toggle('on');
});

上面代码运行时，点击按钮会报错，因为 button 的监听函数时一个箭头函数，导致里面的 this 指向的是全局对象。如果改成普通函数，this 就会动态指向被点击的按钮对象。

---

4. 参考资料

阮一峰 ES6 入门