前端面试题 - 63. ES5/ES6中继承的实现

310 阅读1分钟

在ES5中,继承通常是通过原型链来实现的。子类对象的原型指向父类对象,从而使子类继承了父类的属性和方法。当创建子类对象时,父类的实例方法和属性会在子类对象的原型链上挂载。 例如,以下是一个使用ES5实现继承的示例:

function Animal(name) {
  this.name = name;
}
Animal.prototype.sayName = function() {
  console.log('My name is ' + this.name);
};

function Dog(name) {
  Animal.call(this, name);
}
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;
Dog.prototype.bark = function() {
  console.log('Woof!');
};

var dog = new Dog('Fido');
dog.sayName(); // My name is Fido
dog.bark(); // Woof!

在ES6中,继承可以使用extends关键字来实现,并且可以继承父类的静态方法和属性。当创建子类对象时,父类的实例方法和属性会在子类对象的原型链上挂载,而父类的静态方法和属性会在子类对象上挂载。 例如,以下是一个使用ES6实现继承的示例:

class Animal {
  constructor(name) {
    this.name = name;
  }
  sayName() {
    console.log('My name is ' + this.name);
  }
  static info() {
    console.log('I am an animal.');
  }
}
class Dog extends Animal {
  constructor(name) {
    super(name);
  }
  bark() {
    console.log('Woof!');
  }
}
var dog = new Dog('Fido');
dog.sayName(); // My name is Fido
dog.bark(); // Woof!
Dog.info(); // I am an animal.

在这个例子中,Dog继承了Animal的实例方法和属性以及静态方法和属性,当创建子类对象dog时,父类的实例方法和属性会在dog的原型链上挂载,而父类的静态方法和属性会在Dog本身上挂载。此外,由于Dog的构造函数中调用了super方法,因此父类的构造函数会被调用,从而继承了父类的实例属性。