JavaScript中的new操作符怎么使用

本篇內容介紹了“JavaScript中的new操作符怎么使用”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

new做了什么?

首先，當我們使用new操作符調用一個函數時，這個函數就會被當作一個構造函數，也就是說，它會用來創建一個新的對象實例。例如：

function Person(name) {  
    this.name = name;
}  
var p1 = new Person("Allen");

這里，我們定義了一個Person函數，然后用new操作符創建了一個p1對象，這個對象的類型是Person，它有個name屬性，賦值為"Allen"。

那么，具體來說，new操作符做了哪些事情呢？我們可以總結為以下四個步驟：

• 創建一個空的JavaScript對象，我們暫且叫它newInstance。

• 將newInstance的[[Prototype]]屬性指向構造函數的prototype屬性，如果prototype是一個對象的話。否則，newInstance保持為一個普通對象，它的[[Prototype]]指向Object.prototype。注意：[[Prototype]]是一個內部屬性，它表示對象的原型鏈。通過這一步，newInstance就可以繼承構造函數原型上的屬性和方法。

• 執行構造函數，并將newInstance作為this的上下文（也就是說，在構造函數中所有對this的引用都指向newInstance）。這樣，構造函數就可以給newInstance添加一些自身的屬性和方法。

• 如果構造函數返回了一個非原始值（比如一個對象或者一個函數），那么這個返回值就會成為整個new表達式的結果。否則，如果構造函數沒有返回任何值或者返回了一個原始值（比如一個數字或者一個字符串），那么newInstance就會成為整個new表達式的結果。（通常情況下，構造函數不會返回任何值，但是它可以選擇這樣做來覆蓋正常的對象創建過程。）

例如：

function Foo(bar) {  
    this.bar = bar;  
}  
Foo.prototype.baz = function() {  
    console.log(this.bar);  
};  
var f1 = new Foo("Hello"); // f1是Foo類型的對象，它有bar屬性和baz方法  
var f2 = new Foo("World"); // f2也是Foo類型的對象，它也有bar屬性和baz方法  
f1.baz(); // Hello  
f2.baz(); // World  
function Bar() {  
    return {  
        name: "Bar"  
    };  
}  
var b1 = new Bar(); // b1是一個普通對象，它有name屬性  
console.log(b1 instanceof Bar); // false

這里，我們定義了兩個函數Foo和Bar，并用new操作符創建了f1、f2和b1三個對象。可以看到，f1和f2都是Foo類型的對象，它們繼承了Foo.prototype上的baz方法，并且有自己的bar屬性。而b1則是一個普通對象，它只有name屬性，并不屬于Bar類型，因為Bar函數返回了一個對象。

如何手寫一個new

底層實現上，class還是基于原型繼承和構造函數的。基于這個理解:

function newInstance(constructor, ...args) {
  // 創建一個空對象，且 __proto__ 指向 constructor.prototype
  const obj = Object.create(constructor.prototype);
  // 執行構造函數并綁定 this 到新對象上
  const result = constructor.apply(obj, args);
  // 如果構造函數返回了一個對象，則返回該對象
  if (result && (typeof result === "object" || typeof result === "function")) {
    return result;
  }
  // 否則返回新對象
  return obj;
}
// 示例使用
function Person(name) {
  this.name = name;
}
Person.prototype.greet = function() {
  console.log(`Hello, I'm ${this.name}.`);
};
const person1 = newInstance(Person, "Allen");
person1.greet(); // 輸出 "Hello, I'm Allen."

上述代碼中，myNew 函數模擬了 new 操作符的行為，它接受兩個參數：構造函數和構造函數的參數，返回一個新的實例對象。在函數內部，首先創建了一個新的空對象 obj，然后將該對象的 __proto__ 屬性指向構造函數的原型對象，從而實現了原型繼承。接著將構造函數的 this 綁定到新對象上，并執行構造函數。如果構造函數返回的是一個對象，則直接返回該對象，否則返回新創建的對象 obj。

“JavaScript中的new操作符怎么使用”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！