詳解ES6 CLASS在微信小程序中的應(yīng)用實(shí)例
ES6 CLASS基本用法
class Point { constructor(x, y) { this.x = x; this.y = y; } toString() { return '(' + this.x + ', ' + this.y + ')'; } }
1.1 constructor方法
constructor方法是類(lèi)的默認(rèn)方法,通過(guò)new命令生成對(duì)象實(shí)例時(shí),自動(dòng)調(diào)用該方法。一個(gè)類(lèi)必須有constructor方法,如果沒(méi)有顯式定義,一個(gè)空的constructor方法會(huì)被默認(rèn)添加。
class Point { } // 等同于 class Point { constructor() {} }
上面代碼中,定義了一個(gè)空的類(lèi)Point,JavaScript 引擎會(huì)自動(dòng)為它添加一個(gè)空的constructor方法。
1.2 類(lèi)的實(shí)例
生成類(lèi)的實(shí)例的寫(xiě)法,與 ES5 完全一樣,也是使用new命令。前面說(shuō)過(guò),如果忘記加上new,像函數(shù)那樣調(diào)用Class,將會(huì)報(bào)錯(cuò)。
class Point { // ... } // 報(bào)錯(cuò) var point = Point(2, 3); // 正確 var point = new Point(2, 3);
1.3 取值函數(shù)(getter)和存值函數(shù)(setter)
與 ES5 一樣,在“類(lèi)”的內(nèi)部可以使用get和set關(guān)鍵字,對(duì)某個(gè)屬性設(shè)置存值函數(shù)和取值函數(shù),攔截該屬性的存取行為。
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 的指向
類(lèi)的方法內(nèi)部如果含有this,它默認(rèn)指向類(lèi)的實(shí)例。但是,必須非常小心,一旦單獨(dú)使用該方法,很可能報(bào)錯(cuò)。
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,默認(rèn)指向Logger類(lèi)的實(shí)例。但是,如果將這個(gè)方法提取出來(lái)單獨(dú)使用,this會(huì)指向該方法運(yùn)行時(shí)所在的環(huán)境(由于 class 內(nèi)部是嚴(yán)格模式,所以 this 實(shí)際指向的是undefined),從而導(dǎo)致找不到print方法而報(bào)錯(cuò)。
ES6 CLASS在微信小程序中的應(yīng)用實(shí)例
//index.js import {Card} from './Card/Card.js'; //引用 const app = getApp() Page({ //初始化數(shù)據(jù) 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; //假如回調(diào)是同步的,可以使用下面的方法直接取值 // var cardData = carcard.getCardData(); carcard.getCardData((data)=>{ //對(duì)數(shù)據(jù)源進(jìn)行判斷 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"); //創(chuàng)建Card對(duì)象 class Card { //構(gòu)造函數(shù),此處提供了兩個(gè)參數(shù) 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對(duì)象是個(gè)模塊,使用export把對(duì)象輸出出去 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 }
到此這篇關(guān)于詳解ES6 CLASS在微信小程序中的應(yīng)用實(shí)例 的文章就介紹到這了,更多相關(guān)小程序 ES6 CLASS內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
基于Particles.js制作超炫粒子動(dòng)態(tài)背景效果(仿知乎)
本文給大家分享Particles.js基于Canvas畫(huà)布創(chuàng)建粒子顆粒效果,代碼非常簡(jiǎn)單,需要的朋友參考下吧2017-09-09js判斷一個(gè)字符串是以某個(gè)字符串開(kāi)頭的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇js判斷一個(gè)字符串是以某個(gè)字符串開(kāi)頭的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-12-12JavaScript匿名函數(shù)之模仿塊級(jí)作用域
這篇文章主要介紹了JavaScript匿名函數(shù)之模仿塊級(jí)作用域的相關(guān)資料,需要的朋友可以參考下2015-12-12JS實(shí)現(xiàn)的計(jì)數(shù)排序與基數(shù)排序算法示例
這篇文章主要介紹了JS實(shí)現(xiàn)的計(jì)數(shù)排序與基數(shù)排序算法,結(jié)合實(shí)例形式簡(jiǎn)單分析了計(jì)數(shù)排序與基數(shù)排序的原理與JS實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-12-12用CSS+JS實(shí)現(xiàn)的進(jìn)度條效果效果
用CSS+JS實(shí)現(xiàn)的進(jìn)度條效果效果...2007-06-06JavaScript運(yùn)動(dòng)函數(shù)實(shí)例詳解
這篇文章主要為大家詳細(xì)介紹了JavaScript的運(yùn)動(dòng)函數(shù),使用實(shí)例在論證,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-02-02javascript中的void運(yùn)算符語(yǔ)法及使用介紹
void是javascript中的一個(gè)操作符,void會(huì)計(jì)算表達(dá)式的值,但是會(huì)丟棄表達(dá)式的返回值接下來(lái)將詳細(xì)介紹下,感興趣的你可以參考下或許對(duì)你有所幫助2013-03-03