ES6 Class(类)

Posted 2022-08-01 nzcblogs

一、Class类
1、构造函数

    constructor()

说明：
a、如果没有重新定义带参数的构造函数,类会默认为我们提供一个不带参数的隐式构造函数
b、在创建类的实例时会自动调用类中的构造函数

2、实例属性    【类的实例属性定义在类的构造函数中(类实例的属性)】
eg：

    constructor(name,age)
        this.name = name;
        this.age = age;
    

说明：
a、实例变量定义在类的构造函数中
b、实例变量只有类的实例可以调用,类是无法调用的

3、静态属性    【直接在类上定义的属性是静态属性(类的属性)】
两种定义形式：
a、使用static关键字定义在类中实例方法的前面

    static attrName = "静态属性";

b、直接使用 类名.属性名 在类定义外定义静态属性

    className.attrName = "静态属性";

4、实例方法    【定义在类中的方法为实例方法(类实例的方法)】

    sayName()

5、静态方法    【定义在类中以static关键字修饰的方法(类的方法)】

    static say()

class示例：

    class Person
        //构造函数
        constructor(name,age)
            this.name = name;
            this.age = age;
        
        //静态属性
        static staticAttr1 = "静态属性1";
        //实例方法
        sayName()
        //静态方法
        static say()
    
    //静态属性
    Person.staticAttr2 = "静态属性2";
    //创建Person类实例对象
    let p = new Person(‘nzc‘,18);
    //实例方法调用并输出
    console.log(p.name,p.age);    //nzc 18
    //静态方法调用并输出
    console.log(Person.staticAttr1,Person.staticAttr2);    //静态属性1 静态属性2
    //实例方法sayName()的调用
    p.sayName();
    //静态方法say()的调用
    Person.say();

类定义的完整实例

二、类的继承
说明：
1、可以使用extends关键字实现继承,其本质与js原生中的组合继承一样
2、两条继承链：
a、子类的__proto__属性，表示构造函数的继承，总是指向父类
b、子类prototype属性的__proto__属性，表示方法的继承，总是指向父类的prototype属性

super关键字
作为函时：
a、super()方法,继承了其它类,自身的构造函数中使用super()方法类似于调用了父类的构造函数
b、super()方法的参数与需要调用的父类构造器一样,super()方法里面的this指向为子类的实例对象【superClass.prototype.constructor.call(this)】

作为对象时：
a、在子类实例方法中，指向父类的原型对象【定义在父类实例上的方法或属性,无法通过super调用的】
b、在子类静态方法中，指向父类【在子类的静态方法中可以super调用父类的静态方法和静态属性】

类继承及super关键字相关示例：

    //父类
    class Person
        constructor(name,age)
            this.name = name;
            this.age = age;
            //this如果是在子类构造器中调用的父类构造器中的this指向的是子类的实例对象
            // console.log(this);
        
        sayName()
            console.log(‘Person中的实例方法‘,this.name);
        

        static say()
            console.log(‘Person中的静态方法‘)
        
    

    Person.staticAttr = ‘Person中的静态属性‘;

    //继承
    class Chinese extends Person
        constructor(name,age,skinColor)    
            super(name,age);    //在子类构造器中调用父类构造器
            //在super()底下用this
            this.skinColor = skinColor;
        
        
        static fun1()
            //这里面的super指向的是父类
            super.say();
            super.staticAttr
        

    

    let c = new Chinese(‘小明‘,18,‘yellow‘);
    //原型继承,
    c.sayName();
    //类继承
    Chinese.say();
    console.log(Chinese.staticAttr);
    
    Chinese.fun1() //Person中的静态方法  Person中的静态属性
    

    //子类继承父类【静态的属性及方法的继承】
    console.log(Chinese.__proto__ === Person);    //true

    //子类的原型对象继承自父类的原型对象【实例的属性及方法的继承】
    console.log(Chinese.prototype.__proto__ === Person.prototype);    //true

类的继承及super使用示例