欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

詳解ES6 CLASS在微信小程序中的應(yīng)用實(shí)例

 更新時(shí)間:2020年04月24日 09:57:24   作者:早飯君  
這篇文章主要介紹了詳解ES6 CLASS在微信小程序中的應(yīng)用實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

ES6 CLASS基本用法

class Point {
 constructor(x, y) {
  this.x = x;
  this.y = y;
 }

 toString() {
  return '(' + this.x + ', ' + this.y + ')';
 }
}

1.1 constructor方法

  constructor方法是類(lèi)的默認(rèn)方法,通過(guò)new命令生成對(duì)象實(shí)例時(shí),自動(dòng)調(diào)用該方法。一個(gè)類(lèi)必須有constructor方法,如果沒(méi)有顯式定義,一個(gè)空的constructor方法會(huì)被默認(rèn)添加。

class Point {
}

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

  上面代碼中,定義了一個(gè)空的類(lèi)Point,JavaScript 引擎會(huì)自動(dòng)為它添加一個(gè)空的constructor方法。

1.2 類(lèi)的實(shí)例

  生成類(lèi)的實(shí)例的寫(xiě)法,與 ES5 完全一樣,也是使用new命令。前面說(shuō)過(guò),如果忘記加上new,像函數(shù)那樣調(diào)用Class,將會(huì)報(bào)錯(cuò)。

class Point { // ...
} // 報(bào)錯(cuò)
var point = Point(2, 3); // 正確
var point = new Point(2, 3);

1.3 取值函數(shù)(getter)和存值函數(shù)(setter)

與 ES5 一樣,在“類(lèi)”的內(nèi)部可以使用get和set關(guān)鍵字,對(duì)某個(gè)屬性設(shè)置存值函數(shù)和取值函數(shù),攔截該屬性的存取行為。

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 的指向

  類(lèi)的方法內(nèi)部如果含有this,它默認(rèn)指向類(lèi)的實(shí)例。但是,必須非常小心,一旦單獨(dú)使用該方法,很可能報(bào)錯(cuò)。

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,默認(rèn)指向Logger類(lèi)的實(shí)例。但是,如果將這個(gè)方法提取出來(lái)單獨(dú)使用,this會(huì)指向該方法運(yùn)行時(shí)所在的環(huán)境(由于 class 內(nèi)部是嚴(yán)格模式,所以 this 實(shí)際指向的是undefined),從而導(dǎo)致找不到print方法而報(bào)錯(cuò)。

ES6 CLASS在微信小程序中的應(yīng)用實(shí)例

//index.js

import {Card} from './Card/Card.js'; //引用
const app = getApp()
Page({
 //初始化數(shù)據(jù)
 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;
  //假如回調(diào)是同步的,可以使用下面的方法直接取值
  // var cardData = carcard.getCardData();
  carcard.getCardData((data)=>{
   //對(duì)數(shù)據(jù)源進(jìn)行判斷
   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");
//創(chuàng)建Card對(duì)象
class Card {
 //構(gòu)造函數(shù),此處提供了兩個(gè)參數(shù)
 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對(duì)象是個(gè)模塊,使用export把對(duì)象輸出出去
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
}

到此這篇關(guān)于詳解ES6 CLASS在微信小程序中的應(yīng)用實(shí)例 的文章就介紹到這了,更多相關(guān)小程序 ES6 CLASS內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

最新評(píng)論