new 命令的原理

aikin 發(fā)布于2019-08-23 13:47 / 474人閱讀

摘要：創(chuàng)建一個空對象，作為將要返回的對象實例將這個空對象的原型，指向構(gòu)造函數(shù)的屬性。如果構(gòu)造函數(shù)內(nèi)部有語句，而且后面跟著一個對象，命令會返回語句指定的對象否則，就會不管語句，返回對象。

前言

之前一直沒完全弄清楚js原型鏈和繼承，有時候是自己的理解，有時候靠死記；最近要回頭看看js的基礎(chǔ)，順便記錄一些內(nèi)容。摘抄于阮一峰大神；如果想好好復(fù)習(xí)一下js基礎(chǔ)內(nèi)容，戳這里https://wangdoc.com/javascrip...

使用new命令時，它后面的函數(shù)依次執(zhí)行下面的步驟。

1.創(chuàng)建一個空對象，作為將要返回的對象實例.
2.將這個空對象的原型，指向構(gòu)造函數(shù)的prototype屬性。
3.將這個空對象賦值給函數(shù)內(nèi)部的this關(guān)鍵字。
4.開始執(zhí)行構(gòu)造函數(shù)內(nèi)部的代碼

也就是說，構(gòu)造函數(shù)內(nèi)部，this指的是一個新生成的空對象，所有針對this的操作，都會發(fā)生在這個空對象上。構(gòu)造函數(shù)之所以叫“構(gòu)造函數(shù)”，就是說這個函數(shù)的目的，就是操作一個空對象（即this對象），將其“構(gòu)造”為需要的樣子。

如果構(gòu)造函數(shù)內(nèi)部有return語句，而且return后面跟著一個對象，new命令會返回return語句指定的對象；否則，就會不管return語句，返回this對象。

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

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

new命令簡化的內(nèi)部流程，可以用下面的代碼表示。

function _new(/* 構(gòu)造函數(shù) */ constructor, /* 構(gòu)造函數(shù)參數(shù) */ params) {
  // 將 arguments 對象轉(zhuǎn)為數(shù)組
  var args = [].slice.call(arguments);
  // 取出構(gòu)造函數(shù)
  var constructor = args.shift();
  // 創(chuàng)建一個空對象，繼承構(gòu)造函數(shù)的 prototype 屬性
  var context = Object.create(constructor.prototype);
  // 執(zhí)行構(gòu)造函數(shù)
  var result = constructor.apply(context, args);
  // 如果返回結(jié)果是對象，就直接返回，否則返回 context 對象
  return (typeof result === "object" && result != null) ? result : context;
}

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