new原理解析

new关键字的介绍

在JavaScript中，new是一个用于创建对象实例的关键字。当使用new关键字调用一个函数时，它会执行以下操作：

1. 创建一个空的简单 JavaScript 对象（即 {} ）；
2. 为步骤 1 新创建的对象添加属性 __proto__ ，将该属性链接至构造函数的原型对象；
3. 将步骤 1 新创建的对象作为 this 的上下文；
4. 如果该函数没有返回对象，则返回 this。

语法

newconstructor[([arguments])]

参数

• constructor
  一个指定对象实例的类型的类或函数。
  
• arguments
  一个用于被 constructor 调用的参数列表。
  

创建一个用户自定义的对象需要两步：

1. 通过编写函数来定义对象类型。
2. 通过 new 来创建对象实例。

new关键字的原理

为了更好地理解new关键字背后的原理，我们可以手动实现一个简化版的new操作符。下面是一个示例代码：

functionmyNew(constructor, ...args) {
// 创建一个空对象constobj= {};
// 将空对象的原型指向构造函数的prototype属性Object.setPrototypeOf(obj, constructor.prototype);
// 将构造函数内部的this指向这个空对象constresult=constructor.apply(obj, args);
// 如果构造函数返回了一个对象，则返回该对象；否则返回新创建的对象returntypeofresult==='object'&&result!==null?result : obj;
}

通过上述代码，我们可以手动实现一个类似于new关键字的操作。

首先，我们创建一个空对象obj，并将其原型指向构造函数的prototype属性。

然后，我们将构造函数内部的this指向这个空对象，并执行构造函数内部的代码。最后，根据构造函数的返回值决定返回新创建的对象还是该返回值。

new关键字的代码示例

下面是一个使用new关键字创建对象实例的示例代码：

functionPerson(name, age) {
this.name=name;
this.age=age;
}
Person.prototype.sayHello=function() {
console.log(`Hello, my name is ${this.name}and I'm ${this.age}years old.`);
}
constjohn=newPerson('John', 25);
john.sayHello(); // 输出：Hello, my name is John and I'm 25 years old.

在上述示例中，我们定义了一个Person构造函数，并在其原型上添加了一个sayHello方法。

然后，通过使用new关键字调用Person构造函数来创建一个名为john的Person实例。最后，我们调用john实例上的sayHello方法来输出一段问候语。

new个对象呗

functionBoyfriend(name, age) {
this.name=name;
this.age=age;
this.gender="male";
this.isCool=true;
}
functionGirlfriend(name, age) {
this.name=name;
this.age=age;
this.gender="female";
this.isBeautiful=true;
}
constjohn=newBoyfriend("John", 25);
constlisa=newGirlfriend("Lisa", 23);
console.log(john); // 输出：Boyfriend { name: 'John', age: 25, gender: 'male', isCool: true }console.log(lisa); // 输出：Girlfriend { name: 'Lisa', age: 23, gender: 'female', isBeautiful: true }

在上述示例中，我们定义了两个构造函数：Boyfriend和Girlfriend。

这两个构造函数分别用于创建男朋友和女朋友的对象实例。

每个构造函数都接受名字和年龄作为参数，并在对象实例中设置相应的属性（如姓名、年龄、性别和是否正帅气或者漂亮）。通过使用new关键字调用这两个构造函数，我们可以分别创建一个名为john的男朋友对象和一个名为lisa的女朋友对象。最后，我们打印出这两个对象实例，可以看到它们分别具有相应的属性值。

new.target

new.target是一个在构造函数内部可用的元属性（meta property），它提供了一个指向正在被构造的实例的构造函数的引用。它可以用来确定构造函数是通过new关键字被调用还是直接调用。

下面是一些关于new.target的详细介绍：

1. 使用方式：

• 在构造函数内部，可以通过访问new.target来获取正在被构造的实例的构造函数。
• 如果构造函数是通过new关键字被调用，那么new.target将指向该构造函数本身。
• 如果构造函数是直接调用（而不是通过new关键字），那么new.target将为undefined。

2. 功能：

• 可以使用new.target来执行一些特定于构造函数调用的逻辑。例如，可以根据是否使用了new关键字来决定是否执行某些初始化操作。
• 可以使用new.target来实现基于类的继承。在派生类中，可以通过super关键字和new.target来访问父类的构造函数。

下面是一个示例代码，演示了如何使用new.target：

functionPerson(name) {
if (typeofnew.target==="undefined") {
thrownewError("Person must be instantiated using new");
  }
this.name=name;
}
functionStudent(name, grade) {
Person.call(this, name);
this.grade=grade;
}
Student.prototype=Object.create(Person.prototype);
Student.prototype.constructor=Student;
constjohn=newPerson("John"); // 正常调用，创建一个Person实例console.log(john.name); // 输出：Johnconstlisa=newStudent("Lisa", 10); // 正常调用，创建一个Student实例console.log(lisa.name); // 输出：Lisaconsole.log(lisa.grade); // 输出：10constmark=Person.call({}, "Mark"); // 错误调用，没有使用new关键字

在上述示例中，我们定义了一个Person构造函数和一个Student构造函数。

在Person构造函数内部，我们使用new.target来检查是否使用了new关键字。如果没有使用new关键字，则抛出一个错误。

在Student构造函数中，我们通过调用Person.call(this, name)来调用父类的构造函数，并传递相应的参数。然后，我们通过Object.create和prototype链来实现基于类的继承。

结论

本文深入解析了JavaScript中的new关键字，介绍了其作用、原理，并提供了一些代码示例来帮助读者更好地理解。通过对new关键字的详细解析，我们可以更好地理解JavaScript中对象实例的创建过程，从而更加灵活地运用new关键字来构建复杂的应用程序。

new.target是一个在构造函数内部可用的元属性，它提供了一个指向正在被构造的实例的构造函数的引用。它可以用来确定构造函数是通过new关键字被调用还是直接调用，并且可以执行特定于构造函数调用的逻辑或实现基于类的继承。