js中class可以继承父类的变量吗|极客笔记

js中class可以继承父类的变量吗

在JavaScript中，ES6引入了class的概念，使得我们可以更加方便地使用面向对象的编程风格。通过class，我们可以定义一个对象的结构和行为，并且可以实现继承关系。那么，在子类中继承父类的变量是一个常见的需求，那么js中的class是否支持继承父类的变量呢？接下来我们就来详细探讨一下这个问题。

父类的变量

首先，我们先来看一个简单的示例，父类中定义了一个变量，并尝试在子类中继承这个变量。

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

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

let myDog = new Dog('旺财', '金毛');
console.log(myDog.name);
console.log(myDog.breed);

在上面的示例中，我们定义了一个Animal类，该类有一个name变量，然后我们定义了一个Dog类，该类继承自Animal类，除了接收name参数外，还有一个breed参数。在子类的构造函数中，通过super()调用父类的构造函数，并同时传入name参数。然后我们创建一个Dog对象myDog，分别输出myDog的name和breed属性值。

运行结果如下：

旺财
金毛

从上面的示例中可以看出，子类Dog成功继承了父类Animal中的name变量，并且可以正常访问和使用。

父类的私有变量

接着我们看一个稍微复杂一点的示例，如果父类中的变量是私有的（即在函数内部定义的变量），子类还能继承吗？

class Animal {
  constructor(name) {
    let _name = name;
    this.getName = function() {
      return _name;
    }
  }
}

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

let myDog = new Dog('旺财', '金毛');
console.log(myDog.name);
console.log(myDog.breed);
console.log(myDog.getName());

在这个示例中，我们修改了Animal类的构造函数，将name变量修改为私有变量_name，并且通过this.getName方法暴露了一个获取_name的接口。在Dog类的构造函数中，我们通过super(name)调用父类构造函数，并初始化子类的breed属性。然后我们使用这两个属性，并尝试调用父类中的getName方法。

运行结果如下：

undefined
金毛
旺财

从结果中可以看出，子类Dog无法继承父类Animal中的私有变量_name，因为私有变量在类外部是无法访问的，所以子类也无法继承。但是如果父类提供了可以访问私有变量的接口，子类是可以通过这个接口来获取私有变量的值的。

父类的静态变量

除了实例变量，类中也可以包含静态变量，那么子类能否继承父类的静态变量呢？

class Animal {
  static className = 'Animal';
}

class Dog extends Animal {
}

console.log(Dog.className);

在上面的代码中，我们定义了一个父类Animal，其中有一个静态变量className，然后我们定义一个子类Dog，并尝试输出子类中的className属性。

运行结果如下：

Animal

从结果中可以看出，子类Dog成功继承了父类Animal中的静态变量className。这表明在JavaScript中，子类是可以继承父类的静态变量的。

总结

综上所述，JavaScript中的class是支持子类继承父类的实例变量和静态变量的。但是如果父类中的变量是私有变量，子类无法直接继承，需要通过父类提供的接口来间接获取。在实际开发中，需要根据需求合理设计类的结构和变量访问权限，以便子类可以正确继承和使用父类中的变量。

js中class可以继承父类的变量吗