箭头函数返回对象
let getTempItem = id => ({ id: id, name: "Temp" });
如果箭头函数只有一行语句，且不需要返回值，可以采用下面的写法，就不用写大括号了
let fn = () => void doesNotReturn();
使用箭头函数需要注意的几点：
1、箭头函数没有自己的this对象，this使用的是函数定义时所在的上层作用域的this，静态定义时就决定了this的指向，如下代码示意：
// ES6
function foo() {
setTimeout(() => {
console.log('id:', this.id);
}, 100);
}
// ES5
function foo() {
var _this = this;
setTimeout(function () {
console.log('id:', _this.id);
}, 100);
}
2、不可以当作构造函数，也就是说，不可以对箭头函数使用new操作符，否则会抛出一个错误；
3、不可以使用arguments对象，该对象在函数体内不存在，如果要用，可以使用rest参数代替；
4、不可以使用yield命令，因此箭头函数不用用作Generator函数。
上面四点中，最重要的是第一点。对于普通函数来说，内部的this指向函数运行时所在的对象，但是这一点对箭头函数不成立。它没有自己的this对象，内部的this就是定义时上层作用域中的this。也就是说，箭头函数内部的this指向是固定的，相比之下，普通函数的this指向是可变的。
function foo() {
setTimeout(() => {
console.log('id:', this.id);
}, 100);
}
var id = 21;
foo.call({ id: 42 });
// id: 42
上面代码中，setTimeout()的参数是一个箭头函数，这个箭头函数的定义生效是在foo函数生成时，而它的真正执行要等到 100 毫秒后。如果是普通函数，执行时this应该指向全局对象window，这时应该输出21。但是，箭头函数导致this总是指向函数定义生效时所在的对象（本例是{id: 42}），所以打印出来的是42。
箭头函数不适用的场合
由于箭头函数使得this从“动态”变成“静态”，下面两个场合不应该使用箭头函数。
一、定义对象的方法，且该方法内包括this
const cat = {
lives: 9,
jumps: () => {
this.lives--;
}
}
上面代码中，cat.jumps()方法是一个箭头函数，这是错误的，调用cat.jumps()时，如果是普通函数，该方法内部的this指向cat；如果写成箭头函数，使得this指向全局对象，因此不会得到预期的结果。这是因为对象不构成单独的作用域，导致jumps箭头函数定义时的作用域就是全局作用域。
globalThis.s = 21;
const obj = {
s: 42,
m: () => console.log(this.s)
};
obj.m() // 21
上面例子中，obj.m()使用箭头函数定义。JavaScript 引擎的处理方法是，先在全局空间生成这个箭头函数，然后赋值给obj.m，这导致箭头函数内部的this指向全局对象，所以obj.m()输出的是全局空间的21，而不是对象内部的42。上面的代码实际上等同于下面的代码。
globalThis.s = 21;
globalThis.m = () => console.log(this.s);
const obj = {
s: 42,
m: globalThis.m
};
obj.m() // 21
二、需要动态绑定this的时候，也不应使用箭头函数
var button = document.getElementById('press');
button.addEventListener('click', () => {
this.classList.toggle('on');
});
上面代码运行时，点击按钮会报错，因为button的监听函数是一个箭头函数，导致里面的this就是全局对象。如果改成普通函数，this就会动态指向被点击的按钮对象。
另外，如果函数体很复杂，有许多行，或者函数内部有大量的读写操作，不单纯是为了计算值，这时也不应该使用箭头函数，而是要使用普通函数，这样可以提高代码可读性。
网友评论