javascript的箭頭函數(shù)是什么

曾經(jīng)我覺得我自己已經(jīng)很了解箭頭函數(shù)了，不可能再被坑了?？墒乔皫滋煳矣龅搅艘粋€(gè)很奇怪的問題，在苦惱了很久后，發(fā)現(xiàn)就是箭頭函數(shù)帶來的坑。因此，就有了這一篇文章~

問題描述

比如我有一個(gè)基類 Animal，它有一個(gè)基礎(chǔ)方法 sayName。之后每一個(gè)繼承于它的子類，都需要自己實(shí)現(xiàn)這個(gè) sayName 方法來證明自己的身份?；惔a實(shí)現(xiàn)很簡(jiǎn)單:

class Animal {
	sayName = () => {
		throw new Error('你應(yīng)該自己實(shí)現(xiàn)這個(gè)方法');
  }
}

那么我現(xiàn)在要繼承于 Animal 基類來實(shí)現(xiàn)一個(gè) Pig 子類，實(shí)現(xiàn)也很簡(jiǎn)單：

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

誒，這么簡(jiǎn)單就搞定了嗎？哪里有坑啊？然而，實(shí)際上跑起來你就會(huì)發(fā)現(xiàn)，結(jié)果不如預(yù)期：

誒，為什么會(huì)這樣呢。到底哪里出現(xiàn)了問題呢？這短短的幾行代碼，為啥就能報(bào)錯(cuò)呢。

發(fā)現(xiàn)問題

經(jīng)過一頓折騰之后，最后發(fā)現(xiàn)是箭頭函數(shù)的坑。我們只需要把 Animal 基類的 sayName 改為 普通函數(shù)，或者把 Pig 子類的 sayName 改為箭頭函數(shù)，就可以解決這個(gè)問題。那么，箭頭函數(shù)到底搞了什么鬼呢？

寫到這里，我忽然想起來，這個(gè)問題我曾經(jīng)被一個(gè)面試官面試過！當(dāng)時(shí)面試官問的是對(duì)于類而言，箭頭函數(shù)和類普通函數(shù)、constructor 里 bind 的函數(shù)有什么區(qū)別。當(dāng)時(shí)回答的頭頭是道，結(jié)果遇到繼承的情況下，就翻水水了。那么要解答上面這個(gè)問題，那就先來解答面試的這個(gè)問題吧。

箭頭函數(shù)和類普通函數(shù)、constructor 里 bind 的函數(shù)有什么區(qū)別

為了比較直觀的看這個(gè)問題，我們可以借助 babel的代碼編譯結(jié)果來更好的看出區(qū)別。

首先我們先輸入一段簡(jiǎn)單的代碼

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

我們來看看會(huì)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;
}();

編譯后的代碼有一大半都是輔助的函數(shù)，我們可以只看重點(diǎn)的一部分：

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;
}();

從編譯后的結(jié)果，我們可以看出彼此的區(qū)別：

• 普通函數(shù): 在 babel 編譯后，會(huì)被放在函數(shù)的 prototype 上

• constructor 里 bind 的函數(shù): 在編譯后，它不僅會(huì)被放在函數(shù)的 prototype 里，而且每一次實(shí)例化，都會(huì)產(chǎn)生一個(gè)綁定當(dāng)前實(shí)例上下文的變量(this.b = this.b.bind(this))。

• 箭頭函數(shù)：在 babel 編譯后，每一次實(shí)例化的時(shí)候，都會(huì)調(diào)用 defineProperty 將箭頭函數(shù)內(nèi)容綁定在當(dāng)前實(shí)例上下文上。

從編譯后的結(jié)果來看的話，對(duì)于實(shí)際開發(fā)的時(shí)候，如果需要綁定上下文的話，最好還是用箭頭函數(shù)。因?yàn)槭褂?bind 方式的話，不僅會(huì)產(chǎn)生一個(gè) prototype 的函數(shù)，每一次實(shí)例化都會(huì)額外產(chǎn)生多一個(gè)函數(shù)。

更新

看了下余騰靖的評(píng)論，了解到了更本質(zhì)的東西。

class 對(duì)于 = 號(hào)聲明的方法、變量，都會(huì)將其作為實(shí)例的屬性，而對(duì)于非 = 號(hào)聲明的屬性，則是放在原型鏈上。比如

class A {
    a() {
        
    }
    b = 2;
    c = () => {
    }
}

對(duì)于這個(gè)類， 在實(shí)例化的時(shí)候，b, c 會(huì)作為實(shí)例的屬性，而 a 則是放在原型鏈上。

那么為什么會(huì)這樣實(shí)現(xiàn)呢？其實(shí)我們可以看 tc39 的規(guī)范里就說到了這一點(diǎn): Field declarations

對(duì)于直接寫等號(hào)聲明的實(shí)例，其實(shí)就是 Field declarations 的語法，等于直接聲明了這樣一個(gè)實(shí)例屬性。

回到主題

在我們解決了上一個(gè)問題之后，讓我們回到主題。了解了類的箭頭函數(shù)在實(shí)際編譯情況下的編譯結(jié)果后，其實(shí)對(duì)于我們那個(gè)問題就比較好理解了。

Q: 為什么子類使用普通函數(shù)的方式聲明 sayName 的時(shí)候，執(zhí)行就會(huì)出問題呢。

A: 子類使用普通函數(shù)的方式聲明 sayName 的話，子類聲明的 sayName 會(huì)被放在構(gòu)造函數(shù)的 prototype 上?？墒怯捎诨惖?sayName 是使用箭頭函數(shù)的方式，因此每一個(gè)實(shí)例都會(huì)直接有一個(gè) sayName 變量。根據(jù) javascript 變量的訪問規(guī)則，首先會(huì)在變量本身上找，找不到后才會(huì)在原型鏈上找。因此，在查找 sayName 的時(shí)候，就直接找到基類聲明的 sayName 函數(shù)了，就不會(huì)再在原型鏈上找，因此就出現(xiàn)了問題。

Q: 為什么子類使用箭頭函數(shù)的方式聲明 sayName，執(zhí)行就沒有問題。

A: es6 的類在初始化的時(shí)候，會(huì)先執(zhí)行基類的構(gòu)造函數(shù)，之后再執(zhí)行本身的構(gòu)造函數(shù)。因此，在基類初始化之后，子類聲明的箭頭函數(shù) sayName 覆蓋了基類的，所以執(zhí)行就沒有問題。

總結(jié)

曾經(jīng)我以為我自己很了解箭頭函數(shù)了，沒想到還是被坑了，果然還是學(xué)無止境?。〔贿^也對(duì)類內(nèi)箭頭函數(shù)有了更深刻的認(rèn)識(shí)。

但是經(jīng)過評(píng)論區(qū)各位大佬的提醒，發(fā)現(xiàn)其實(shí)并不是箭頭函數(shù)引起的問題，在 class 里用 = 號(hào)聲明的變量屬于 Field declarations 的語法。對(duì)于這種寫法聲明的變量，其實(shí)是會(huì)直接掛載到實(shí)例的屬性上面，而不是掛載到原型鏈上。

以上就是箭頭函數(shù)的理解的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注億速云其它相關(guān)文章！