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

打印页面