箭頭函數返回對象

// 這種情況要要用(),否則會將對象的{}解釋為塊
const fn = (a, b) => ({a:1, b:2})

箭頭函數的特點

1. this指向由外層函數的作用域來決定，它本身沒有this，不能通過call、apply、bind改變
2. 不能作為構造函數使用
3. 不可以使用arguments對象，該對象在函數體內不存在，可用rest代替
4. 不可以使用yield命令，因此箭頭函數不能用作 Generator 函數。

function foo() {console.log('this', this)return (a) => {console.log('a', this.a)}
}
var obj1 = { a: 2 };
var obj2 = { a: 3 };
var bar = foo.call(obj1)
bar.call(obj2) // 2

• 所有的內層函數都是箭頭函數，都沒有自己的this，它們的this其實都是最外層foo函數的this。

function foo() {return () => {return () => {return () => {console.log('id:', this.id);};};};
}var f = foo.call({id: 1}); // foo是普通函數，可以通過call改變this指向var t1 = f.call({id: 2})()(); // id: 1
var t2 = f().call({id: 3})(); // id: 1
var t3 = f()().call({id: 4}); // id: 1

定義對象的方法

• 定義對象的方法，且該方法內部包括this且該方法內部包括this，不應使用箭頭函數定義

const p = {eat: function () {console.log('this-eat', this)},sleep: () => {console.log('this-window', this)}
}
p.eat() // p
p.sleep() // window 

• 以下例子bind與箭頭函數都能讓this指向實例
  

arguments

function foo() {const a = () => {console.log(arguments)}a()
}
foo(1, 2, 3, 4) // [1,2,3,4] 箭頭函數內無arguments，取外層的

function foo() {setTimeout(() => {console.log(arguments)})
}
foo(1, 2, 3, 4) // [1,2,3,4]  箭頭函數內無arguments，取外層的

嵌套的箭頭函數

// 非常語義化
function insert(value) {return {into: function (array) {return {after: function (afterValue) {array.splice(array.indexOf(afterValue) + 1, 0, value);return array;}};}};
}insert(2).into([1, 3]).after(1); //[1, 2, 3]

// 改寫為箭頭函數，效果相同但是可讀性差
let insert = (value) => ({into: (array) => ({after: (afterValue) => {array.splice(array.indexOf(afterValue) + 1, 0, value);return array;
}})});insert(2).into([1, 3]).after(1); //[1, 2, 3]

應用場景

1. 簡單的函數表達式，內部沒有this引用，沒有遞歸，事件綁定，解綁定
2. 內層函數表達式，需要調用this，且this應與外層函數一致時（保證指向vue實例）

const sortArr = (...nums) => nums.sort((a, b) => a - b)
console.log(sortArr(5, 4, 1, 10)) // [1, 4, 5, 10]