JavaScript中new操作符的原理示例详解

前言

在JavaScript中使用new操作符可以实例化一个对象，但是其具体的原理有很多人不太清楚。因此，在本文中，我们将详细介绍JavaScript中new操作符的原理，并通过实例说明其使用方法。

new操作符的原理

在JavaScript中，我们可以使用构造函数来定义一个类，构造函数内部通常会定义各个属性和方法。当使用new操作符实例化一个对象时，JavaScript会自动创建一个新的对象，并将它的__proto__指向该构造函数的prototype属性。

具体来说，当使用new操作符创建一个对象时，JavaScript会完成以下步骤：

1. 创建一个对象，同时将该对象的__proto__指向构造函数的prototype属性；
2. 将该对象作为构造函数内部的this对象，并执行该构造函数内部的代码；
3. 如果构造函数没有显式返回一个对象，则返回步骤1中创建的对象。

示例说明1

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

Person.prototype.intro = function() {
  console.log("我叫" + this.name + ",今年" + this.age + "岁");
}

const p1 = new Person("Tom", 18);
p1.intro();

在该示例中，我们使用构造函数Person来定义一个人的类，构造函数中定义了两个属性：name和age。同时，通过将方法intro添加到Person.prototype属性上，可以使得Person的所有实例都可以调用该方法。

在创建一个Person对象p1时，使用了new操作符。这样会先创建一个对象，将该对象的__proto__属性指向Person.prototype，然后将该对象作为this对象，并执行构造函数内部的代码。由于构造函数中并没有返回其它的对象，因此最终会返回创建的对象p1。最后，我们可以通过p1调用intro方法，输出相应的信息。

示例说明2

function Car(brand, type) {
  this.brand = brand;
  this.type = type;

  this.start = function() {
    console.log("启动" + this.brand + this.type);
  }
}

const c1 = new Car("BMW", "X5");
const c2 = new Car("Toyota", "Corolla");

c1.start();
c2.start();

在该示例中，我们使用构造函数Car来定义一个汽车的类，构造函数中定义了两个属性：brand和type，并定义了一个start方法。不同于示例1，我们在构造函数中直接定义了一个start方法，而没有在prototype属性中添加方法。

在创建一个Car对象c1和c2时，同样使用了new操作符。与示例1中类似，也会先创建一个对象，将该对象的__proto__属性指向Car.prototype属性，然后将该对象作为this对象，并执行构造函数内部的代码。由于在构造函数中定义了一个start方法，因此创建的对象c1和c2都具有该方法。

最后，我们可以通过c1和c2调用start方法，输出相应的信息。

总结

通过以上两个示例，我们可以深入理解JavaScript中new操作符的原理。使用new操作符可以方便地创建一个类的实例对象，并调用其内部的方法和属性。