ES6中class继承

 1.简介

说明:class可以通过extends关键字实现继承,让子类继承父亲的属性和方法

  class Fun {
            constructor(x, y) {
                this.x = x
                this.y = y
            }
            talk() {
                console.log("talk方法");
            }
            tell() {
                console.log("tell方法");
            }
        }
        class Fun1 extends Fun {

        }
        const obj1 = new Fun1()
        obj1.talk() //talk方法

注意:Fun是父类,Fun1是子类,它通过extends关键字,继承了Fun所有属性和方法,等于复制Fun类。ES6规定,子类必须constructor方法中调用super(),否则就会报错。这是因为子类自己的this对象,必须先通过父类的构造函数来塑造。

1.1为什么一定要调用super()?

说明:ES6继承机制是先将父类的属性和方法,加到一个空对象上面,然后再将该对象作为子类的实例,即继承再前,实例在后。子类的构造函数中,只有调用super()方法之后,才可以使用this关键字。子类实例的构建,必须先完成父类的继承,只有具有了super方法才能让子类实例继承父类。

2.私有属性和私有方法的继承

说明:父类所有的属性和方法,都会被子类继承,除了私有的属性和方法。

    class Fun2 {
            #name = "李四"
            name = "王二"
            #talk() {
                console.log("我是私有talk方法");
            }
            talk() {
                console.log("我是公有talk方法");
            }
            getMethod() {
                console.log(this.#name); //李四
            }
        }
        class Fun3 extends Fun2 {

        }
        class Fun4 extends Fun2 {
            constructor() {
                super()
                //     console.log(this.#name);//Private field '#name' must be declared in an enclosing class 
            }
        }
        const obj3 = new Fun3()
        console.log(obj3); //Fun3

说明:因此,子类无法直接访问这些私有属性和方法,但可以通过继承关系间接地访问到它们(原型链)。

3.静态属性和静态方法的继承

说明:静态属性是通过浅拷贝实现继承的,如果父类的静态属性是一个对象的时候,那么子类的静态属性也会指向这个对象,浅拷贝只会拷贝对象的地址值。

4.Object.getPrototypeOf方法

说明:从子类获取父类。

 class Fun5 {

        }
        class Fun6 extends Fun5 {

        }
        console.log(Object.getPrototypeOf(Fun6) === Fun5); //true

注意:也可以认为Fun5是在Fun6的原型链上。

5.super关键字

说明:super关键字可以当对象使用和函数使用,用法不同。

  1. 情况1是super作为函数调用时,代表父类的构造函数。
  2. 情况2是suepr作为对象的,普通方法中,指向父类的原型对象,在静态方法中,指向父类。
  class Fun7 {
            tell() {
                console.log("我是父类的Fun7方法");
            }
        }
        class Fun8 extends Fun7 {
            constructor() {
                super()
                super.tell()   //等价于super.prototype.tell()
            }


        }
        const obj8 = new Fun8()
        obj8.tell()
        // Fun8.tell()
        // 我是父类的Fun7方法
        // 我是父类的Fun7方法

5.1super对象 

说明:super指向父类的原型对象,所有定义在父类实例上的方法或属性,是无法通过super调用的。

 class Fun9 {

            constructor(x) {
                this.x = 3
            }
        }
        Fun9.prototype.y = 5
        class Fun10 extends Fun9 {
            constructor() {
                super()

            }
            get value() {
                console.log(super.x);
            }

        }
        const obj10 = new Fun10()
        obj10.value //undefined
        console.log(obj10.y);//5

注意:ES6 规定,在子类普通方法中通过super调用父类的方法时,方法内部的this指向当前的子类实例。

5.2super对象方法赋值

说明:由于this指向子类实例,所以如果通过super对某个属性赋值,这时super就是this,赋值的属性会变成子类实例的属性。

   class Fun11 {
            constructor() {
                this.x = 1
            }
        }
        Fun11.prototype.layerA = 10
        class Fun12 extends Fun11 {
            constructor() {
                super()
                this.x = 2
                super.x = 30
            }
            talk() {
                console.log(super.x);  
            }
            talk1(){
                console.log(super.layerA);
            }
        }
        const obj12 = new Fun12()
        console.log(obj12.x); //30
        obj12.talk() //undefined
        obj12.talk1() //10

注意:super对象在读值的情况下是找父类原型, super对象在赋值的情况下super指向的是子类的实例对象。子类的静态方法中通过super调用父类的方法时,方法内部的this指向当前的子类,而不是子类的实例。

6.类的prototype属性和__proto__属性

  1. 子类的__proto__属性,表示构造函数的继承,总是指向父类
  2. 子类prototype属性的__proto__属性,表示方法的继承,总是指向父类的prototype属性。 
    class Fun13 {

        }
        class Fun14 extends Fun13{

        }
        console.log(Fun14.__proto__===Fun13);//true
        console.log(Fun14.prototype.__proto__===Fun13.prototype);//true

 7.实例的__proto__属性

说明:子类实例__proto__属性的__proto__属性,指向父类实例的__proto__属性。也就是说,子类实例对象的原型的原型,是父类实例对象的原型。

8.Mixin模式的实现

说明:Mixin指的是多个对象合成一个新的对象,新对象具有各个组成成员的接口,它的最简单实现如下。

 const arr1=[1]
        const arr2=[2]
        const arr3=[...arr1,...arr2]

猜你喜欢

转载自blog.csdn.net/m0_62785037/article/details/130792551