JavaScript - new 关键字

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

当使用 new 关键字调用 JavaScript 函数时，该函数将用作构造函数。 new 关键字将执行以下操作:

• 创建一个空白的 JavaScript 对象。

• 设置其原型以供继承。

• 将 this 变量与新创建的对象内部绑定。

• 每当使用 this 时，使用新创建的对象执行构造函数。

• 返回新创建的对象，除非构造函数返回非空的对象引用。

new 关键字也用于创建 JavaScript 内置对象(例如字符串、布尔值、数字等)的实例。

语法

在 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

在 Class 中使用 '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'); 
      // 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