JS使用new操作符创建对象的方法分析

2023年5月27日上午6:50 • JavaScript

下面是“JS使用new操作符创建对象的方法分析”的攻略：

1. 创建对象的方式

JS有多种创建对象的方式，常用的有四种：

使用对象字面量创建对象；
使用构造函数创建对象；
使用Object.create()方法创建对象；
使用class和constructor方法创建对象。

而本题讨论的是第二种方式，使用构造函数创建对象。

2. 构造函数概述

构造函数是JS中创建对象的一种方式。顾名思义，构造函数用来构造一个新出来的对象，它像函数一样被调用，但返回一个新的对象。

使用构造函数，可以创建任意类型的对象，包括函数、对象、数组等。当调用构造函数时，使用new操作符来创建一个新对象。我们可以通过在构造函数中使用this关键字来为新对象设置属性和方法。

3. 创建对象的步骤

使用构造函数创建对象的步骤如下：

创建一个构造函数；
在构造函数中，使用this关键字来设置新对象的属性和方法；
使用new操作符创建一个新的对象，并将其指向该构造函数；
像调用普通函数那样调用构造函数，由此创建新对象。

例如，以下代码演示了如何使用构造函数创建一个新对象：

function Person(name, age) {
  this.name = name;
  this.age = age;
}

var person1 = new Person('小明', 20);
console.log(person1);
// 输出: { name: '小明', age: 20 }

在上述代码中，我们创建了一个名为Person的构造函数，接收两个参数name和age。在构造函数中，我们使用this关键字来为新对象设置属性name和age。最后，我们使用new操作符调用构造函数创建新对象person1，并将属性name和age分别设置为"小明"和20。

此时，我们在控制台中输出person1，发现输出的新对象的属性分别为name:"小明"和age:20。

4. 示例说明

为了更好地理解构造函数创建对象的过程，我们分别用两个例子来说明。

示例1

例如，以下代码演示了如何使用构造函数创建一个手机对象Mobile：

function Mobile(brand, model, color, price){
  this.brand = brand;
  this.model = model;
  this.color = color;
  this.price = price;
  this.call = function(){     // 新对象的方法
    console.log("打电话...");
  };
}

var mobile1 = new Mobile("华为", "Mate 30", "橙色", 5499);
console.log(mobile1);
// 输出：{ brand: '华为', model: 'Mate 30', color: '橙色', price: 5499, call: [Function] }
mobile1.call();    // 打电话...

在上述代码中，我们创建了一个Mobile的构造函数，接收四个参数：品牌brand、型号model、颜色color、价格price。在构造函数中，我们使用this关键字来设置新手机的品牌、型号、颜色、价格等属性，并设置一个新对象方法call。最后，我们使用new操作符调用构造函数创建新手机对象mobile1，并将属性brand、model、color和price分别设置为"华为"、"Mate 30"、"橙色"和5499。

此时，我们在控制台中输出mobile1，发现输出的新手机对象的属性分别为brand:"华为"、model:"Mate 30"、color:"橙色"和price:5499，同时还有一个call方法。

我们可以像调用普通方法那样，使用mobile1.call()来调用新增加的新对象方法call，这里我们输出"打电话..."字符串。

示例2

再比如，以下代码演示了如何使用构造函数创建一个学生对象Student：

function Student(name, id, grade, subject){
  this.name = name;
  this.id = id;
  this.grade = grade;
  this.subject = subject;
  this.study = function(){   // 新对象的方法
    console.log("学习中...");
  };
}

var student1 = new Student("小明", 20180201, "高一", "数学");
console.log(student1);
// 输出：{ name: '小明', id: 20180201, grade: '高一', subject: '数学', study: [Function] }
student1.study();   // 学习中...

在上述代码中，我们创建了一个Student的构造函数，接收四个参数：姓名name、学号id、年级grade、学科subject。在构造函数中，我们使用this关键字来设置新学生的姓名、学号、年级、学科等属性，并设置一个新对象方法study。最后，我们使用new操作符调用构造函数创建新学生对象student1，并将属性name、id、grade和subject分别设置为"小明"、20180201、"高一"和"数学"。

此时，我们在控制台中输出student1，发现输出的新学生对象的属性分别为name:"小明"、id:20180201、grade:"高一"和subject:"数学"，同时还有一个study方法。

我们可以像调用普通方法那样，使用student1.study()来调用新增加的新对象方法study，这里我们输出"学习中..."字符串。