详解ES6 CLASS在微信小程序中的应用实例


Posted in Javascript onApril 24, 2020

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内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
用于判断用户注册时,密码强度的JS代码
Jan 01 Javascript
最短的IE判断代码
Mar 13 Javascript
纯js网页画板(Graphics)类简介及实现代码
Dec 24 Javascript
对frameset、frame、iframe的js操作示例代码
Aug 16 Javascript
预防网页挂马的方法总结
Nov 03 Javascript
使用JS批量选中功能实现更改数据库中的status状态值(批量展示)
Nov 22 Javascript
easyui-datagrid特殊字符不能显示的处理方法
Apr 12 Javascript
微信小程序表单验证错误提示效果
May 19 Javascript
让div运动起来 js实现缓动效果
Jul 06 Javascript
vue移动端使用appClound拉起支付宝支付的实现方法
Nov 21 Javascript
node.js express捕获全局异常的三种方法实例分析
Dec 27 Javascript
vue-cli —— 如何局部修改Element样式
Oct 22 Javascript
Vue中函数防抖节流的理解及应用实现
Apr 24 #Javascript
vue 路由懒加载中给 Webpack Chunks 命名的方法
Apr 24 #Javascript
vue中使用带隐藏文本信息的图片、图片水印的方法
Apr 24 #Javascript
基于Vue实现微前端的示例代码
Apr 24 #Javascript
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
Apr 24 #Javascript
小程序开发之模态框组件封装
Apr 23 #Javascript
详解Vue3中对VDOM的改进
Apr 23 #Javascript
You might like
BBS(php & mysql)完整版(五)
2006/10/09 PHP
php笔记之:php数组相关函数的使用
2013/04/26 PHP
thinkphp模板输出技巧汇总
2014/11/24 PHP
php+mysqli预处理技术实现添加、修改及删除多条数据的方法
2015/01/30 PHP
php pdo连接数据库操作示例
2019/11/18 PHP
JAVASCRIPT对象及属性
2007/02/13 Javascript
javascript 操作Word和Excel的实现代码
2009/10/26 Javascript
JQuery将文本转化成JSON对象需要注意的问题
2011/05/09 Javascript
js重写alert控件(适合学习js的新手朋友)
2014/08/24 Javascript
JavaScript中的Web worker多线程API研究
2014/12/06 Javascript
jquery读写cookie操作实例分析
2015/12/24 Javascript
轻松掌握JavaScript状态模式
2016/09/07 Javascript
Node.Js生成比特币地址代码解析
2018/04/21 Javascript
使用js实现将后台传入的json数据放在前台显示
2018/08/06 Javascript
Vue组件教程之Toast(Vue.extend 方式)详解
2019/01/27 Javascript
微信小程序中限制激励式视频广告位显示次数(实现思路)
2019/12/06 Javascript
微信小程序实用代码段(收藏版)
2019/12/17 Javascript
遗传算法之Python实现代码
2017/10/10 Python
Python中xrange与yield的用法实例分析
2017/12/26 Python
python图像和办公文档处理总结
2019/05/28 Python
Python使用LDAP做用户认证的方法
2019/06/20 Python
详解python中index()、find()方法
2019/08/29 Python
PyTorch中model.zero_grad()和optimizer.zero_grad()用法
2020/06/24 Python
Python绘图实现台风路径可视化代码实例
2020/10/23 Python
lululemon美国官网:瑜伽服+跑步装备
2018/11/16 全球购物
Oracle里面常用的数据字典有哪些
2014/02/14 面试题
大学生活学习的自我评价
2013/12/03 职场文书
留学推荐信中文范文三篇
2014/01/25 职场文书
公司委托书范本
2014/04/04 职场文书
小学教师评语大全
2014/04/23 职场文书
趣味运动会策划方案
2014/06/02 职场文书
大学生感恩父母演讲稿
2014/08/28 职场文书
2014年安置帮教工作总结
2014/12/11 职场文书
高中优秀作文(范文)
2019/08/15 职场文书
python3操作redis实现List列表实例
2021/08/04 Python
Python中with上下文管理协议的作用及用法
2022/03/18 Python