详解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 鼠标移动显示图片的简单实例
Dec 25 Javascript
js防止页面被iframe调用的方法
Oct 30 Javascript
jQuery中position()方法用法实例
Jan 16 Javascript
jQuery源码解读之removeClass()方法分析
Feb 20 Javascript
使用微信内置浏览器点击下拉框出现页面乱跳转现象(iphone),该怎么办
Jan 04 Javascript
js实现按座位号抽奖
Apr 05 Javascript
从零开始学习Node.js系列教程之基于connect和express框架的多页面实现数学运算示例
Apr 13 Javascript
Angular 2.0+ 的数据绑定的实现示例
Aug 09 Javascript
vue组件编写之todolist组件实例详解
Jan 22 Javascript
基于ssm框架实现layui分页效果
Jul 27 Javascript
Vue 利用指令实现禁止反复发送请求的两种方法
Sep 15 Javascript
layui实现给某一列加点击事件
Oct 26 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中处理模拟rewrite 效果
2006/12/09 PHP
PHP读取xml方法介绍
2013/01/12 PHP
php stripslashes和addslashes的区别
2014/02/03 PHP
ThinkPHP中Common/common.php文件常用函数功能分析
2016/05/20 PHP
PHP的Json中文处理解决方案
2016/09/29 PHP
PHP实现随机发扑克牌
2020/04/22 PHP
jQuery中fadeIn、fadeOut、fadeTo的使用方法(图片显示与隐藏)
2013/05/08 Javascript
Extjs实现进度条的两种便捷方式
2013/09/26 Javascript
jQuery中attr()方法用法实例
2015/01/05 Javascript
jQuery中offset()方法用法实例
2015/01/16 Javascript
Canvas + JavaScript 制作图片粒子效果
2017/02/08 Javascript
原生javascript实现读写CSS样式的方法详解
2017/02/20 Javascript
微信小程序实战之自定义toast(6)
2017/04/18 Javascript
微信小程序基于slider组件动态修改标签透明度的方法示例
2017/12/04 Javascript
JS+CSS实现滚动数字时钟效果
2017/12/25 Javascript
基于Webpack4和React hooks搭建项目的方法
2019/02/05 Javascript
详解ES6数组方法find()、findIndex()的总结
2020/05/12 Javascript
vue-openlayers实现地图坐标弹框效果
2020/09/24 Javascript
vue中利用three.js实现全景图的完整示例
2020/12/07 Vue.js
[01:03:59]2018DOTA2亚洲邀请赛3月30日 小组赛B组VGJ.T VS Secret
2018/03/31 DOTA
Matplotlib 生成不同大小的subplots实例
2018/05/25 Python
python+selenium实现QQ邮箱自动发送功能
2019/01/23 Python
详解python爬虫系列之初识爬虫
2019/04/06 Python
解决jupyter运行pyqt代码内核重启的问题
2020/04/16 Python
如何使用 Python 读取文件和照片的创建日期
2020/09/05 Python
Python爬虫之Selenium设置元素等待的方法
2020/12/04 Python
python 利用panda 实现列联表(交叉表)
2021/02/06 Python
Html5+JS实现手机摇一摇功能
2015/04/24 HTML / CSS
华为俄罗斯官方网上商城:购买Huawei手机和平板
2017/04/21 全球购物
沪江旗下的海量优质课程平台:沪江网校
2017/11/07 全球购物
电话销售经理岗位职责
2013/12/07 职场文书
节水倡议书
2015/01/19 职场文书
个人年终总结怎么写
2015/03/09 职场文书
农村环境卫生倡议书
2015/04/29 职场文书
我的收音机情缘
2022/04/05 无线电
Python OpenCV之常用滤波器使用详解
2022/04/07 Python