ES6中Class的用法及在微信小程序中的应用实例

OGeek|极客世界-中国程序员成长平台 › 门户 › 编程› 移动开发›小程序云开发高级教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

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入门》这本书，本文内容部分选自该书。