new 命令的原理

前言

以前一直沒徹底弄清楚js原型鏈和繼承，有時候是本身的理解，有時候靠死記；最近要回頭看看js的基礎，順便記錄一些內容。摘抄於阮一峯大神；若是想好好複習一下js基礎內容，戳這裏https://wangdoc.com/javascrip...

使用new命令時，它後面的函數依次執行下面的步驟。

1.建立一個空對象，做爲將要返回的對象實例.
2.將這個空對象的原型，指向構造函數的prototype屬性。
3.將這個空對象賦值給函數內部的this關鍵字。
4.開始執行構造函數內部的代碼

也就是說，構造函數內部，this指的是一個新生成的空對象，全部針對this的操做，都會發生在這個空對象上。構造函數之因此叫「構造函數」，就是說這個函數的目的，就是操做一個空對象（即this對象），將其「構造」爲須要的樣子。

若是構造函數內部有return語句，並且return後面跟着一個對象，new命令會返回return語句指定的對象；不然，就會無論return語句，返回this對象。

var Vehicle = function () {
  this.price = 1000;
  return 1000;
};

(new Vehicle()) === 1000
// false

new命令簡化的內部流程，能夠用下面的代碼表示。

function _new(/* 構造函數 */ constructor, /* 構造函數參數 */ params) {
  // 將 arguments 對象轉爲數組
  var args = [].slice.call(arguments);
  // 取出構造函數
  var constructor = args.shift();
  // 建立一個空對象，繼承構造函數的 prototype 屬性
  var context = Object.create(constructor.prototype);
  // 執行構造函數
  var result = constructor.apply(context, args);
  // 若是返回結果是對象，就直接返回，不然返回 context 對象
  return (typeof result === 'object' && result != null) ? result : context;
}

// 實例
var actor = _new(Person, '張三', 28);