详解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 相关文章推荐
Sample script that deletes a SQL Server database
Jun 16 Javascript
JavaScript 节点操作 以及DOMDocument属性和方法
Dec 06 Javascript
jquery easyui的tabs使用时的问题
Mar 23 Javascript
jQueryPad 实用的jQuery测试工具(支持IE,chrome,FF)
May 22 Javascript
JQuery对id中含有特殊字符的转义处理示例
Sep 06 Javascript
JS实现判断滚动条滚到页面底部并执行事件的方法
Dec 18 Javascript
JS操作XML实例总结(加载与解析XML文件、字符串)
Dec 08 Javascript
深入理解js中this的用法
May 28 Javascript
Bootstrap编写一个在当前网页弹出可关闭的对话框 非弹窗
Jun 30 Javascript
jquery仿微信聊天界面
May 06 jQuery
ionic2屏幕适配实现适配手机、平板等设备的示例代码
Aug 11 Javascript
vue下拉列表功能实例代码
Apr 08 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
PHP url 加密解密函数代码
2011/08/26 PHP
提高PHP编程效率的方法
2013/11/07 PHP
从零开始学YII2框架(一)通过Composer安装Yii2框架
2014/08/20 PHP
Yii学习总结之数据访问对象 (DAO)
2015/02/22 PHP
php中Redis的应用--消息传递
2017/03/28 PHP
用Javascript数组处理多个字符串的连接问题
2009/08/20 Javascript
javascript闭包传参和事件的循环绑定示例探讨
2014/04/17 Javascript
Express作者TJ告别Node.js奔向Go
2014/07/14 Javascript
JS实现超简洁网页title标题跑动闪烁提示效果代码
2015/10/23 Javascript
微信小程序 框架详解及实例应用
2016/09/26 Javascript
纯jQuery实现前端分页功能
2017/03/23 jQuery
浅谈vue+webpack项目调试方法步骤
2017/09/11 Javascript
jquery ztree实现右键收藏功能
2017/11/20 jQuery
详解一些适用于Node.js的命名约定
2019/12/08 Javascript
Vue组件通信$attrs、$listeners实现原理解析
2020/09/03 Javascript
jQuery实现手风琴特效
2021/01/11 jQuery
[42:32]完美世界DOTA2联赛循环赛 Magma vs PXG BO2第二场 10.28
2020/10/28 DOTA
Python中使用支持向量机SVM实践
2017/12/27 Python
python实现Decorator模式实例代码
2018/02/09 Python
Python格式化输出%s和%d
2018/05/07 Python
Python序列对象与String类型内置方法详解
2019/10/22 Python
Python常用模块函数代码汇总解析
2020/08/31 Python
Alba Moda瑞士网上商店:独家意大利时尚女装销售
2016/11/28 全球购物
美国女性奢华品牌精品店:INTERMIX
2017/10/12 全球购物
通往英国高街的商店橱窗:Down Your High Street
2020/07/19 全球购物
名词解释WEB SERVICE,SOAP,UDDI,WSDL,JAXP,JAXM;JSWDL开发包的介绍。
2012/10/27 面试题
自荐书封面下载
2013/11/29 职场文书
集团薪酬管理制度
2014/01/13 职场文书
初一家长会邀请函
2014/01/31 职场文书
2015年消费者权益日活动总结
2015/02/09 职场文书
2015年银行个人工作总结
2015/05/14 职场文书
安全教育片观后感
2015/06/17 职场文书
《七月的天山》教学反思
2016/02/19 职场文书
心得体会该怎么写呢?
2019/06/27 职场文书
HTML基础详解(下)
2021/10/16 HTML / CSS
Python实战实现爬取天气数据并完成可视化分析详解
2022/06/16 Python