【譯】Vue源碼學習（一）：Vue對象構造函數

時間 2019-12-10

標籤 vue 源碼學習對象構造函數简体版

原文原文鏈接

本系列文章詳細深刻Vue.js的源代碼，以此來講明JavaScript的基本概念，嘗試將這些概念分解到JavaScript初學者能夠理解的水平。有關本系列的一些後續的計劃和軌跡的更多信息，請參閱此文章。有關本系列的文章更新進度的信息，請關注個人Tweeter。本系列的文章目錄，請查看該連接。html

Vue對象構造函數

Vue實例是深刻了解Vue源代碼的一個基本點。正如Vue官方文檔所說那樣，「每一個Vue應用程序都是經過使用Vue函數建立一個新的Vue實例來開始的。」vue

在Vue的源碼中，一個新的Vue實例是使用Vue對象的構造函數建立的。ide

function Vue (options) {
  if (process.env.NODE_ENV !== 'production' &&
    !(this instanceof Vue)
  ) {
    warn('Vue is a constructor and should be called with the `new` keyword');
  }
  this._init(options);
}

一個對象的構造函數是建立其餘對象的一個藍本。對象構造函數按約定一般是以大寫字母開頭。函數

function Vue (options) {
[. . . .]
}

經過new關鍵字來調用一個對象構造函數。例如，你應該會按一下方式調用Vue構造函數：測試

var vm = new Vue({
  // options
})

調用對象構造函數會返回一個新的對象，而且將this關鍵字指向爲返回的對象。
Vue對象構造函數接收一個參數：optionsui

function Vue (options) {
[. . . .]
}

Vue對象構造函數使用if語句測試當前環境不爲生產環境this

[....]
  if (process.env.NODE_ENV !== 'production' &&
    !(this instanceof Vue)
  ) {
    warn('Vue is a constructor and should be called with the `new` keyword');
  }
[....]

若是當前環境爲生產環境，則&&短路邏輯爲false，其他的表達式則不執行。
若是是在開發環境，對象構造函數會檢查this是否不是Vue對象構造函數的實例。prototype

[....]
  if (process.env.NODE_ENV !== ‘production’ &&
    !(this instanceof Vue)
  ) {
    warn(‘Vue is a constructor and should be called with the `new` keyword’);
  }
[....]

若是是在開發環境下而且this不是Vue對象構造函數的實例，則該對象構造函數調用warn函數並傳入一個字符串做爲一個參數，通知開發者使用new關鍵字將Vue做爲構造函數來調用。code

[....]
  if (process.env.NODE_ENV !== ‘production’ &&
    !(this instanceof Vue)
  ) {
    warn(‘Vue is a constructor and should be called with the `new` keyword’);
  }
[....]

咱們將會在另外一篇文章來介紹warn函數的實現細節。若是你認真細看，會注意到使用單引號和勾號傳遞給warn函數。htm

warn('Vue is a constructor and should be called with the `new` keyword');

在單引號中間使用勾號明顯的好處是具備防止引用過早結束。

最後，Vue構造函數調用方法this._init 而且傳入參數options

function Vue (options) {
  [....]
  this._init(options);
}

但等一下，_init方法在this對象中哪裏定義的？正如咱們所見，這個方法並無定義在構造函數中。快速查找源碼能夠發現該._init在一個名爲initMixin的單獨函數中加到了Vue.prototype中。
咱們下次再詳細介紹initMixin。若是你喜歡這個系列，並想激勵我繼續努力，鼓勵，跟隨，迴應或分享你的心裏。