JS new一个对象的过程详解|极客笔记

JS new一个对象的过程详解

在JavaScript中，通过使用new关键字可以创建一个对象。这个对象是通过使用一个构造函数来生成的，它定义了对象的初始状态和行为。本文将详细讲解在JavaScript中new一个对象的过程。

构造函数

在JavaScript中，构造函数是一种特殊类型的函数，用于创建和初始化一个新对象。构造函数的命名通常使用大写字母开头，以便与普通函数区分开来。

构造函数可以使用this关键字来引用它正在创建的对象。通过在构造函数中使用this，我们可以给对象添加属性和方法。构造函数通常会使用new关键字来调用，从而返回一个新的对象。

下面是一个简单的构造函数的示例，用于创建一个名为Person的对象：

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.showInfo = function() {
    console.log("Name: " + this.name + ", Age: " + this.age);
  }
}

在这个示例中，Person构造函数接受name和age两个参数，并使用this.name和this.age将它们分配给新创建的对象的属性。showInfo方法用于在控制台上打印对象的信息。

使用new关键字创建对象

创建一个对象的过程通常是通过new关键字和构造函数来完成的。当使用new关键字调用一个构造函数时，JavaScript会执行以下步骤：

创建一个新的空对象，将其赋值给this。
设置对象的原型链。新对象的__proto__属性被设置为构造函数的prototype属性。
执行构造函数中的代码。在构造函数中，可以使用this关键字来引用新创建的对象，并添加属性和方法。
返回新的对象。

下面是使用Person构造函数创建对象的示例：

let person1 = new Person("Alice", 25);
person1.showInfo();  // Output: Name: Alice, Age: 25

在这个示例中，我们通过new关键字调用Person构造函数来创建一个名为person1的对象，并传递了"Alice"和25作为参数。然后，我们调用showInfo方法来打印对象的信息。

示例代码运行结果：

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.showInfo = function() {
    console.log("Name: " + this.name + ", Age: " + this.age);
  }
}

let person1 = new Person("Alice", 25);
person1.showInfo();  // Output: Name: Alice, Age: 25

在控制台上运行以上代码，将会输出：Name: Alice, Age: 25。

new的关键作用

使用new关键字创建对象的主要作用是实现对象的实例化。通过将构造函数与new关键字结合使用，我们可以重复使用相同的代码来创建多个具有相似属性和方法的对象。

此外，new关键字还会自动地为新创建的对象设置原型链。通过设置__proto__属性，新创建的对象可以访问构造函数的原型对象，从而可以共享原型对象中的属性和方法。

原型继承

在JavaScript中，对象之间可以通过原型继承来共享属性和方法。每个对象都有一个指向其原型的隐藏链接，我们可以通过__proto__属性来访问这个原型对象。

构造函数的prototype属性被用作新对象的原型。通过为构造函数的prototype属性添加属性和方法，新创建的对象可以继承这些属性和方法。

下面是一个示例，展示了如何使用原型继承来共享方法：

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

Person.prototype.showInfo = function() {
  console.log("Name: " + this.name + ", Age: " + this.age);
}

let person1 = new Person("Alice", 25);
person1.showInfo();  // Output: Name: Alice, Age: 25

在这个示例中，我们将showInfo方法定义在Person构造函数的原型上。通过这种方式，所有通过Person构造函数创建的对象都可以访问和使用showInfo方法。

继承关系

在JavaScript中，继承是通过将一个对象的原型设置为另一个对象来实现的。继承允许一个对象继承另一个对象的属性和方法，并且可以在继承链上进行查找和调用。

使用new关键字创建的对象与其构造函数的原型之间建立了一种继承关系。通过访问原型链，一个对象可以沿着继承链获取到父对象的属性和方法。

下面是一个示例，展示了如何使用继承来创建一个继承自Person的Student对象：

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

Person.prototype.showInfo = function() {
  console.log("Name: " + this.name + ", Age: " + this.age);
}

function Student(name, age, grade) {
  Person.call(this, name, age);  // 调用父类的构造函数
  this.grade = grade;
}

Student.prototype = Object.create(Person.prototype);  // 设置Student的原型为Person的实例
Student.prototype.constructor = Student;  // 修复constructor属性

Student.prototype.showInfo = function() {  // 重写showInfo方法
  console.log("Name: " + this.name + ", Age: " + this.age + ", Grade: " + this.grade);
}

let student1 = new Student("Bob", 18, "A");
student1.showInfo();  // Output: Name: Bob, Age: 18, Grade: A

在这个示例中，我们创建了一个Student构造函数，它继承自Person构造函数。通过使用Object.create()方法，我们将Student的原型设置为Person的一个实例，从而建立了继承关系。

然后，我们重写了Student对象的showInfo方法，以便输出学生的年级信息。在Student的构造函数内部，我们使用了Person.call()方法来调用父类的构造函数，从而继承了父类的属性。

通过以上示例，我们可以看到在使用new关键字创建对象和继承的过程中，JavaScript提供了强大的功能，使得我们可以更灵活地组织和使用对象。