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

 更新时间:2020年04月24日 09:57:24   作者:早饭君  
这篇文章主要介绍了详解ES6 CLASS在微信小程序中的应用实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

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

相关文章

  • three.js 将图片马赛克化的示例代码

    three.js 将图片马赛克化的示例代码

    这篇文章主要介绍了three.js 将图片马赛克化的方法,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下
    2020-07-07
  • JavaScript如何利用Promise控制并发请求个数

    JavaScript如何利用Promise控制并发请求个数

    大家都知道js是单线程,并不存在真正的并发,但是由于JavaScript的Event Loop机制,使得异步函数调用有了“并发”这样的假象。这篇文章主要给大家介绍了关于JavaScript如何利用Promise控制并发请求个数的相关资料,需要的朋友可以参考下
    2021-05-05
  • js 用于检测类数组对象的函数方法

    js 用于检测类数组对象的函数方法

    下面小编就为大家带来一篇js 用于检测类数组对象的函数方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-05-05
  • JavaScript字符串处理常见操作方法小结

    JavaScript字符串处理常见操作方法小结

    这篇文章主要介绍了JavaScript字符串处理常见操作方法,结合实例形式分析了JavaScript字符串操作常见的转换、截取、分割、获取等相关实现技巧,需要的朋友可以参考下
    2019-11-11
  • js+canvas实现代码雨效果

    js+canvas实现代码雨效果

    这篇文章主要为大家详细介绍了js+canvas代码雨效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-06-06
  • js实现前面自动补全位数的方法

    js实现前面自动补全位数的方法

    今天小编就为大家分享一篇js实现前面自动补全位数的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-10-10
  • 浅谈webpack下的AOP式无侵入注入

    浅谈webpack下的AOP式无侵入注入

    下面小编就为大家带来一篇浅谈webpack下的AOP式无侵入注入。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • 用JS实现简单的登录验证功能

    用JS实现简单的登录验证功能

    这篇文章主要介绍了用JS实现简单的登录验证功能,代码简单易懂,非常不错,具有参考借鉴价值,需要的的朋友参考下吧
    2017-07-07
  • JS控制FileUpload的上传文件类型实例代码

    JS控制FileUpload的上传文件类型实例代码

    下面小编就为大家带来一篇JS控制FileUpload的上传文件类型实例代码。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10
  • JS获取时间的方法

    JS获取时间的方法

    这篇文章主要介绍了JS获取时间的方法,涉及date的相关使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-01-01

最新评论