最近又重构了 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)
}
}
好像有点傻,只是没有想出来更好的方法。
先这样吧,以后再说。
网友评论