JS继承

104 阅读2分钟

在JavaScript中,我们可以使用原型链继承、构造函数继承、组合继承和ES6中的class继承来实现继承。下面将逐一介绍这些继承方式,并提供相应的示例。

原型链继承

原型链继承通过将子类的原型对象设置为父类的实例,从而实现继承。这意味着子类将继承父类的属性和方法。

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

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

// 子类
function Dog(name, age) {
  this.age = age;
}

Dog.prototype = new Animal(); // 设置子类原型为父类实例
Dog.prototype.constructor = Dog; // 修复子类的构造函数指向

// 创建实例
var dog = new Dog('Bobby', 5);
dog.sayName(); // 输出 My name is Bobby
console.log(dog.age); // 输出 5

构造函数继承

构造函数继承通过在子类构造函数中调用父类构造函数,并使用call()apply()方法,改变执行上下文,实现属性的继承

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

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

// 创建实例
var dog = new Dog('Bobby', 5);
console.log(dog.name); // 输出 Bobby
console.log(dog.age); // 输出 5

组合继承

组合继承是将原型链继承和构造函数继承结合起来,通过调用父类构造函数和设置子类原型为父类实例的方式,实现既能继承父类属性,又能拥有独立的属性和方法。

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

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

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

Dog.prototype = Object.create(Animal.prototype); // 设置子类原型为父类原型
Dog.prototype.constructor = Dog; // 修复子类的构造函数指向

// 创建实例
var dog = new Dog('Bobby', 5);
dog.sayName(); // 输出 My name is Bobby
console.log(dog.age); // 输出 5

ES6 Class继承

ES6引入了class语法糖,使得类的定义和继承更加直观。通过使用extends关键字继承父类,子类将获得父类的属性和方法。

// 父类
class Animal {
  constructor(name) {
    this.name = name;
  }

  sayName() {
    console.log(`My name is ${this.name}`);
  }
}

// 子类
class Dog extends Animal {
  constructor(name, age) {
    super(name); // 调用父类构造函数
    this.age = age;
  }
}

// 创建实例
let dog = new Dog('Bobby', 5);
dog.sayName(); // 输出 My name is Bobby
console.log(dog.age); // 输出 5