详解ES6 CLASS在微信小程序中的应用实例
ES6CLASS基本用法
classPoint{
constructor(x,y){
this.x=x;
this.y=y;
}
toString(){
return'('+this.x+','+this.y+')';
}
}
1.1constructor方法
constructor方法是类的默认方法，通过new命令生成对象实例时，自动调用该方法。一个类必须有constructor方法，如果没有显式定义，一个空的constructor方法会被默认添加。
classPoint{
}
//等同于
classPoint{
constructor(){}
}
上面代码中，定义了一个空的类Point，JavaScript引擎会自动为它添加一个空的constructor方法。
1.2类的实例
生成类的实例的写法，与ES5完全一样，也是使用new命令。前面说过，如果忘记加上new，像函数那样调用Class，将会报错。
classPoint{//...
}//报错
varpoint=Point(2,3);//正确
varpoint=newPoint(2,3);
1.3取值函数（getter）和存值函数（setter）
与ES5一样，在“类”的内部可以使用get和set关键字，对某个属性设置存值函数和取值函数，拦截该属性的存取行为。
classMyClass{
constructor(){
//...
}
getprop(){
return'getter';
}
setprop(value){
console.log('setter:'+value);
}
}
letinst=newMyClass();
inst.prop=123;
//setter:123
inst.prop
//'getter'
1.4this的指向
类的方法内部如果含有this，它默认指向类的实例。但是，必须非常小心，一旦单独使用该方法，很可能报错。
classLogger{
printName(name\='there'){this.print(\`Hello${name}\`);
}
print(text){
console.log(text);
}
}
constlogger\=newLogger();
const{printName}\=logger;
printName();//TypeError:Cannotreadproperty'print'ofundefined
上面代码中，printName方法中的this，默认指向Logger类的实例。但是，如果将这个方法提取出来单独使用，this会指向该方法运行时所在的环境（由于class内部是严格模式，所以this实际指向的是undefined），从而导致找不到print方法而报错。
ES6CLASS在微信小程序中的应用实例
//index.js
import{Card}from'./Card/Card.js';//引用
constapp=getApp()
Page({
//初始化数据
data:{
cards:{},
},
onLoad:function(){
varurl="https://app.******.com/submit_ajax.ashx?action=APP_GetCardslist";
varparam={uid:'37906'};
varcarcard=newCard(url,param);
varthat=this;
//假如回调是同步的,可以使用下面的方法直接取值
//varcardData=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'
})
}
})
},
})
varutil=require("../../../utils/util.js");
//创建Card对象
classCard{
//构造函数，此处提供了两个参数
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
functionhttp(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
}
到此这篇关于详解ES6CLASS在微信小程序中的应用实例的文章就介绍到这了,更多相关小程序ES6CLASS内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！