• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

ES6中Class的用法及在微信小程序中的应用实例

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

1、ES6的基本用法

  ES6 提供了更接近传统语言的写法,引入了 Class(类)这个概念,作为对象的模板。通过class关键字,可以定义类。基本上,ES6 的class可以看作只是一个语法糖,它的绝大部分功能,ES5 都可以做到,新的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 一样,在“类”的内部可以使用getset关键字,对某个属性设置存值函数和取值函数,拦截该属性的存取行为。

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方法而报错。

2.ES6在微信小程序中的应用实例

  代码展示:

//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
}

   感谢:感谢阮一峰大神的《ECMAScript6入门》这本书,本文内容部分选自该书。


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
第一次用golang写个小程序发布时间:2022-07-18
下一篇:
小程序wx.createInnerAudioContext()获取不到时长问题发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap