你知道new一個物件時，js做啥了嗎

前言

在 JavaScript 中, 透過 new 運算子可以建立一個實例對象，而這個實例物件繼承了原始物件的屬性和方法。因此，new 存在的意義在於它實作了 JavaScript 中的繼承，而不僅僅是實例化了一個物件。

new 的作用

我們先透過範例來了解 new 的作用，範例如下：

function Person(name) {
  this.name = name
}
Person.prototype.sayName = function () {
  console.log(this.name)
}
const t = new Person('小明')
console.log(t.name)  // 小明
t.sayName()  // 小明

從上面的範例我們可以得出以下結論：

• new 透過建構子 Person 所建立的實例物件可以存取到建構函式中的屬性。

• new 透過建構子 Person 所建立的實例可以存取到建構子原型鏈中的屬性，也就是說透過 new 運算符，實例與建構子透過原型鏈連接了起來。

建構函數 Person 並沒有明確 return 任何值（預設回傳 undefined），如果我們讓它回傳值會發生什麼事呢？

function Person(name) {
  this.name = name
  return 1
}
const t = new Person('小明')
console.log(t.name)  // 小明

在上述範例中的建構函式中回傳了 1，但這個回傳值並沒有任何的用處，得到的結果還是跟之前的例子完全一樣。我們又可以得出一個結論：

建構子如果傳回原始值，那麼這個回傳值就毫無意義。

我們再來試試返回物件會發生什麼：

function Person(name) {
  this.name = name
  return {age: 23}
}
const t = new Person('小明')
console.log(t)  // { age: 23 }
console.log(t.name)  // undefined

透過上面這個範例我們可以發現，當傳回值為物件時，這個回傳值就會被正常的傳回出去。我們再次得出了一個結論：

建構函數如果傳回值為對象，那麼這個回傳值會被正常使用。

總結：這兩個例子告訴我們，建構子盡量不要回傳值。因為傳回原始值不會生效，回傳物件會導致 new 操作符沒有作用。

實作new

首先我們要清楚，在使用 new 運算子時，js 做了哪些事情:

1. js 在內部創建了一個物件
2. 這個物件可以存取到建構函式原型上的屬性，所以需要將物件與建構函式連接起來
3. 建構函式內部的this被賦值為這個新物件(即this指向新物件)
4. 返回原始值需要忽略，返回物件需要正常處理

#知道了步驟後，我們就可以著手來實作new 的功能了:

function _new(fn, ...args) {
  const newObj = Object.create(fn.prototype);
  const value = fn.apply(newObj, args);
  return value instanceof Object ? value : newObj;
}

測試範例如下：

function Person(name) {
  this.name = name;
}
Person.prototype.sayName = function () {
  console.log(this.name);
};

const t = _new(Person, "小明");
console.log(t.name);  // 小明
t.sayName();  // 小明

以上就是關於JavaScript 中new 運算元的作用，以及如何來實作一個new 運算子。

以上是你知道new一個物件時，js做啥了嗎的詳細內容。更多資訊請關注PHP中文網其他相關文章！