189 8069 5689

在微信小程序中应用ES6CLASS的实例分析

这篇文章主要讲解了在微信小程序中应用ES6 CLASS的实例分析，内容清晰明了，对此有兴趣的小伙伴可以学习一下，相信大家阅读完之后会有帮助。

在成都网站设计、网站制作、外贸营销网站建设中从网站色彩、结构布局、栏目设置、关键词群组等细微处着手，突出企业的产品/服务/品牌，帮助企业锁定精准用户，提高在线咨询和转化，使成都网站营销成为有效果、有回报的无锡营销推广。创新互联建站专业成都网站建设十余年了，客户满意度97.8%，欢迎成都创新互联客户联系。

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的实例分析有进一步的了解，如果还想学习更多内容，欢迎关注创新互联行业资讯频道。


网页名称：在微信小程序中应用ES6CLASS的实例分析
网址分享：http://cdxtjz.cn/article/pppjoj.html

其他资讯