es6 类继承extends和super关键字,super调用父类普通函数以及继承中属性方法查找原则，类中this的指向问题

骑猪看日落 2024-04-17 06:26 43阅读 0赞

**类继承extends和super关键字**

类可以通过extends 关键字来实现类的继承

简单的继承实例

class Father{ 
    }
    class Son extends Father{ 
    }

**extends**

class Father{ 
      constructor(){ 
        //构造函数
      }
      money(){ 
        console.log(100)
      }
    }
    class Son extends Father{ 
      //extends 子类继承父类
    }
    var son = new Son();
    son.money();	//100

**super**  
super关键字用于访问和调用对象父类上的函数。可以调用父类的构造函数,也可以调用父类的普通函数  
下面是实例中：**super作为函数调用时，代表父类的构造函数。** ES6 要求，子类的构造函数必须执行一次super函数。  
**注意：** super作为函数时，super()只能用在子类的构造函数之中，用在其他地方就会报错。

class Father { 
      constructor(x, y) { 
        this.x = x;
        this.y = y;
      }
      sum() { 
        console.log(this.x + this.y);
      }
    class Son extends Father { 
      constructor(x, y) { 
        super(x, y);  //调用了父类中的构造函数，子类可以将constructor中的参数传递到父类的constructor中使用
      }
    }
    var son = new Son(1, 2);
    son.sum();

--------------------

**super 关键字调用父类普通函数,继承中属性方法查找原则**  
下面实例中：**super作为对象时，在普通方法中，指向父类的原型对象；在静态方法中，指向父类。**  
**注意：** 由于super指向父类的原型对象，所以定义在父类实例上的方法或属性，是无法通过super调用的。

class Father { 
      say() { 
        return '我是爸爸 ' ;
      }
    }
    class Son extends Father { 
      say() { 
        // console.log( '我是儿子");
        console.log(super.say() + '的儿子');	//super.say() 就是调用父类中的普通函数say()
      }
    }
    var son = new Son();
    son.say();	//我是爸爸的儿子

1. 继承中，如果实例化子类输出一个方法，先看子类有没有这个方法, 如果有就先执行子类的方法
     2. 继承中，如果子类里面没有,就去查找父类有没有这个方法，如果有,就执行父类的这个方法(就近原则)
     3. 继承中属性或方法的查找原则：就近原则

--------------------

\*\*类中this的指向问题\*\*

constructor中的this指向的是创建的实例对象
    普通方法中的this指向的是方法的调用者