JavaScript面向对象&继承：揭秘原型链与借用构造函数的奥秘

前端

2023-12-30 03:19:45

原型链与借用构造函数：JavaScript 继承的两种方式

在 JavaScript 的世界里，继承是一门精湛的技艺，它使对象能够从父对象那里继承属性和方法。原型链和借用构造函数是两种主要方法，它们以独特的方式实现了这种继承机制。

原型链：层层攀登的知识殿堂

想象一下原型链就像一座知识殿堂，每一层都存放着不同的属性和方法。当一个对象需要访问一个属性或方法时，它会首先在自己身上寻找。如果没有找到，它就会沿着一层层的原型链向上攀登，直到找到所需的知识为止。

借用构造函数：曲线救国的继承方式

借用构造函数是一种曲线救国的继承方式。它涉及在子类的构造函数中调用父类的构造函数，从而在子类中重写父类中的属性和方法。这种方法使子类能够从父类中继承知识，同时又能够对其进行修改或扩展。

两种方法的对比

相似之处：

两种方法都实现了继承机制，允许子类从父类中继承属性和方法。

不同之处：

重写原型： 原型链通过将子类的原型设为父类的实例来实现继承，从而覆盖父类中的属性和方法。借用构造函数则不需要重写原型，而是直接在子类中调用父类的构造函数。
传入参数： 在使用原型链时，不能向父类的构造函数中传递参数，因为子类的参数不会被父类接收。在使用借用构造函数时，可以向父类的构造函数传递参数，从而在子类中重写父类的属性和方法。

哪种方法更适合你？

原型链和借用构造函数各有其优点和缺点。选择哪种方法取决于你的具体需求：

原型链： 如果你需要创建多个子类，每个子类都继承不同的父类属性和方法，那么原型链可能是更好的选择。
借用构造函数： 如果你需要控制子类构造函数的行为，或者需要向父类的构造函数传递参数，那么借用构造函数是更好的选择。

示例代码：

// 使用原型链
function Car(make, model, year) {
  this.make = make;
  this.model = model;
  this.year = year;
}

Car.prototype.drive = function() {
  console.log('Driving a ' + this.make + ' ' + this.model + ' ' + this.year);
};

function Truck(make, model, year, cargoCapacity) {
  Car.call(this, make, model, year);
  this.cargoCapacity = cargoCapacity;
}

// 将 Truck 的原型设为 Car 的实例
Truck.prototype = new Car();

// 重写 Truck 原型的构造函数
Truck.prototype.constructor = Truck;

// 添加新的方法
Truck.prototype.loadCargo = function(cargo) {
  console.log('Loading cargo into ' + this.make + ' ' + this.model);
};

const truck = new Truck('Ford', 'F-150', 2020, 1000);

truck.drive(); // Driving a Ford F-150 2020
truck.loadCargo('supplies'); // Loading cargo into Ford F-150


// 使用借用构造函数
function Car(make, model, year) {
  this.make = make;
  this.model = model;
  this.year = year;
}

Car.prototype.drive = function() {
  console.log('Driving a ' + this.make + ' ' + this.model + ' ' + this.year);
};

function Truck(make, model, year, cargoCapacity) {
  Car.call(this, make, model, year);
  this.cargoCapacity = cargoCapacity;
}

// 不重写 Truck 原型的构造函数
// Truck.prototype = new Car();

// 添加新的方法
Truck.prototype.loadCargo = function(cargo) {
  console.log('Loading cargo into ' + this.make + ' ' + this.model);
};

const truck = new Truck('Ford', 'F-150', 2020, 1000);

truck.drive(); // Driving a Ford F-150 2020
truck.loadCargo('supplies'); // Loading cargo into Ford F-150