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入门》这本书,本文内容部分选自该书。

ES6中Class的用法及在微信小程序中的应用实例的更多相关文章

  1. WeChat-SmallProgram:微信小程序中使用Async-await方法异步请求变为同步请求

    微信小程序中有些 Api 是异步的,无法直接进行同步处理.例如:wx.request.wx.showToast.wx.showLoading 等.如果需要同步处理,可以使用如下方法: 提示:Async ...

  2. 全栈开发工程师微信小程序-中(中)

    全栈开发工程师微信小程序-中(中) 开放能力 open-data 用于展示微信开放的数据 type 开放数据类型 open-gid 当 type="groupName" 时生效, ...

  3. 微信小程序中的循环遍历问题

    比如:如果在微信小程序中要遍历输出 0-9 的数,我们会使用for循环 ;i<;i++){ console.log(i); } 确实结果也是这样: 但是,如果我在循环时同时调用wx的api接口1 ...

  4. 微信小程序中this指向作用域问题this.setData is not a function报错

    在微信小程序中我们一般通过以下方式来修改data中的数据 this.setData({ index1: e.detail.value }) 比如在函数里面修改数据 bindFaChange1: fun ...

  5. 微信小程序中使用Async-await方法异步请求变为同步请求

    微信小程序中有些 Api 是异步的,无法直接进行同步处理.例如:wx.request.wx.showToast.wx.showLoading等.如果需要同步处理,可以使用如下方法: 注意: Async ...

  6. 微信小程序中promise的使用

    简介 相信看到这篇文章的同学,都已经对微信小程序的api文档有所了解了,也都经历了微信小程序api回调函数嵌套的痛苦,才会想要通过Promise解决回调地狱这个问题,我下面就直接介绍怎么在小程序中使用 ...

  7. 网页或微信小程序中使元素占满整个屏幕高度

    在项目中经常要用到一个容器元素占满屏幕高度和宽度,然后再在这个容器元素里放置其他元素. 宽度很简单就是width:100% 但是高度呢,我们知道的是height:100%必须是在父元素的高度给定了的情 ...

  8. 在微信小程序中使用富文本转化插件wxParse

    在微信小程序中我们往往需要展示一些丰富的页面内容,包括图片.文本等,基本上要求能够解析常规的HTML最好,由于微信的视图标签和HTML标签不一样,但是也有相对应的关系,因此有人把HTML转换做成了一个 ...

  9. 微信小程序中发送模版消息注意事项

    在微信小程序中发送模版消息 参考微信公众平台Api文档地址:https://mp.weixin.qq.com/debug/wxadoc/dev/api/notice.html#模版消息管理 此参考地址 ...

随机推荐

  1. NPOI 获取单元格的值

    1.日期格式的坑 var cell = row.GetCell(i);//获取某一个单元格 var value = ""; if (cell != null) { if (cell ...

  2. ios学习之路:Xcode+swift+打包ipa一步一坑记录

    咳咳,作为公司的Android开发(兼java接口开发,兼软件测试,兼运维……)由于公司ios开发小伙伴离我而去,ios的app出了问题,急需处理.于是领导决定由我来处理一下.就是用证书重新打包的事儿 ...

  3. Eclipse——关联源代码

    Eclipse——关联源代码 摘要:本文主要说明了如何在Eclipse里关联源代码. 下载源码包 首先去想要关联的jar包的官网下载对应jar包的源代码,拿Tomcat的类库举例,先去官网下载源码包: ...

  4. 前端小白webpack学习(三)

    不写不知道,一写发现自己真是罗里吧嗦,尽量改进 之前写了webpack的主要概念和一些使用,今天再记一下webpack的plugins和loaders的使用 7.webpack plugins使用 例 ...

  5. C语言笔记 02_基本语法&数据类型&变量

    基本语法 令牌 C 程序由各种令牌组成,令牌可以是关键字.标识符.常量.字符串值,或者是一个符号.例如,下面的 C 语句包括五个令牌: printf("Hello, World! \n&qu ...

  6. jquery.i18n 网站呈现各国语言

    在做网站的时候可能会遇到不同语言切换的问题,实现的方法有很多种,本篇文章按照 js 加载的方法的来实现. 应用到的 js 文件: jquery.i18n.properties.js jquery.js ...

  7. HTML 表单模板

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. js效果 整理

    整理中... 1.js获取页面及元素高度.宽度 其他参考文献:http://www.open-open.com/lib/view/open1420120422531.html js: 网页可见区域宽: ...

  9. JavaWeb 错误/异常时页面提示

    经常我们会遇到发生页面404错误,服务器 500 异常,如果默认方式处理,则是将异常捕获之后跳到 Tomcat 缺省的异常页面,如下图所示.

  10. Python生成requirements.txt方法

    在查看别人的Python项目时,经常会看到一个requirements.txt文件,里面记录了当前程序的所有依赖包及版本号,其作用是用来在另一个环境上重新构建项目所需要的运行环境依赖. require ...