初窥 JavaScript 继承与模拟实现 new

前端

2024-01-22 17:05:24

JavaScript 中的继承与模拟 new 操作符

在软件开发中，继承是一种强大的工具，它允许我们构建更复杂、更可重用的代码。在 JavaScript 中，我们可以通过以下四种方法实现继承：

原型继承

原型继承利用了 JavaScript 的原型系统。
它创建了一个父类构造函数和一个子类构造函数。
子类构造函数的原型对象被设置为父类构造函数的实例。

构造函数继承

构造函数继承通过直接调用父类构造函数来实现。
它在子类构造函数中调用父类构造函数，从而使子类继承父类的属性和方法。

组合继承

组合继承结合了原型继承和构造函数继承。
它使用构造函数继承来初始化子类的实例，然后使用原型继承来设置子类的原型。

寄生式继承

寄生式继承不使用原型或构造函数继承。
它创建一个新对象，复制父类构造函数的属性，并将子类的属性和方法添加到新对象中。

模拟实现 new 操作符

JavaScript 的 new 操作符用于创建新对象并调用它们的构造函数。我们可以通过以下步骤模拟实现它：

创建一个函数，该函数接受构造函数和参数作为输入。
创建一个新对象。
将构造函数实例复制到新对象中。
返回新对象。

代码示例

// 原型继承
function Person(name) {
  this.name = name;
}

Person.prototype.sayHello = function() {
  console.log(`Hello, my name is ${this.name}.`);
};

function Student(name, major) {
  Person.call(this, name);
  this.major = major;
}

Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;

const student1 = new Student('John Doe', 'Computer Science');
student1.sayHello(); // Hello, my name is John Doe.

// 构造函数继承
function Person(name) {
  this.name = name;
}

Person.prototype.sayHello = function() {
  console.log(`Hello, my name is ${this.name}.`);
};

function Student(name, major) {
  Person.call(this, name);
  this.major = major;
}

const student2 = new Student('Jane Doe', 'Mathematics');
student2.sayHello(); // Hello, my name is Jane Doe.

// 组合继承
function Person(name) {
  this.name = name;
}

Person.prototype.sayHello = function() {
  console.log(`Hello, my name is ${this.name}.`);
};

function Student(name, major) {
  Person.call(this, name);
  this.major = major;
}

Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;

const student3 = new Student('Mark Smith', 'Engineering');
student3.sayHello(); // Hello, my name is Mark Smith.

// 寄生式继承
function Person(name) {
  this.name = name;
}

Person.prototype.sayHello = function() {
  console.log(`Hello, my name is ${this.name}.`);
};

function Student(name, major) {
  const newObject = {};
  const person = new Person(name);
  Object.assign(newObject, person);
  newObject.major = major;
  return newObject;
}

const student4 = new Student('Alice Green', 'Biology');
student4.sayHello(); // Hello, my name is Alice Green.

// 模拟实现 new 操作符
function myNew(constructor, ...args) {
  const newObject = {};
  const constructorInstance = constructor.apply(newObject, args);
  return Object.prototype.toString.call(constructorInstance) === '[object Object]' ? newObject : constructorInstance;
}

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

Person.prototype.sayHello = function() {
  console.log(`Hello, my name is ${this.name}.`);
};

const student5 = myNew(Person, 'Bob Brown');
student5.sayHello(); // Hello, my name is Bob Brown.