JavaScript - new 關鍵字

在 JavaScript 中，new 關鍵字用於建立具有建構函式的物件例項。使用 new 關鍵字，我們可以建立使用者定義和內建物件型別的例項。我們可以建立類、原型或建構函式的例項。

當 JavaScript 函式使用 new 關鍵字呼叫時，該函式將用作建構函式。new 關鍵字將執行以下操作：

建立一個空的 JavaScript 物件。
設定其原型以進行繼承。
在內部將this 變數繫結到新建立的物件。
每當使用this 時，都使用新建立的物件執行建構函式。
返回新建立的物件，除非建構函式返回非 null 物件引用。

new 關鍵字也用於建立內建 JavaScript 物件的例項，例如 String、Boolean、Number 等。

語法

在 JavaScript 中使用 new 關鍵字的語法如下：

new Constructor(arguments);

引數

Constructor − 這是建構函式的名稱或類名。
arguments − 可以有多個引數來初始化物件的屬性。

返回值

如果建構函式不返回任何值或返回一個原始值，則返回新建立的物件。
如果建構函式返回一個非原始值，則返回建構函式返回的值。

使用 'new' 關鍵字與函式建構函式

要將函式用作建構函式，我們應該使用 new 關鍵字呼叫該函式，將其放在函式名前。

我們可以使用函式建構函式定義多個物件。函式建構函式充當物件的原型。

請按照以下語法使用 'new' 關鍵字和建構函式來定義物件。

new FuncName(arguments);

示例

我們在下面的程式碼中定義了 Watch() 建構函式。

Watch() 建構函式初始化 brand、price 和 type 屬性。

之後，我們建立了 Watch() 函式的兩個新例項，並在輸出中列印了它們。

<html>
<body>
   <div id = "output"> </div>
   <script>
      function Watch(brand, price, type) {
      this.brand = brand;
      this.price = price;
      this.type = type;
   }
   const titan = new Watch('titen', 4000, 'analog');
   const sonata = new Watch('sonata', 3000, 'digital');
   document.getElementById('output').innerHTML += 
   "The titan object is: " + JSON.stringify(titan) + "<br>" +
   "The sonata object is: " + JSON.stringify(sonata);
</script>
</body>
</html>

輸出

The titan object is: {"brand":"titen","price":4000,"type":"analog"}
The sonata object is: {"brand":"sonata","price":3000,"type":"digital"}

示例

在下面的程式碼中，我們定義了 Laptop() 建構函式，初始化了與筆記型電腦相關的各種屬性。此外，我們還定義了 getLaptop() 函式，該函式列印筆記型電腦詳細資訊。

之後，我們建立了 Laptop() 物件的兩個例項，並對兩者都使用了 getLaptop() 方法。透過這種方式，您可以與不同的物件共享單個方法。

<html>
<body>
<div id = "output"> </div>
   <script>
   const output = document.getElementById('output');
   function Laptop(brand, model, processor) {
	  this.brand = brand;
	  this.model = model;
	  this.processor = processor;
	  this.getLaptop = function () {
	     output.innerHTML += this.brand + ", " + 
		 this.model + ", " + this.processor + "<br>";
      }
   }
   const HP = new Laptop('HP', "VIKING", "i7");
   const Dell = new Laptop('Dell', "Inspiron", "i5");
   HP.getLaptop();
   Dell.getLaptop();
   </script>
</body>
</html>

輸出

HP, VIKING, i7
Dell, Inspiron, i5

使用 'new' 關鍵字與類

您還可以使用 new 關鍵字來定義類的例項。類也提供了物件的藍圖。

在 ES6 之前，建構函式用於定義物件的模板。ES6 之後，類用於定義物件的模板。

示例

在下面的示例中，我們定義了 'WindowClass 類。在 'WindowClass' 中，我們添加了建構函式來初始化屬性。我們還在類中添加了 getDetails() 方法。

之後，我們使用 'new' 關鍵字後跟類名來定義 WindowClass 的物件。

接下來，我們在類的例項上呼叫 getDetails() 方法。

<html>
<body>
   <div id = "demo"> </div>
   <script>
      const output = document.getElementById('demo')
      class WindowClass {
         constructor(color, size, type) {
            this.color = color;
            this.size = size;
            this.type = type;
         }
         getDetails = function () {
            output.innerHTML =  
	        "Color: " + this.color + "<br>" +
            "Size: " + this.size + "<br>" +
            "Type: " + this.type;
         }
      }
      // Creating the instance of WindowClass class
      const window1 = new WindowClass('blue', 'small', 'wooden'); 
      // Calling function object
      window1.getDetails(); 
   </script>
</body>
</html>

輸出

Color: blue
Size: small
Type: wooden

使用 'new' 關鍵字與內建物件

您還可以使用 'new' 關鍵字來定義具有建構函式的內建物件的例項。

請按照以下語法建立 Number 內建物件的例項。

const num = new Number(10);

在上面的語法中，我們將數值作為 Number() 建構函式的引數傳遞。

示例

在下面的程式碼中，我們使用了 Number() 和 String() 建構函式以及 new 關鍵字來定義數字和字串物件。

之後，我們使用 'typeof' 運算子來檢查 num 和 str 變數的型別。在輸出中，您可以看到 num 和 str 變數的型別是物件。

<html>
<body>
   <div id = "output"> </div>
   <script>
      const num = new Number(10);
      const str = new String("Hello");
      document.getElementById("output").innerHTML = 
	  "num = " + num + ", typeof num " + typeof num + "<br>" +
      "str = " + str + ", typeof str " + typeof str;
   </script>
</body>
</html>

輸出

num = 10, typeof num object
str = Hello, typeof str object

列印頁面