箭頭函數返回對象

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

箭頭函數的特點

this指向由外層函數的作用域來決定，它本身沒有this，不能通過call、apply、bind改變

不能作為構造函數使用

不可以使用arguments對象，該對象在函數體內不存在，可用rest代替

不可以使用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]

應用場景

簡單的函數表達式，內部沒有this引用，沒有遞歸，事件綁定，解綁定

內層函數表達式，需要調用this，且this應與外層函數一致時（保證指向vue實例）

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

總結

以上是生活随笔為你收集整理的ES6-7 - 箭头函数的实质、箭头函数的使用场景的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。