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与继承

    class是什么 class是定义类的方法。ES6之前用构造函数的方式定义类,ES6引入了class。 class...

  • 手写乞丐版的Promise

    使用es6,class手写promise class NewPromise { constructor(exe...

  • 深入理解JS面向对象 - JavaScript实现继承的五种方式

    一、类与实例 1. 类的声明 传统function类的声明 ES6中的class声明 1.1 ES6 class与...

  • 2JavaScript设计模式--class/extends

    ES6语法 类 class ES6 提供了更接近传统语言的写法,引入了 Class(类)这个概念,作为对象的模板...

  • react组件

    es6 的class类的继承 运用es6 class继承 通过继承React.Component类来定义一个组件

  • 第三十二节: ES6 Class类

    1. ES6 Class 类 ES6 提供了更接近传统语言的写法,引入了 Class(类)这个概念,作为对象的模板...

  • 第三十二节: ES6 Class类

    1. ES6 Class 类 ES6 提供了更接近传统语言的写法,引入了 Class(类)这个概念,作为对象的模板...

  • 26- class 类与继承

    1、ES5 中基于原型的构造函数 2、ES6 的 class关键字 ES6 引入了 Class(类)这个概念,作为...

  • ES6 class类

    在ES6以前,没有类的概念,所有的面向对象都是基于原型实现的。ES6中可以通过class定义类,但是class的本...

  • 面向对象

    一、es6的面向对象 1、class关键字,类和构造器分开了2、class里面直接加方法 以前的构造函数 es6:...

网友评论

    本文标题:ES6 的 class

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