详解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 相关文章推荐
javascript十个最常用的自定义函数(中文版)
Sep 07 Javascript
js给dropdownlist添加选项的小例子
Mar 04 Javascript
js如何判断不同系统的浏览器类型
Oct 28 Javascript
下拉框select的绑定示例
Sep 04 Javascript
Node.js中防止错误导致的进程阻塞的方法
Aug 11 Javascript
详解Angular 4.x Injector
May 04 Javascript
微信小程序 页面跳转事件绑定的实例详解
Sep 20 Javascript
解决vue中对象属性改变视图不更新的问题
Feb 23 Javascript
angular json对象push到数组中的方法
Feb 27 Javascript
require.js 加载过程与使用方法介绍
Oct 30 Javascript
超轻量级的js时间库miment使用解析
Aug 02 Javascript
js和jquery判断数据类型的4种方法总结
Aug 28 jQuery
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
社区(php&&mysql)二
2006/10/09 PHP
PHP正确配置mysql(apache环境)
2011/08/28 PHP
解析PHP多种序列化与反序列化的方法
2013/06/06 PHP
完美解决:Apache启动问题―(OS 10022)提供了一个无效的参数
2013/06/08 PHP
laravel 解决多库下的DB::transaction()事务失效问题
2019/10/21 PHP
DHTML 中的绝对定位
2006/11/26 Javascript
javascript之解决IE下不渲染的bug
2007/06/29 Javascript
Javascript 遍历对象中的子对象
2009/07/03 Javascript
Javascript操作URL函数修改版
2013/11/07 Javascript
jQuery实现的一个自定义Placeholder属性插件
2014/08/11 Javascript
去除字符串左右两边的空格(实现代码)
2016/05/12 Javascript
3kb jQuery代码搞定各种树形选择的实现方法
2016/06/10 Javascript
JS仿百度自动下拉框模糊匹配提示
2016/07/25 Javascript
bootstrap table 多选框分页保留示例代码
2017/03/08 Javascript
Vue全家桶实践项目总结(推荐)
2017/11/04 Javascript
浅谈 vue 中的 watcher
2017/12/04 Javascript
nodejs实现的连接MySQL数据库功能示例
2018/01/25 NodeJs
详解js访问对象的属性和方法
2018/10/25 Javascript
vuex存值与取值的实例
2019/11/06 Javascript
浅谈vuex中store的命名空间
2019/11/08 Javascript
javascript实现fetch请求返回的统一拦截
2019/12/22 Javascript
vue + node如何通过一个Txt文件批量生成MP3并压缩成Zip
2020/06/02 Javascript
Python3基础之函数用法
2014/08/13 Python
Python使用CMD模块更优雅的运行脚本
2015/05/11 Python
python自动化报告的输出用例详解
2018/05/30 Python
pandas Dataframe行列读取的实例
2018/06/08 Python
对python特殊函数 __call__()的使用详解
2019/07/02 Python
迪奥美国官网:Dior美国
2019/12/07 全球购物
软件测试题目
2013/02/27 面试题
司法建议书范文
2014/05/13 职场文书
校长师德表现自我评价
2015/03/05 职场文书
2015年度合同管理工作总结
2015/05/22 职场文书
Java基础之线程锁相关知识总结
2021/06/30 Java/Android
MySQL系列之十四 MySQL的高可用实现
2021/07/02 MySQL
HTML中的表格元素介绍
2022/02/28 HTML / CSS
JavaWeb实现显示mysql数据库数据
2022/03/19 Java/Android