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 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>
输出
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>
输出
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>
输出
str = Hello, typeof str object