曾經我覺得我很懂箭頭函數

曾經我以爲我本身已經很瞭解箭頭函數了，不可能再被坑了。但是前幾天我遇到了一個很奇怪的問題，在苦惱了好久後，發現就是箭頭函數帶來的坑。所以，就有了這一篇文章~

問題描述

好比我有一個基類 Animal，它有一個基礎方法 sayName。以後每個繼承於它的子類，都須要本身實現這個 sayName 方法來證實本身的身份。基類代碼實現很簡單:

class Animal {
	sayName = () => {
		throw new Error('你應該本身實現這個方法');
  }
}
複製代碼

那麼我如今要繼承於 Animal 基類來實現一個 Pig 子類，實現也很簡單：

class Pig extends Animal {
	sayName() {
		console.log('I am a Pig');
	}
}
複製代碼

誒，這麼簡單就搞定了嗎？哪裏有坑啊？然而，實際上跑起來你就會發現，結果不如預期：

誒，爲何會這樣呢。到底哪裏出現了問題呢？這短短的幾行代碼，爲啥就能報錯呢。

發現問題

通過一頓折騰以後，最後發現是箭頭函數的坑。咱們只須要把 Animal 基類的 sayName 改成 普通函數，或者把 Pig 子類的 sayName 改成箭頭函數，就能夠解決這個問題。那麼，箭頭函數到底搞了什麼鬼呢？

寫到這裏，我突然想起來，這個問題我曾經被一個面試官面試過！當時面試官問的是對於類而言，箭頭函數和類普通函數、constructor 裏 bind 的函數有什麼區別。當時回答的頭頭是道，結果遇到繼承的狀況下，就翻水水了。那麼要解答上面這個問題，那就先來解答面試的這個問題吧。

箭頭函數和類普通函數、constructor 裏 bind 的函數有什麼區別

爲了比較直觀的看這個問題，咱們能夠藉助 babel的代碼編譯結果來更好的看出區別。

首先咱們先輸入一段簡單的代碼

class A {
  	constructor() {
		this.b = this.b.bind(this);    	
    }
  
    a() {
    	console.log('a');
    }
	  b() {
    	console.log('b')
    }
    c = () => {
    	console.log('c')
    }
}
複製代碼

咱們來看看會babel編譯成什麼樣子:

"use strict";

function _instanceof(left, right) { if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) { return !!right[Symbol.hasInstance](left); } else { return left instanceof right; } }

function _classCallCheck(instance, Constructor) { if (!_instanceof(instance, Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

var A = /*#__PURE__*/function () {
  function A() {
    _classCallCheck(this, A);

    _defineProperty(this, "c", function () {
      console.log('c');
    });

    this.b = this.b.bind(this);
  }

  _createClass(A, [{
    key: "a",
    value: function a() {
      console.log('a');
    }
  }, {
    key: "b",
    value: function b() {
      console.log('b');
    }
  }]);

  return A;
}();
複製代碼

編譯後的代碼有一大半都是輔助的函數，咱們能夠只看重點的一部分：

var A = /*#__PURE__*/function () {
  function A() {
    _classCallCheck(this, A);

    _defineProperty(this, "c", function () {
      console.log('c');
    });

    this.b = this.b.bind(this);
  }

  _createClass(A, [{
    key: "a",
    value: function a() {
      console.log('a');
    }
  }, {
    key: "b",
    value: function b() {
      console.log('b');
    }
  }]);

  return A;
}();
複製代碼

從編譯後的結果，咱們能夠看出彼此的區別：

• 普通函數: 在 babel 編譯後，會被放在函數的 prototype 上
• constructor 裏 bind 的函數: 在編譯後，它不只會被放在函數的 prototype 裏，並且每一次實例化，都會產生一個綁定當前實例上下文的變量(this.b = this.b.bind(this))。
• 箭頭函數：在 babel 編譯後，每一次實例化的時候，都會調用 defineProperty 將箭頭函數內容綁定在當前實例上下文上。

從編譯後的結果來看的話，對於實際開發的時候，若是須要綁定上下文的話，最好仍是用箭頭函數。由於使用 bind 方式的話，不只會產生一個 prototype 的函數，每一次實例化都會額外產生多一個函數。

回到主題

在咱們解決了上一個問題以後，讓咱們回到主題。瞭解了類的箭頭函數在實際編譯狀況下的編譯結果後，其實對於咱們那個問題就比較好理解了。

Q: 爲何子類使用普通函數的方式聲明 sayName 的時候，執行就會出問題呢。

A: 子類使用普通函數的方式聲明 sayName 的話，子類聲明的 sayName 會被放在構造函數的 prototype 上。但是因爲基類的 sayName 是使用箭頭函數的方式，所以每個實例都會直接有一個 sayName 變量。根據 javascript 變量的訪問規則，首先會在變量自己上找，找不到後纔會在原型鏈上找。所以，在查找 sayName 的時候，就直接找到基類聲明的 sayName 函數了，就不會再在原型鏈上找，所以就出現了問題。

Q: 爲何子類使用箭頭函數的方式聲明 sayName，執行就沒有問題。

A: es6 的類在初始化的時候，會先執行基類的構造函數，以後再執行自己的構造函數。所以，在基類初始化以後，子類聲明的箭頭函數 sayName 覆蓋了基類的，因此執行就沒有問題。

更新

看了下餘騰靖的評論，瞭解到了更本質的東西。

class 對於 = 號聲明的方法、變量，都會將其做爲實例的屬性，而對於非 = 號聲明的屬性，則是放在原型鏈上。好比

class A {
    a() {
        
    }
    b = 2;
    c = () => {
    }
}
複製代碼

對於這個類， 在實例化的時候，b, c 會做爲實例的屬性，而 a 則是放在原型鏈上。

那麼爲何會這樣實現呢？其實咱們能夠看 tc39 的規範裏就說到了這一點: Field declarations

對於直接寫等號聲明的實例，其實就是 Field declarations 的語法，等於直接聲明瞭這樣一個實例屬性。

總結

曾經我覺得我本身很瞭解箭頭函數了，沒想到仍是被坑了，果真仍是學無止境啊！不過也對類內箭頭函數有了更深入的認識。

本文地址在->本人博客地址, 歡迎給個 start 或 follow