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入門》這本書，本文內容部分選自該書。