码迷,mamicode.com
首页 > 其他好文 > 详细

ES6 Class(类)(九)

时间:2019-08-18 21:56:34      阅读:82      评论:0      收藏:0      [点我收藏+]

标签:this   splay   str   img   实现继承   说明   onclick   stat   eve   

一、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使用示例

 

ES6 Class(类)(九)

标签:this   splay   str   img   实现继承   说明   onclick   stat   eve   

原文地址:https://www.cnblogs.com/nzcblogs/p/11373926.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!