詳解箭頭函式和普通函式的區別以及箭頭函式的注意事項、不適用場景

OBKoro1發表於2019-03-21

箭頭函式是ES6的API,相信很多人都知道,因為其語法上相對於普通函式更簡潔,深受大家的喜愛。就是這種我們日常開發中一直在使用的API,大部分同學卻對它的瞭解程度還是不夠深...

普通函式和箭頭函式的區別:

箭頭函式的this指向規則:

1. 箭頭函式沒有prototype(原型),所以箭頭函式本身沒有this

let a = () =>{};
console.log(a.prototype); // undefined
複製程式碼

2. 箭頭函式的this指向在定義的時候繼承自外層第一個普通函式的this。

下面栗子中在一個函式中定義箭頭函式,然後在另一個函式中執行箭頭函式。

let a,
  barObj = { msg: 'bar的this指向' };
fooObj = { msg: 'foo的this指向' };
bar.call(barObj); // 將bar的this指向barObj
foo.call(fooObj); // 將foo的this指向fooObj
function foo() {
  a(); // 結果:{ msg: 'bar的this指向' }
}
function bar() {
  a = () => {
    console.log(this, 'this指向定義的時候外層第一個普通函式'); // 
  }; // 在bar中定義 this繼承於bar函式的this指向
}
複製程式碼

從上面栗子中可以得出兩點

  1. 箭頭函式的this指向定義時所在的外層第一個普通函式,跟使用位置沒有關係
  2. 被繼承的普通函式的this指向改變,箭頭函式的this指向會跟著改變

3. 不能直接修改箭頭函式的this指向

上個栗子中的foo函式修改一下,嘗試直接修改箭頭函式的this指向。

let fnObj = { msg: '嘗試直接修改箭頭函式的this指向' };
function foo() {
  a.call(fnObj); // 結果:{ msg: 'bar的this指向' }
}
複製程式碼

很明顯,call顯示繫結this指向失敗了,包括aaply、bind都一樣。

它們(call、aaply、bind)會預設忽略第一個引數,但是可以正常傳參。

然後我又通過隱式繫結來嘗試同樣也失敗了,new 呼叫會報錯,這個稍後再說。

SO,箭頭函式不能直接修改它的this指向

幸運的是,我們可以通過間接的形式來修改箭頭函式的指向:

去修改被繼承的普通函式的this指向,然後箭頭函式的this指向也會跟著改變,這在上一個栗子中有演示。

bar.call(barObj); // 將bar普通函式的this指向barObj 然後內部的箭頭函式也會指向barObj
複製程式碼

4. 箭頭函式外層沒有普通函式,嚴格模式和非嚴格模式下它的this都會指向window(全域性物件)

唔,這個問題實際上是面試官提出來的,當時我認為的箭頭函式規則就是:箭頭函式的this指向繼承自外層第一個普通函式的this,現在看來真是不嚴謹(少說一個定義的時候),要是面試官問我:定義和執行不在同一個普通函式中,它又指向哪裡,肯定歇菜...

既然箭頭函式的this指向在定義的時候繼承自外層第一個普通函式的this,那麼:

當箭頭函式外層沒有普通函式,它的this會指向哪裡

這裡跟我之前寫的this繫結規則不太一樣(不懂的可以點進去看一下),普通函式的預設繫結規則是:

在非嚴格模式下,預設繫結的this指向全域性物件,嚴格模式下this指向undefined

如果箭頭函式外層沒有普通函式繼承,它this指向的規則

經過測試,箭頭函式在全域性作用域下,嚴格模式和非嚴格模式下它的this都會指向window(全域性物件)

Tip:測試的時候發現嚴格模式在中途宣告無效,必須在全域性/函式的開頭宣告才會生效

a = 1;
'use strict'; // 嚴格模式無效 必須在一開始就宣告嚴格模式
b = 2; // 不報錯
複製程式碼

箭頭函式的

箭頭函式的arguments

箭頭函式的this指向全域性,使用arguments會報未宣告的錯誤

如果箭頭函式的this指向window(全域性物件)使用arguments會報錯,未宣告arguments

let b = () => {
  console.log(arguments);
};
b(1, 2, 3, 4); // Uncaught ReferenceError: arguments is not defined
複製程式碼

PS:如果你宣告瞭一個全域性變數為arguments,那就不會報錯了,但是你為什麼要這麼做呢?

箭頭函式的this指向普通函式時,它的argumens繼承於該普通函式

上面是第一種情況:箭頭函式的this指向全域性物件,會報arguments未宣告的錯誤。

第二種情況是:箭頭函式的this如果指向普通函式,它的argumens繼承於該普通函式。

function bar() {
  console.log(arguments); // ['外層第二個普通函式的引數']
  bb('外層第一個普通函式的引數');
  function bb() {
    console.log(arguments); // ["外層第一個普通函式的引數"]
    let a = () => {
      console.log(arguments, 'arguments繼承this指向的那個普通函式'); // ["外層第一個普通函式的引數"]
    };
    a('箭頭函式的引數'); // this指向bb
  }
}
bar('外層第二個普通函式的引數');
複製程式碼

那麼應該如何來獲取箭頭函式不定數量的引數呢?答案是:ES6的rest引數(...擴充套件符)

rest引數獲取函式的多餘引數

這是ES6的API,用於獲取函式不定數量的引數陣列,這個API是用來替代arguments的,API用法如下:

let a = (first, ...abc) => {
  console.log(first, abc); // 1 [2, 3, 4]
};
a(1, 2, 3, 4);
複製程式碼

上面的栗子展示了,獲取函式除第一個確定的引數,以及用一個變數接收其他剩餘引數的示例。

也可以直接接收函式的所有引數,rest引數的用法相對於arguments的優點:

  1. 箭頭函式和普通函式都可以使用。

  2. 更加靈活,接收引數的數量完全自定義。

  3. 可讀性更好

    引數都是在函式括號中定義的,不會突然出現一個arguments,以前剛見到的時候,真的好奇怪了!

  4. rest是一個真正的陣列,可以使用陣列的API。

    因為arguments是一個類陣列的物件,有些人以為它是真正的陣列,所以會出現以下場景:

    arguments.push(0); // arguments.push is not a function
    複製程式碼

    如上,如果我們需要使用陣列的API,需要使用擴充套件符/Array.from來將它轉換成真正的陣列:

    arguments = [...arguments]; 或者 :arguments = Array.from(arguments);
    複製程式碼

rest引數有兩點需要注意

  1. rest必須是函式的最後一位引數:

    let a = (first, ...rest, three) => {
      console.log(first, rest,three); // 報錯:Rest parameter must be last formal parameter
    };
    a(1, 2, 3, 4);
    複製程式碼
  2. 函式的length屬性,不包括 rest 引數

    (function(...a) {}).length  // 0
    (function(a, ...b) {}).length  // 1
    複製程式碼

擴充套件運算子還可以用於陣列,這裡是阮一峰老師的文件

PS:感覺這裡寫多了,但比較喜歡把一個知識點講清楚...

使用new呼叫箭頭函式會報錯

無論箭頭函式的thsi指向哪裡,使用new呼叫箭頭函式都會報錯,因為箭頭函式沒有constructor

let a = () => {};
let b = new  a(); // a is not a constructor
複製程式碼

箭頭函式不支援new.target

new.target是ES6新引入的屬性,普通函式如果通過new呼叫,new.target會返回該函式的引用。

此屬性主要:用於確定建構函式是否為new呼叫的。

  1. 箭頭函式的this指向全域性物件,在箭頭函式中使用箭頭函式會報錯

    let a = () => {
      console.log(new.target); // 報錯:new.target 不允許在這裡使用
    };
    a();
    複製程式碼
  2. 箭頭函式的this指向普通函式,它的new.target就是指向該普通函式的引用。

    new bb();
    function bb() {
      let a = () => {
        console.log(new.target); // 指向函式bb:function bb(){...}
      };
      a();
    }
    複製程式碼

更多關於new.target可以看一下阮一峰老師關於這部分的解釋

箭頭函式不支援重新命名函式引數,普通函式的函式引數支援重新命名

如下示例,普通函式的函式引數支援重新命名,後面出現的會覆蓋前面的,箭頭函式會丟擲錯誤:

function func1(a, a) {
  console.log(a, arguments); // 2 [1,2]
}

var func2 = (a,a) => {
  console.log(a); // 報錯:在此上下文中不允許重複引數名稱
};
func1(1, 2); func2(1, 2);
複製程式碼

箭頭函式相對於普通函式語法更簡潔優雅:

講道理,語法上的不同,也屬與它們兩個的區別!

  1. 箭頭函式都是匿名函式,並且都不用寫function

  2. 只有一個引數的時候可以省略括號:

    var f = a => a; // 傳入a 返回a
    複製程式碼
  3. 函式只有一條語句時可以省略{}return

    var f = (a,b,c) => a; // 傳入a,b,c 返回a
    複製程式碼
  4. 簡化回撥函式,讓你的回撥函式更優雅:

[1,2,3].map(function (x) {
  return x * x;
}); // 普通函式寫法 
[1,2,3].map(x => x * x); // 箭頭函式只需要一行
複製程式碼

箭頭函式的注意事項及不適用場景

箭頭函式的注意事項

  1. 一條語句返回物件字面量,需要加括號,或者直接寫成多條語句的return形式,

    否則像func中演示的一樣,花括號會被解析為多條語句的花括號,不能正確解析

var func1 = () => { foo: 1 }; // 想返回一個物件,花括號被當成多條語句來解析,執行後返回undefined
var func2 = () => ({foo: 1}); // 用圓括號是正確的寫法
var func2 = () => {
  return {
    foo: 1 // 更推薦直接當成多條語句的形式來寫,可讀性高
  };
};
複製程式碼
  1. 箭頭函式在引數和箭頭之間不能換行!
var func = ()
           => 1;  // 報錯: Unexpected token =>
複製程式碼
  1. 箭頭函式的解析順序相對靠前

MDN: 雖然箭頭函式中的箭頭不是運算子,但箭頭函式具有與常規函式不同的特殊運算子優先順序解析規則

let a = false || function() {}; // ok
let b = false || () => {}; // Malformed arrow function parameter list
let c = false || (() => {}); // ok
複製程式碼

箭頭函式不適用場景:

圍繞兩點:箭頭函式的this意外指向和程式碼的可讀性。

  1. 定義字面量方法,this的意外指向。

因為箭頭函式的簡潔

const obj = {
  array: [1, 2, 3],
  sum: () => {
    // 根據上文學到的:外層沒有普通函式this會指向全域性物件
    return this.array.push('全域性物件下沒有array,這裡會報錯'); // 找不到push方法
  }
};
obj.sum();
複製程式碼

上述栗子使用普通函式或者ES6中的方法簡寫的來定義方法,就沒有問題了:

// 這兩種寫法是等價的
sum() {
  return this.array.push('this指向obj');
}
sum: function() {
  return this.array.push('this指向obj');
}
複製程式碼

還有一種情況是給普通函式的原型定義方法的時候,通常會在普通函式的外部進行定義,比如說繼承/新增方法的時候。

這時候因為沒有在普通函式的內部進行定義,所以this會指向其他普通函式,或者全域性物件上,導致bug!

  1. 回撥函式的動態this

下文是一個修改dom文字的操作,因為this指向錯誤,導致修改失敗:

const button = document.getElementById('myButton');
button.addEventListener('click', () => {
    this.innerHTML = 'Clicked button'; // this又指向了全域性
});
複製程式碼

相信你也知道了,改成普通函式就成了。

  1. 考慮程式碼的可讀性,使用普通函式

    • 函式體複雜:

      具體表現就是箭頭函式中使用多個三元運算子號,就是不換行,非要在一行內寫完,非常噁心!

    • 行數較多

    • 函式內部有大量操作

文章內容小結:

普通函式和箭頭函式的區別:

  1. 箭頭函式沒有prototype(原型),所以箭頭函式本身沒有this
  2. 箭頭函式的this在定義的時候繼承自外層第一個普通函式的this。
  3. 如果箭頭函式外層沒有普通函式,嚴格模式和非嚴格模式下它的this都會指向window(全域性物件)
  4. 箭頭函式本身的this指向不能改變,但可以修改它要繼承的物件的this。
  5. 箭頭函式的this指向全域性,使用arguments會報未宣告的錯誤。
  6. 箭頭函式的this指向普通函式時,它的argumens繼承於該普通函式
  7. 使用new呼叫箭頭函式會報錯,因為箭頭函式沒有constructor
  8. 箭頭函式不支援new.target
  9. 箭頭函式不支援重新命名函式引數,普通函式的函式引數支援重新命名
  10. 箭頭函式相對於普通函式語法更簡潔優雅

箭頭函式的注意事項及不適用場景

箭頭函式的注意事項

  1. 箭頭函式一條語句返回物件字面量,需要加括號
  2. 箭頭函式在引數和箭頭之間不能換行
  3. 箭頭函式的解析順序相對||靠前

不適用場景:箭頭函式的this意外指向和程式碼的可讀性。


結語

嘔心瀝血,可以說是很全了,反正第一次問到我的時候只能想到箭頭函式的this是繼承而來的,以及語法上的簡潔性,其他的我都不知道,希望這篇文章能夠幫助各位同學學到知識。

PS:目前找工作中,求大佬們內推,中高階前端,偏JS,Vue,上海楊浦。

部落格前端積累文件公眾號GitHub、wx:OBkoro1、郵箱:obkoro1@foxmail.com

以上2019.03.22

參考資料:

MDN 箭頭函式

阮一峰-ES6入門

什麼時候你不能使用箭頭函式?

相關文章