Class类的继承

一、继承的语法

1.子类继承父类——语法:class 子类 extends 父类,在子类的构造方法中调用父类的构造方法。

2.同名覆盖:子类中声明的方法名和父类中的方法名相同时,子类中的方法将覆盖继承于父类的方法,采用自己的。

3.super前面不能有this操作

   //父类Person
        class Person{
            constructor(name,sex){
                this.name = name;
                this.sex = sex;
                this.say = function(){
                    console.log('say');
                };
            }
            speak(){console.log("speak")}

            static speak(){
                console.log("static speak")
            }
        }
        Person.version = '1.0';

        //一:子类继承父类——语法:class 子类 extends 父类
        class Programmer extends Person{
            //在子类的构造方法中调用父类的构造方法
            constructor(name,sex,feature){

              //  this.feature = feature; 三:×错误写法,super前面不能有this操作
                super(name,sex);
                this.feature = feature;
            }

        //二:同名覆盖:子类中声明的方法名和父类中的方法名相同时,子类中的方法将覆盖继承于父类的方法,采用自己的。
            speak(){
            console.log("Programmer speak");
        }
        }
        const zs = new Programmer("张三","male","很高");
        console.log(zs.name,zs.sex,zs.feature); //张三 male 很高
        zs.say(); //say
        //子类使用了自己的speak方法:
        zs.speak();//Programmer speak
        Programmer.speak();//static speak

二、super()的特殊性

1.super作为函数调用

代表父类的构造方法,只能用在子类的构造函数中,用在其他地方就会报错;

super虽然代表了父类的构造方法,但是内部的this指向调用这个函数的类的实例

//1.super作为函数调用
        //代表父类的构造方法,只能用在子类的构造函数中,用在其他地方就会报错
        //super虽然代表了父类的构造方法,但是内部的this指向调用这个函数的类的实例
        class Person{
            constructor(name){
                this.name = name;
                console.log(this);
            }  
        }
        class Programmer extends Person{
            constructor(name){
                    super(name);
                }
                fn(){
                  //  super(name);报错:Uncaught SyntaxError: 'super' keyword unexpected here
                }
        }
        const xh = new Programmer("小红","female");

2.super作为对象使用

(1).在子类的构造方法或一般方法中,super代表的是原型对象Person.prototype

 //2.作为对象使用:
        //(1).在子类的构造方法或一般方法中,super代表的是原型对象Person.prototype
            class Person{
                constructor(name){
                    this.name = name;
                }
                speak(){
                    console.log('speak');
                    console.log(this);
                }
            }
            class Programmer extends Person{
                constructor(name){
                    super(name);
                    //在子类的构造方法中调用父类的原型的speak方法
                    super.speak(); //speak this指向子类的实例
                }
                //在子类的一般方法中调用调用父类的原型的speak方法,再补充子类的其他功能:
                speak(){
                    super.speak();//speak this指向子类的实例
                    console.log("Programmer speak") //Programmer speak
                }
            }
            const xh = new Programmer("小红");
            xh.speak();

(2)在子类的静态方法中使用,super指向的是父类,而不是父类的原型对象,this指向子类

  //(2)在子类的静态方法中使用,super指向的是父类,而不是父类的原型对象
            class Person{
                constructor(name){
                    this.name = name;
                }
                speak(){
                    console.log('speak');
                    console.log(this);
                }
                static speak(){
                    console.log("Person static speak")
                }
            }
            class Programmer extends Person{
                constructor(name){
                    super(name);
                }
                static speak(){
                    super.speak();
                    console.log("Programmer static speak")
                }
            }
             Programmer.speak(); 

 3.注意事项

使用super的时候,必须显示指定是作为函数使用还是作为对象使用(要么加括号,要么打点调属性方法),否则浏览器会报错。

当子类继承父类时,如果不需要通过constructor设置属性和继承父类constructor中的属性,那么可以不写constructor和super,否则,就必须写上constructor和super

  • 2
    点赞
  • 25
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值