ES6中Class的用法及在微信小程序中的应用实例
1、ES6的基本用法
ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。基本上，ES6 的class可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的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: 123 inst.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方法而报错。
2.ES6在微信小程序中的应用实例
代码展示：
//index.js import {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.js function 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 }
感谢：感谢阮一峰大神的《ECMAScript6入门》这本书，本文内容部分选自该书。
