JavaScript new 关键字

在 JavaScript 中，new 关键字用于创建由构造函数定义的对象实例。使用 new 关键字，我们可以创建用户定义的以及内置的对象类型实例。我们还可以创建类、原型或构造函数的实例。

当一个 JavaScript 函数与 new 关键字一起被调用时，该函数被用作构造器。new 关键字会执行以下操作：

创建一个新的空 JavaScript 对象。
设置其原型以便继承。
内部将 this 变量绑定到新创建的对象。
使用新创建的对象执行构造函数，每当 this 被使用时。
返回新创建的对象，除非构造函数返回一个非空对象引用。

new 关键字也可用于创建如 String、Boolean、Number 等 JavaScript 内置对象的实例。

语法

使用 new 关键字的语法如下：

new Constructor(arguments);

参数

Constructor - 这是构造函数的名字或类名。
arguments - 这可以是多个用于初始化对象属性的参数。

返回值

如果构造函数返回 null 或者一个原始值，则返回新创建的对象。
如果构造函数返回一个非原始值（即对象），则返回构造函数返回的值。

使用 `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;
         }
      }
      // 创建 WindowClass 类的实例
      const window1 = new WindowClass('blue', 'small', 'wooden'); 
      // 调用函数对象
      window1.getDetails(); 
   </script>
</body>
</html>

输出：

Color: blue
Size: small
Type: wooden

使用 `new` 关键字与内置对象

你也可以使用 new 关键字定义具有构造函数的内置对象的实例。

遵循以下语法来创建内置对象的实例：

const num = new Number(10);

在上面的语法中，我们将数值作为 Number() 构造函数的参数传递。

示例

在下面的代码中，我们使用 new 关键字与 Number() 和 String() 构造函数定义了数字和字符串对象。

之后，我们使用 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