跳到主要内容

简述ES6 之前使用 prototype 实现继承 ?

参考答案:

在 ES6 之前,JavaScript 中实现继承的主要方式是通过原型链(prototype chain)和原型对象(prototype object)。这种继承方式基于 JavaScript 的原型机制,允许一个对象继承另一个对象的属性和方法。

下面是一个使用原型实现继承的简单示例:

// 父类(超类)
function Animal(name) {
  this.name = name;
}

Animal.prototype.speak = function() {
  console.log(this.name + ' makes a noise.');
};

// 子类
function Dog(name, breed) {
  Animal.call(this, name); // 调用父类的构造函数
  this.breed = breed;
}

// 设置 Dog 的原型为 Animal 的一个实例
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog; // 修复 constructor 属性

Dog.prototype.bark = function() {
  console.log(this.name + ' barks.');
};

// 使用
var dog = new Dog('Buddy', 'Labrador');
dog.speak(); // 输出 "Buddy makes a noise."
dog.bark(); // 输出 "Buddy barks."

在这个示例中,我们定义了一个 Animal 类和一个 Dog 类。Dog 类继承自 Animal 类。我们通过设置 Dog.prototypeAnimal.prototype 的一个实例来实现继承。这样,Dog 的实例就能访问 Animal 的原型上的属性和方法。

注意,我们还使用 Object.create() 方法来创建一个新的对象,该对象的原型是 Animal.prototype。这确保了 Dog 的实例不会直接修改 Animal.prototype,从而保持了继承的完整性和安全性。

最后,我们修复了 Dog.prototype.constructor 属性,使其指向 Dog 构造函数,而不是 Animal 构造函数。这是因为在设置原型时,constructor 属性也会继承自原型链,所以我们需要手动将其设置回正确的构造函数。

这种使用原型实现继承的方式在 ES6 之前是非常常见的,但在 ES6 中,我们可以使用 classextends 关键字来更简洁地实现继承。