js中ES6语法的super到底是啥？

Posted 2023-04-16

参考技术A ES6 中的继承和 super 的用法大家都不会陌生，可是一问到 super 到底是什么，估计很对人都会回答不上来。在 ES6 中，super 是一个特殊的语法，而且它比 this 还要特殊，有很多用法上的限制。

因为 super 的词法定义是伴随后面那对括号的，它和 this 不同。this 的定义是 this 这个关键字会被替换成一个引用，而 super 则是 super(…) 被替换成一个调用。而且 super 除了在 constructor 里直接调用外还可以使用 super.xxx(…) 来调用父类上的某个原型方法，这同样是一种限定语法。

js es6语法 class类 class继承 super关键字

一, 类的由来

es6提供了一个新语法就是class

二, class声明一个类

// 声明一个类
class Piont{ // Piont就是一个类  

}

1, 添加属性和方法

class Piont {
    // 构造函数
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
	// 方法
    run(){
       console.log(1);
    }
}

2, 使用方式

var p = new Piont(‘刘德华‘,30);
p.run();
console.log(p.name);

3, 方法的写入

run(){
    console.log(1);
}

对象调用的属性和方法叫做成员属性和方法，有类直接调用的属性和方法叫静态属性和方法

静态的属性指的是Class本身不是定义在实列对象上的属性

class Foo {

}

Foo.pop = 1; // 给Foo这个类定义了一个静态属性
console.log(Foo.pop);

4, 内部添加静态属性

class Po{
static myP = 100; // 静态属性
constructor(){
    console.log(Po.myP);
}
}

var p1 = new Po();
p1.constructor; // 调用

5, 添加静态方法

class Foo{
    static po = 100; // 
    static classMethod(){
        return ‘hello‘;
    }
}

6, this和方法重名

class Foo {
    static bar() {
        this.baz()
    }
    static baz() {
        console.log(‘hello‘);
    }
    baz() {
        console.log(‘world‘);
    }
}

Foo.bar();
var f = new Foo();
f.baz();

7, 父类的静态方法可以被子类继承

class Foo {
static classMethod() {
    return ‘hello‘;
}
}
// 子类继承父类
class Bar extends Foo { // 子类继承父类

}
console.log(Bar.classMethod());

8, class继承

Class可以通过extends关键字实现继承，这比ES5通过修改原型链实现继承

class Point{

}
// 子类继承父类
class ColorPoint extends Point{

}

在ColorPoint内加上代码

class Point {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }
}
// 在ColorPoint内加上代码
class ColorPoint extends Point {
    constructor(x, y, color) {
        //  this.color = color; // 错误
        super(x, y); // 调用父类的constructor(x, y)
        this.color = color; //  正确的
    }

    toString() {
        return this.color + ‘ ‘ + super.toString;
        toString()
    }
}

let cp = new ColorPoint(20, 30, ‘green‘);

console.log(cp instanceof ColorPoint);// true
console.log(cp instanceof Point); //  true 

console.log(cp.x, cp.y, cp.color);

9, super关键字

既可以当做函数使用，也可以当做对象使用

当做函数使用的时候,代表的是父类的构造函数，es6要求，子类的构造函数必须执行一些super

class A{
    constructor(){
        console.log(new.target.name);
    }
}

class B extends A{
    constructor(){
        super();// 代表的是父类的构造函数 但是返回的是子类的实列，内部的this指向的是子类的实列
        // 相当于
        // A.prototype.constructor.call(this);
    }
}

console.log(new A()); //A
console.log(new B()); //B

super作为对象使用，在普通方法中，指向父类的原型对象，在静态方法中，指向的是父类

class A{
    p(){
        return 2;
    }
}
// 继承
class B extends A {

    constructor(){
        super();
        console.log(super.p()); // 2  
    }
}

let b = new B();

由于super指向父类的原型对象，所以定义在父类实列上的方法或者属性，是无法通过super调用

class A {
    constructor() {
        this.p = 2;
    }
}
// 继承
class B extends A {
    get m() {
        return super.p;
    }
}

let b = new B();
console.log(b.m);