詳解ES6 CLASS在微信小程式中的應用例項

阿新 • • 發佈：2020-04-26

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: 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方法而報錯。

ES6 CLASS在微信小程式中的應用例項

//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
}

到此這篇關於詳解ES6 CLASS在微信小程式中的應用例項的文章就介紹到這了,更多相關小程式 ES6 CLASS內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！