这篇文章主要讲解了在微信小程序中应用ES6 CLASS的实例分析，内容清晰明了，对此有兴趣的小伙伴可以学习一下，相信大家阅读完之后会有帮助。

ES6 CLASS基本用法

class Point { constructor(x, y) { this.x = x; this.y = y; } toString() { return '(' + this.x + ', ' + this.y + ')'; }}

1.1 constructor方法

　　constructor方法是类的默认方法，通过new命令生成对象实例时，自动调用该方法。一个类必须有constructor方法，如果没有显式定义，一个空的constructor方法会被默认添加。

class Point {}// 等同于class Point { constructor() {}}

　　上面代码中，定义了一个空的类Point，JavaScript 引擎会自动为它添加一个空的constructor方法。

1.2 类的实例

　　生成类的实例的写法，与 ES5 完全一样，也是使用new命令。前面说过，如果忘记加上new，像函数那样调用Class，将会报错。

class Point { // ...} // 报错var point = Point(2, 3); // 正确var point = new Point(2, 3);

1.3 取值函数（getter）和存值函数（setter）

与 ES5 一样，在“类”的内部可以使用get和set关键字，对某个属性设置存值函数和取值函数，拦截该属性的存取行为。

class MyClass { constructor() { // ... } get prop() { return 'getter'; } set prop(value) { console.log('setter: '+value); }}let inst = new MyClass();inst.prop = 123;// setter: 123inst.prop// 'getter'

1.4 this 的指向

　　类的方法内部如果含有this，它默认指向类的实例。但是，必须非常小心，一旦单独使用该方法，很可能报错。

class Logger { printName(name \= 'there') { this.print(\`Hello ${name}\`); } print(text) { console.log(text); }}const logger \= new Logger();const { printName } \= logger;printName(); // TypeError: Cannot read property 'print' of undefined

　　上面代码中，printName方法中的this，默认指向Logger类的实例。但是，如果将这个方法提取出来单独使用，this会指向该方法运行时所在的环境（由于 class 内部是严格模式，所以 this 实际指向的是undefined），从而导致找不到print方法而报错。

ES6 CLASS在微信小程序中的应用实例

//index.jsimport {Card} from './Card/Card.js'; //引用const app = getApp()Page({ //初始化数据 data: { cards:{}, }, onLoad: function () { var url = "https://app.******.com/submit_ajax.ashx?action=APP_GetCardslist"; var param = {uid:'37906'}; var carcard = new Card(url,param); var that = this; //假如回调是同步的,可以使用下面的方法直接取值 // var cardData = carcard.getCardData(); carcard.getCardData((data)=>{ //对数据源进行判断 if (data.status == '1') { that.setData({ cards: data.result }) console.log(that.data.cards); } else { wx.showToast({ title: data.msg, icon:'none' }) } }) }, })

var util = require("../../../utils/util.js");//创建Card对象class Card { //构造函数，此处提供了两个参数 constructor(url,parameter) { this.url = url; this.parameter = parameter; } getCardData(cb) { this.cb = cb; util.http(this.url,this.parameter,"POST",this.processCarCardData.bind(this)); } processCarCardData(data) { if (!data) { return; } this.cb(data); }}//class对象是个模块，使用export把对象输出出去export {Card}

//util.jsfunction http(url,parameter,method, callback) { wx.request({ url: url, method: method, data:{parameter}, header: { "Content-type": "application/json" }, success: function (res) { callback(res.data); }, fail: function () { console.log("error"); } });}module.exports \= { http:http}

看完上述内容，是不是对在微信小程序中应用ES6 CLASS的实例分析有进一步的了解，如果还想学习更多内容，欢迎关注亿速云行业资讯频道。