ES6中class类使用方法及教程(进阶篇)

一、使用 extends 实现子类继承父类

  • 为什么要实现子类继承父类?
    下面的代码两个类American和Chinese中的constructor里面的代码是一样的,如果我们要建立更多这样的类,这样的代码就会十分臃肿,所以我们可以创建一个父类,让子类去继承父类的内容;
    原代码:

    	class American {
             constructor (name, age) {
                 this.name = name;
                 this.age = age;
             }
         }
         const a1 = new American('Bob', 25);
    
         class Chinese {
             constructor (name, age) {
                 this.name = name;
                 this.age = age;
             }
         }
         const c1 = new Chinese('小王', 26);
    

    使用extends关键字实现继承后的代码:

    	 //这是父类
         class Person {
             constructor (name, age) {
                 this.name = name;
                 this.age = age;
             }
         }
         
         //这是子类
         class American extends Person{
             
         }
         const a1 = new American('Bob', 25);
    
         //这是子类
         class Chinese extends Person{
             
         }
         const c1 = new Chinese('小王', 26);
    
  • 子类继承父类的实例方法:

     	 //这是父类
         class Person {
             constructor (name, age) {
                 this.name = name;
                 this.age = age;
             }
             say (h) {
                 console.log(h)
             }
         }
    
         //这是子类
         class American extends Person{
             
         }
         const a1 = new American('Bob', 25);
         a1.say('hello')//hello
    
         //这是子类
         class Chinese extends Person{
             
         }
         const c1 = new Chinese('小王', 26);
         c1.say('你好')//你好
    

二、super函数的使用

  • super是什么
    super是一个函数,子类中的super就是父类中constructor构造器的一个引用;

  • 什么时候需要使用super
    当子类通过extends继承父类后,子类需要有自己 *独有 *的属性时,就需要在子类的constructor构造器内部 优先优先优先 使用super函数,必须要优先使用(语法规范);

例如下面的例子,中国人在继承了父类的同时,还有了独有的身份证号码:

	  //这是父类
      class Person {
          constructor (name, age) {
              this.name = name;
              this.age = age;
          }
          say (h) {
              console.log(h)
          }
      }

      //这是子类
      class American extends Person{

      }
      const a1 = new American('Bob', 25);
      a1.say('hello')

      //这是子类
      class Chinese extends Person{
          constructor (name, age, IDcard) {
              super(name, age);
              this.IDcard = IDcard;
          }
      }
      const c1 = new Chinese('小王', 26, '220225xxxxxxxxxxx');
      c1.say('你好')
      console.log(c1)//Chinese {name: "小王", age: 26, ID: "220225xxxxxxxxxxx"}

至此,es6中的class类的教程就结束了,如果这篇文章有看不懂的地方,请翻看上一篇es6中class类使用方法及教程(基础篇)
第一次写文章,写的不好还请多多包涵,有什么问题请留言,我会第一时间回复或者更改!

你可能感兴趣的:(JavaScript)