「冲刺金三银四」浅析JS原型与继承（上）

2024-02-19 04:40:17

引子：原型与继承的初识

在JavaScript中，原型(prototype)和继承(inheritance)是两个密切相关的概念，也是面向对象编程(OOP)的基础。原型是通过某种方式从一个对象派生的一个新对象，而继承则了派生对象如何访问和使用派生自它的对象的属性和方法。

在JavaScript中，所有对象都具有一个隐式的原型属性，它指向创建该对象的构造函数的prototype属性。原型对象包含了该构造函数的所有实例共享的属性和方法。当我们访问一个对象的属性或方法时，JavaScript会首先在该对象中查找该属性或方法，如果找不到，则会沿着其原型链向上查找，直到找到该属性或方法或到达原型链的末端(通常是Object.prototype)。

继承的奥秘：方法篇

在JavaScript中，我们可以通过多种方式实现继承，其中最常见的方法有：

基于原型的继承： 这是JavaScript中最为基本和简单的继承方式。在这种方式下，子类对象通过继承父类对象的原型来获得父类对象的属性和方法。例如：

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

Person.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
};

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

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

const student = new Student('John', 20, 'Computer Science');

student.greet(); // "Hello, my name is John and I am 20 years old."

在这个例子中，Student构造函数通过调用Person构造函数来实现继承，并通过Object.create(Person.prototype)来设置Student.prototype为Person.prototype的副本。这样，Student对象就可以访问Person.prototype中的属性和方法，包括greet()方法。

基于构造函数的继承： 基于构造函数的继承是另一种实现继承的方式。在这种方式下，子类对象通过调用父类对象的构造函数来获得父类对象的属性和方法。例如：

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

Person.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
};

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

const student = new Student('John', 20, 'Computer Science');

student.greet(); // "Hello, my name is John and I am 20 years old."

在这个例子中，Student构造函数通过调用Person构造函数来实现继承。这样，Student对象就可以访问Person.prototype中的属性和方法，包括greet()方法。

基于组合的继承： 基于组合的继承是一种将基于原型的继承和基于构造函数的继承相结合的方式。在这种方式下，子类对象通过继承父类对象的原型来获得父类对象的属性和方法，并通过调用父类对象的构造函数来获得父类对象的其他属性和方法。例如：

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

Person.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
};

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

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

const student = new Student('John', 20, 'Computer Science');

student.greet(); // "Hello, my name is John and I am 20 years old."

在这个例子中，Student构造函数通过调用Person构造函数和Object.create(Person.prototype)来实现继承。这样，Student对象就可以访问Person.prototype中的属性和方法，包括greet()方法，以及Person构造函数中的其他属性和方法。

揭秘new操作符：点石成金之术

在JavaScript中，new操作符是一个非常重要的操作符，它可以用来创建一个新对象，并自动执行该对象的构造函数。new操作符的语法如下：

const object = new Constructor(...args);

其中，Constructor是构造函数，args是传递给构造函数的参数。当我们调用new操作符时，会发生以下几个步骤：

创建一个新的空对象。
将新对象的原型设置为构造函数的prototype属性。
执行构造函数，并将新对象作为this参数传递给构造函数。
返回新对象。

例如：

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

Person.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
};

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

person.greet(); // "Hello, my name is John and I am 20 years old."