微信小程序的this和that的用法

在微信小程序中，我们经常会使用this.setData来修改数据，但有时候发现，this拿不到，到底是为什么呢？

当我们通过wx.request请求网络数据成功后绑定数据时候报以下错误

这是睁孝因为this作用域指向问题 ，success函改掘数实际是一个闭包 ， 无法直接通过this来核早核setData

方法一：保留this的副本that

方法二：回调函数使用函数声明（箭头函数）的写法

从上面情景中我们发现，问题主要出现在调用接口的回调函数中，所以我们在success或者fail回调函数中要setData的时候，就要选择其中一种方式来避免this丢失

在小程序的wxml文件中者闷唤添加如下代码：

<text>已经

{{d}}天{{h}}时{{m}}分{{s}}秒</text>

在小程序的js文件中添加如下代码：

Page({

    onLoad: function() {

        var that = this

        setInterval(function() {

            var t1 = new Date("2018/05/23 08:20:00")

            var t2 = new Date()

            var t = new Date(t2 - t1 + 16 * 3600 * 1000)

            that.setData({

                d: parseInt(t.getTime() / 1000 / 3600 / 24),

                h: t.getHours(),

           罩没     m: t.getMinutes(),

                s: t.getSeconds()

            })

        }, 1000)

    首凯}

})

data: {

class1: 'z1', //默认正行弯带面在上面

class2: 'z2'

},

rotateFn: function(e) {

let data = this.data

if (data.class1 == 'z1' &&data.class2 == 'z2') {

this.run('front', 'back', 'z2', 'z1')

} else {

this.run('back', 'front'档芦, 'z1', 'z2')

}

},

run: function(a, b, c, d) {

let that = this

that.setData({

class1: a,

class2: b,

})

setTimeout(function() {

that.setData({

class1: c,

class2: d,

})

}, 1000)

},

还有样闹羡式：

page{position: relativeheight: 100%background-color: #F6F6F6}

.rotateCtn{position: absolutewidth: 70%height: 70%left: 15%bottom: 20%transform-style:preserve-3d}

.frame{position: absoluteheight: 100%width: 100%}

.frame image{height: 100%width: 100%border-radius: 8px}

.front{animation:front 1s linear 1backface-visibility: hidden}

.back{animation:back 1s linear 1}

@keyframes front{from{transform: rotateY(0deg)} to{transform: rotateY(180deg)}}

@keyframes back{from{transform: rotateY(-180deg)} to{transform: rotateY(0deg)}}

.z1{z-index:6}

.z2{z-index:5}

---