JavaScript - new 关键字

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

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

创建一个空白/空的 JavaScript 对象。
设置其原型以进行继承。
在内部将此变量与新创建的对象绑定。
每当使用 new crated 对象时，使用 new crated 对象执行构造函数。
返回新创建的对象，除非 contractor 函数返回非 null 对象引用。

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

语法

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


 new Constructor(arguments);

参数

Constructor − 它是构造函数或类名称的名称。
arguments − 可以是多个参数来使用它们初始化对象属性。

返回值

如果 Constructor 不返回任何内容或原始值，则返回新创建的对象。
如果 Constructor 返回非原始值，则返回 constructor 函数返回的值。

在函数构造函数中使用 'new' 关键字

要将函数用作构造函数，我们应该使用 new 关键字调用函数，将其放在函数名称之前。

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

按照下面的语法使用 'new' 关键字和 constructor 函数来定义对象。


 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;
	 	 	 	 	}
	 	 	 }
	 	 	 // 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 关键字来定义 numeric 和 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

打印本页