New 的实现——从小白到专家

2023-12-18 01:16:24

New 的实现

function new (ctor, ...args) {
  // 创建一个中间对象
  const intermediateObject = {};
  // 将中间对象的原型指向构造函数的原型
  intermediateObject.__proto__ = ctor.prototype;
  // 将构造函数的 this 指向该中间对象
  const result = ctor.apply(intermediateObject, args);
  // 如果构造函数返回的是一个对象，则返回该对象
  if (typeof result === 'object' && result !== null) {
    return result;
  }
  // 如果构造函数没有返回对象，则返回中间对象
  return intermediateObject;
}

难点解析

中间对象 ：new 运算符首先创建一个中间对象，这个中间对象的作用是作为实例对象的原型链的起点。
原型链 ：在 JavaScript 中，每个对象都有一个原型链，原型链是一个指向其他对象的引用链，它允许对象访问其原型对象中的属性和方法。
this ：在 JavaScript 中，每个函数都有一个 this ，它指向当前函数的执行上下文。
构造函数 ：构造函数是用于创建对象的一种特殊函数，它使用 new 运算符调用。

步骤解析

创建中间对象 ：new 运算符首先创建一个中间对象，这个中间对象的作用是作为实例对象的原型链的起点。
将中间对象的原型指向构造函数的原型 ：new 运算符将中间对象的原型指向构造函数的原型，这使得实例对象可以访问构造函数原型对象中的属性和方法。
将构造函数的 this 指向该中间对象 ：new 运算符将构造函数的 this 指向该中间对象，这使得构造函数可以在实例对象上操作属性和方法。
返回该中间对象 ：new 运算符返回该中间对象，即返回实例对象。

实例代码

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

const person = new Person('John', 25);

console.log(person.name); // 'John'
console.log(person.age); // 25