JavaScript 中的「new」運算子在內部如何運作？

理解JavaScript 中「new」運算子的內部工作原理

「new」運算子被認為是JavaScript 的神秘面紗之一因其在物件創建中的作用而令開發人員著迷。本文深入探討了「new」運算子的複雜機制，透過另一種實現方式揭示其本質。

「new」運算子背後的函數

「new」運算子運算子在內部呼叫其後面的函數的 [[Construct]] 方法。此方法在物件建立過程中扮演關鍵角色：

1. 物件初始化:

   • 它初始化一個原始的原生JavaScript 物件.

2. 原型連結:

   • 它在新建立的物件的內部[[Prototype]] 屬性之間建立連接和函數的原型屬性。
   • 如果函數的原型屬性不是對象，則選擇 Object.prototype。

3. 函數呼叫:

   • 執行與「new」運算子關聯的函數，利用新建立的物件作為其“this”值。

傳回值之謎

「new」運算子的結果取決於被呼叫函數的回傳值：

• 原始回傳Value：如果函數傳回一個原始值（例如，Number、String），則傳回內部建立的物件。
• 物件回傳值：如果函數傳回一個對象，內部物件被丟棄，傳回的物件優先。

替代實現

為了理解「new」運算符的內部工作原理，讓我們來探索模仿其行為的替代實現：

<code class="javascript">function NEW(f) {
  var obj, ret, proto;

  proto = Object(f.prototype) === f.prototype ? f.prototype : Object.prototype;
  obj = Object.create(proto);
  ret = f.apply(obj, Array.prototype.slice.call(arguments, 1));

  if (Object(ret) === ret) {
    return ret;
  }
  return obj;
}</code>

用法範例：

<code class="javascript">function Foo (arg) {
  this.prop = arg;
}

Foo.prototype.inherited = 'baz';

var obj = NEW(Foo, 'bar');

console.log(obj.prop);          // 'bar'
console.log(obj.inherited);     // 'baz'
console.log(obj instanceof Foo); // true</code>

結論

透過這個替代實現，我們全面了解了「new」算子在物件創建和原型鏈建立中的重要作用。在理解其複雜的機制後，開發人員能夠利用 JavaScript 物件導向程式設計功能的強大功能。

以上是JavaScript 中的「new」運算子在內部如何運作？的詳細內容。更多資訊請關注PHP中文網其他相關文章！