手写new运算符实现对象创建和JavaScript继承

前端

2023-10-11 11:25:44

JavaScript 中new运算符的深入探索：揭秘其内部机制、实现和继承

1. 揭秘 new 运算符的内部机制

1.1 什么是 new 运算符？

在 JavaScript 中，new 运算符扮演着创建对象实例的关键角色。它调用一个函数，并返回该函数生成的全新对象作为调用结果。

1.2 new 运算符的步骤

new 运算符的运作步骤如下：

创建一个新的空对象。
将 this 指向新创建的对象。
执行函数体。
返回新创建的对象。

2. 从头开始手写 new 运算符

2.1 创建一个新的空对象

function newOp(func) {
  const obj = {};
  this = obj;
  func();
  return obj;
}

2.2 将 this 指向新创建的对象

function newOp(func) {
  const obj = {};
  this = obj;
  func.call(this);
  return obj;
}

2.3 执行函数体

// 定义一个函数
function Person(name, age) {
  this.name = name;
  this.age = age;
}

// 使用 newOp 函数创建 Person 实例
const person = newOp(Person, 'John', 30);

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

2.4 返回新创建的对象

// 定义一个函数
function Person(name, age) {
  this.name = name;
  this.age = age;

  return this;
}

// 使用 newOp 函数创建 Person 实例
const person = newOp(Person, 'John', 30);

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

3. 实现 JavaScript 继承

3.1 什么是继承？

继承是面向对象编程中的基石，它允许一个类获取另一个类的属性和方法。

3.2 如何实现 JavaScript 继承

JavaScript 继承的实现步骤如下：

创建一个父类构造函数。
创建一个子类构造函数。
将子类构造函数的 prototype 属性指向父类构造函数。

3.3 实现继承的示例

// 定义一个父类构造函数
function Person(name, age) {
  this.name = name;
  this.age = age;
}

// 定义一个子类构造函数
function Student(name, age, school) {
  Person.call(this, name, age);
  this.school = school;
}

// 将子类构造函数的 prototype 属性指向父类构造函数
Student.prototype = Object.create(Person.prototype);

// 创建一个 Student 实例
const student = new Student('John', 30, 'Harvard');

console.log(student.name); // 'John'
console.log(student.age); // 30
console.log(student.school); // 'Harvard'