使用es6的class类进行模块化封装、请求

es6中的class类出来以后，es5的构造函数我都用得比较少了，虽然以前项目用到的class类也有但是很少，这次用的很普遍，记录一下一些小问题

子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类自己的this对象，必须先通过父类的构造函数完成塑造，得到与父类同样的实例属性和方法，然后再对其进行加工，加上子类自己的实例属性和方法。如果不调用super方法，子类就得不到this对象

ES6 的继承实质是先将父类实例对象的属性和方法，加到this上面（所以必须先调用super方法），然后再用子类的构造函数修改this。

项目目录下新建modules文件夹

modules.js代码

Util 是封装的一些通用方法，包括请求、防抖等等

getData这个方法我没有加static，fu这个方法加了static，主要就是看一下有无static的区别

静态的是指向类自身，而不是指向实例对象，静态方法中this指向类而不是类的实例这一点要记住
使用static定义的不会被实例继承，我们就不用new了，直接fun.某个方法名()
不使用static的，需要先实例化才能调用这个类下面的某个方法
静态方法可以被子类继承，也可以被super调用

我们可以使用hasOwnProperty()来检查是否属于这个实例下的方法，它会返回一个布尔值；使用 Object.getPrototypeOf() 方法来获取实例对象的原型

const  Util  = require('../utils/util.js')
const { Test } = require('./test.js')
const { hostCharge } = require('../utils/httpUrlUtil.js')

class Modules extends Util {
  constructor(){
    super()
  }


  static fu(){
    console.log('====================')
    this.getAuthorizationInfo()
    console.log(a)
    return a
  }

  getData(callback){
  	//通过一个回调函数将请求到的数据返回出去
    Util.httpRequest({
      url:`${hostCharge}/products/list`,
      method: 'post'
    }).then(res => {
      callback(res)
    })
    
  }
}
export { Modules }

在页面中引入Modules，并实例化

const { Modules } = require('../../modules/modules.js')
const modules1 = new Modules()

在onLoad生命周期调用

modules1.getData(res => {
   console.log('数据是：',res)
})
    

console.log(Modules.fu())

这样我们就不用将请求的逻辑都放在页面中了，通过类来集中管理