ES6 的 class

作者: 自然框架 | 来源:发表于2021-09-21 12:23 被阅读0次

    最近又重构了 indexedDB 的封装,因为原来用的 class 的方式封装的,虽然实现了功能,但是感觉挺别扭的。

    重构的时候就要考虑代码结构的问题,于是又遇到了class、继承还是组合这个老问题上面来。

    首先复习一下继承的写法,es5的实在太绕,晕晕的,直接用es6的。

    es6 的class 和继承

    class base {
      constructor(name, age){
        this.name = name
        this.age = age
      }
      
      fun1 (msg){
        console.log('base 的 this===', this, msg)
      }
    }
    
    class person extends base {
      constructor(name, age, date){
        super(name, age)
        this.birthday = date
      }
    
      fun2 (msg){
        console.log('person 的 this ===', this, msg)
      }
    }
    
    class man extends person {
      constructor(name, age, date){
        super(name, age)
        this.birthday = date
      }
    
      fun3 (msg){
        console.log('jim 的 this ===', this, msg)
      }
    }
    
    const base1 = new base('jyk', 20)
    const person1 = new person('jyk1', 22, 123)
    const man1 = new man('jyk11', 222, 1232)
    
    console.log('base1', base1)
    console.log('person1', person1)
    console.log('jim1', man1)
    
    base1.fun1('父类调用 fun1')
    // base1.fun2('父类调用 fun2')
    person1.fun1('子类调用 fun1')
    person1.fun2('子类调用 fun2')
    

    似乎可以无限继承下去,不过这个不重要,如何使用达到目的才是重点。

    es6 的 class 和继承

    基类的两个属性 + 自己的函数 fun1,没有问题。

    子类的三个属性 + 自己的函数 fun2,继承父类的fun1,好吧,其实有两个属性是继承自父类,不过没有放在原型里面,而是和自己的属性放在了一个级别里面。

    子子类也是一样,属性都在一个级别里面,函数按照原型链的形式依次向上寻找。

    this

    this 的情况

    父类的 this 并不是固定不变的,而是看实力,自己的实例,this 只有自己的属性,子类的实例,在父类里面看this,却包含了子类的属性。

    这个和面向对象的类就不一样了,有点晕晕。

    用处

    好吧,其实还是没有想出了,用类的好处到底是什么,可能是习惯问题吧,我不太喜欢用继承,封装indexedDB 的时候,只是简单用了 class,其实和类也没啥关系。

    然后代码组织方面,还是感觉分成多个js文件来写,比较容易维护,一个js文件只有一个小功能,虽然文件多,但是不用怕,反正有webpack或者其他方式把分散的文件组合起来。

    关键是,逻辑上如何整合这些分散的代码。

    目前还是没想好,用的是比较笨的方法。

    
    class base {
      constructor(name, age){
        this.name = name
        this.age = age
      }
      
      fun1 (msg){
        console.log('base 的 this===', this, msg)
      }
    
      fun666 = (arg1) => 引入的函数(this, arg1)
    
      fun888 (arg1) {
        return 引入的函数(this, arg1)
      }
    }
    

    好像有点傻,只是没有想出来更好的方法。

    先这样吧,以后再说。

    相关文章

      网友评论

        本文标题:ES6 的 class

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