zoukankan      html  css  js  c++  java
  • ES6 Class(类)(九)

    一、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使用示例
  • 相关阅读:
    《精通情绪》读书笔记
    绩效评估与绩效反馈
    数据分析报告格式zz
    学会谈判zz
    javascript中的双向绑定
    理解 DocumentFragment
    理解Object.defineProperty()
    Vue 改变数组中对象的属性不重新渲染View的解决方案
    ES6中Object.assign() 方法
    控制input输入框光标的位置
  • 原文地址:https://www.cnblogs.com/nzcblogs/p/11373926.html
Copyright © 2011-2022 走看看