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

本系列文章詳細深入Vue.js的源代碼，以此來說明JavaScript的基本概念，嘗試將這些概念分解到JavaScript初學者可以理解的水平。有關本系列的一些后續的計划和軌跡的更多信息，請參閱此文章。有關本系列的文章更新進度的信息，請關注我的Tweeter。本系列的文章目錄，請查看該鏈接。

Vue對象構造函數

Vue實例是深入了解Vue源代碼的一個基本點。正如Vue官方文檔所說那樣，“每個Vue應用程序都是通過使用Vue函數創建一個新的Vue實例來開始的。”

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

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對象構造函數接收一個參數：options

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

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

[....]
  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對象構造函數的實例。

[....]
  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作為構造函數來調用。

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

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

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。如果你喜歡這個系列，並想激勵我繼續努力，鼓勵，跟隨，回應或分享你的內心。

下一篇：initMixin函數

(END 2019/05/19)

原文鏈接

https://medium.com/@oneminutejs/a-deep-dive-in-the-vue-js-source-code-fd9638c05c05