Javascript 简明教程

JavaScript - new Keyword

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

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

  1. 创建一个空白/空 JavaScript 对象。

  2. 设置其原型以实现继承。

  3. 在此内部将 this 变量与新创建的对象绑定在一起。

  4. 每当 this 被使用时执行使用新创建对象的构造函数。

  5. 返回新创建的对象，除非承包商函数返回一个非空对象引用。

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

Syntax

在 JavaScript 中使用 new 关键字的语法如下 –

new Constructor(arguments);

Parameters

  1. 构造函数 − 这是构造函数或类名称。

  2. 参数 − 它可以是多个参数，用它们初始化对象属性。

Return Value

  1. 如果构造函数没有返回任何内容或一个基元值，它会返回新创建的对象。

  2. 如果构造函数返回一个非基元值，它会返回构造函数所返回的值。

Using 'new' keyword with Function Constructor

若要使用函数作为构造函数，我们应调用函数，并将 new 关键字置于函数名前。

我们可以使用函数构造函数定义多个对象。函数构造函数用作对象的原型。

按照以下语法来使用“new”关键字和构造函数以定义对象。

new FuncName(arguments);

Example

我们在以下代码中定义了 Watch() 构造函数。

Watch() 构造函数初始化了品牌、价格和类型属性。

之后，我们创建了 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"}

Example

在以下代码中，我们定义了 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

Using 'new' keyword with Class

还可以用 new 关键字来定义类的实例。类还为对象提供蓝图。

在 ES6 之前，构造函数用于定义对象的模板。在 ES6 之后，类用于定义对象的模板。

Example

在以下示例中，我们定义了“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

Using 'new' keyword with built-in object

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

按照以下语法来创建内置对象 Number 的实例。

const num = new Number(10);

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

Example

在以下代码中，我们使用了 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