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

Posted 2020-12-20 不念则忘

一, 类的由来

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);