React 项目 -ES6 语法类的继承（10）

谁践踏了优雅 2022-09-03 15:12 135阅读 0赞

在面向对象的编程语言中，基本上都是支持继承的，比如C++，和java，在ES6 中的类也引入的继承的概念，并且和java十分的类似，初学前端的ES6语法，我们在地方就介绍一下ES6 中的继承的语法。

# 继承 #

首先继承是类之间的关系。准确说是子类和父类之间的关系。比如我们可以创建类，美国人，中国人，印度人 等等 但是这些不同国家的人，他们也是存在共同点的，比如都属于人这一物种。所以我们可以找到这样继承关系

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70][]

下面我们在ES6 中类中看：

class American{
         constructor(name,age){
            this.name=name;
            this.age=age;
         }
    }
    class Chinese{
        constructor(name,age){
           this.name=name;
           this.age=age;      
        }
    }

当然这只是两个类，可能还有更多，比如印度人，俄罗斯人，等等那么这些不同国家人我们都要去写那么多吗，显然是太累的了

那么我们不得不去把其中的共同的特征提取出来也就是Person

class Person{
       constructor(name,age){
            this.name=name;
            this.age=age;
         }
    }
    class American extends Person{
         
    }
    class Chinese extends Person{
      
    }

我们看继承的语法结构啊

class subClassName extends pClassName\{

subClassName 表示子类的名称

pClassName 表示父类的名称

# super #

和java一样，我们可以在子类的构造器中调用super 方法，当然这也是必须的

如果我们在子类中声明构造器，那么必须在第一行 执行super的方法

如下：

class American extends Person{
         constructor(){
            super();
         }
    }

当我需要传递参数的时候：

class American extends Person{
         constructor(name,age){
            super(name,age);
         }
    }

# 实例方法 #

子类继承的不仅仅是父类的实例属性，还有实例方法

比如：

class Person{
       constructor(name,age){
            this.name=name;
            this.age=age;
         }
         sayHello(){
            console.log("你好");
         }
    }
    class American extends Person{
         constructor(name,age){
            super(name,age);
         }
    }
    class Chinese extends Person{
         constructor(name,age){
            super(name,age);
         }
    
    }
    const american=new American("张三",18);
    console.log(american.name);
    console.log(american.sayHello());
    
    const chinese=new American("张三",18);
    console.log(chinese.sayHello());

sayHello 是父类中实例方法，那么在实例化的子类中也可以去调用sayHello方法

上面就是对ES6 中继承的相关知识点，当然如果之前学习过面向对象的相关的知识，相信上面的内容你来说简直是小菜一碟

希望对你有所帮助

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70]: /images/20220829/caed507d68d34800be4ab1e7f4ee472a.png