解决 ES6 中类的继承问题-JavaScript中文网-JavaScript教程资源分享门户

在 ES6 中，我们可以使用类来创建对象，而类与类之间也可以进行继承。但是在继承过程中，我们可能会遇到一些问题，比如父类的属性没有被正确继承，或者子类的构造函数没有被正确调用。本文将介绍如何解决这些问题，让你更加轻松地使用 ES6 中的类的继承功能。

父类属性没有被正确继承

在 ES6 中，我们可以通过 extends 关键字来实现类的继承。例如下面的代码：

// javascriptcn.com 代码示例
class Animal {
  constructor(name) {
    this.name = name;
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name);
    this.breed = breed;
  }
}

const dog = new Dog('旺财', '哈士奇');
console.log(dog.name); // '旺财'
console.log(dog.breed); // '哈士奇'

在上面的代码中，Dog 类继承了 Animal 类，并在构造函数中调用了 super 方法来调用父类的构造函数。然而，如果我们在父类中定义了一些属性，并且在子类中没有重新定义这些属性，那么这些属性就没有被正确地继承下来。例如下面的代码：

// javascriptcn.com 代码示例
class Animal {
  constructor(name) {
    this.name = name;
    this.type = 'animal';
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name);
    this.breed = breed;
  }
}

const dog = new Dog('旺财', '哈士奇');
console.log(dog.type); // undefined

在上面的代码中，Animal 类中定义了一个 type 属性，但是在 Dog 类中没有重新定义这个属性。因此，当我们创建一个 Dog 的实例时，这个实例并没有继承到 type 属性。

要解决这个问题，我们可以在子类的构造函数中调用 super 方法，然后手动将父类的属性复制到子类中。例如下面的代码：

// javascriptcn.com 代码示例
class Animal {
  constructor(name) {
    this.name = name;
    this.type = 'animal';
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name);
    this.breed = breed;
    this.type = super.type;
  }
}

const dog = new Dog('旺财', '哈士奇');
console.log(dog.type); // 'animal'

在上面的代码中，我们在 Dog 类的构造函数中手动将父类的 type 属性复制到子类中。这样，当我们创建一个 Dog 的实例时，这个实例就可以正确地继承到 type 属性了。

子类的构造函数没有被正确调用

在 ES6 中，当我们使用 extends 关键字来实现类的继承时，子类的构造函数会自动调用父类的构造函数。例如下面的代码：

// javascriptcn.com 代码示例
class Animal {
  constructor(name) {
    this.name = name;
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name);
    this.breed = breed;
  }
}

const dog = new Dog('旺财', '哈士奇');
console.log(dog.name); // '旺财'
console.log(dog.breed); // '哈士奇'

在上面的代码中，当我们创建一个 Dog 的实例时，Dog 类的构造函数会自动调用 Animal 类的构造函数，并将 name 参数传递给它。

然而，有时候我们可能会手动调用父类的构造函数，而不是让子类的构造函数自动调用它。例如下面的代码：

// javascriptcn.com 代码示例
class Animal {
  constructor(name) {
    this.name = name;
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    this.breed = breed;
    Animal.call(this, name);
  }
}

const dog = new Dog('旺财', '哈士奇');
console.log(dog.name); // '旺财'
console.log(dog.breed); // '哈士奇'

在上面的代码中，我们手动调用了 Animal 类的构造函数，并将 name 参数传递给它。然而，这样做会导致一些问题。首先，子类的原型链上就没有了父类的实例。其次，如果父类的构造函数中有一些初始化操作，那么这些操作就不会被执行了。

要解决这个问题，我们可以使用 Reflect.construct 方法来手动调用父类的构造函数。例如下面的代码：

// javascriptcn.com 代码示例
class Animal {
  constructor(name) {
    this.name = name;
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super();
    this.breed = breed;
    Reflect.construct(Animal, [name], this.constructor);
  }
}

const dog = new Dog('旺财', '哈士奇');
console.log(dog.name); // '旺财'
console.log(dog.breed); // '哈士奇'

在上面的代码中，我们使用 Reflect.construct 方法来手动调用父类的构造函数。这样做不仅可以保证子类的原型链上有父类的实例，而且可以保证父类的构造函数中的初始化操作也会被执行。

总结

在 ES6 中，我们可以使用类来创建对象，并且类与类之间也可以进行继承。在继承过程中，我们可能会遇到一些问题，比如父类的属性没有被正确继承，或者子类的构造函数没有被正确调用。为了解决这些问题，我们可以手动将父类的属性复制到子类中，或者使用 Reflect.construct 方法来手动调用父类的构造函数。通过这些方法，我们可以更加轻松地使用 ES6 中的类的继承功能。

示例代码

// javascriptcn.com 代码示例
class Animal {
  constructor(name) {
    this.name = name;
    this.type = 'animal';
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name);
    this.breed = breed;
    this.type = super.type;
    Reflect.construct(Animal, [name], this.constructor);
  }
}

const dog = new Dog('旺财', '哈士奇');
console.log(dog.name); // '旺财'
console.log(dog.breed); // '哈士奇'
console.log(dog.type); // 'animal'

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/657e53abd2f5e1655d929d59