ES6-Class

作者: 黑色的五叶草 | 来源:发表于2019-09-27 15:26 被阅读0次

    (参考自秒味课堂的视频讲解)

    Class

    1.ES5中的原型

    • const Miaov = function ( ) { } 为构造函数
    • constructor: Miaov 为指针
    • Miaov.prototype 为原型对象
    • const miaov = new Miaov(); 为构造函数Miaov创建的实例
    • ES5中的原型

    2.ES6中的原型

    • class Miaov { } 为声明一个Miaov的类
    • constructor () { }Miaov这个类的构造函数,里面存放的是它的实例属性
    • print () { } 为原型对象上的print方法
    • const miaov = new Miaov(); 为构造函数Miaov创建的实例
      ES6中的原型
    1. typeof Miaov 返回的是一个function
    2. 方法之间不需要加逗号分隔,加了会报错
    3. 定义在类上的方法都是不能被枚举的 Object.keys(Miaov.proto)

    Class的继承

    • static 指明类的静态方法
    • extends 继承一个类 Class A extends B声明一个类A继承自B类
    • super
      • 作用一:子类继承父类时,super()可以当做函数去使用。相当于调用了父类的构造函数constructor() { }。子类继承父类时不仅会继承构造函数的属性,还会继承父类static声明的静态方法
        ES6规定:在子类每调用super之前,子类没有自己的this
      • 作用二:super.methods() super调用一个方法,此时super指向父类的原型对象
        return this 可以在实例化的时候 方便调用其他方法
    class Cake {
        constructor(name) {
            this.name = name
        }
    
        sayName() {
            console.log(this.name);
        }
    }
    
    class MilkCake extends Cake {
        constructor(name, tatst) {
            super(name)
            this.tatst = tatst
        } 
    }
    
    const c = new MilkCake('lida', 'good')
    console.log(c);        // MilkCake { name: 'lida', tatst: 'good' }
    

    相关文章

      网友评论

          本文标题:ES6-Class

          本文链接:https://www.haomeiwen.com/subject/mchauctx.html