相思资源网 Design By www.200059.com
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";
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
相思资源网 Design By www.200059.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
相思资源网 Design By www.200059.com
暂无详解ES6 CLASS在微信小程序中的应用实例的评论...