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