uniapp中this和that的使用方法

1. 关于this指向

this指向在JavaScript中是非常重要的概念。在uniapp中，this的指向也是同样遵循JavaScript的原则，即this指向当前执行环境下的函数或对象。但是在特定的场景下，this的指向可能与我们预期的不一致。下面我们来讨论一些常见的场景。

1.1 在组件中的this指向

在组件中，this指向组件本身。比如我们有这样一个组件：

<template>
  <div @click="onClick">{{ message }}</div>
</template>
<script>
export default {
  data() {
    return {
      message: 'Hello, world!'
    }
  },
  methods: {
    onClick() {
      console.log(this)  // this指向组件本身
      console.log(this.message)  // 输出'Hello, world!'
    }
  }
}
</script>

在组件的方法中，this指向组件本身，因此我们可以通过this.message访问组件的data中定义的数据。

1.2 在事件处理函数中的this指向

在事件处理函数中，this指向事件的触发者。比如我们有这样一个事件处理函数：

export default {
  methods: {
    onClick(event) {
      console.log(this)  // this指向事件的触发者
      console.log(event.target)  // 输出事件的目标元素
    }
  }
}

在事件处理函数中，this指向事件的触发者，也就是事件绑定的元素。在上面的例子中，this指向该组件，而event.target指向被点击的元素。

1.3 在箭头函数中的this指向

在箭头函数中，this指向箭头函数声明时的上下文。箭头函数的this不能被改变，在uniapp中与JavaScript中的表现是一致的。比如我们有这样一个箭头函数：

export default {
  data() {
    return {
      message: 'Hello, world!'
    }
  },
  methods: {
    onClick: () => {
      console.log(this)  // this指向组件本身
      console.log(this.message)  // 输出'Hello, world!'
    }
  }
}

在箭头函数中，this指向箭头函数声明时的上下文，即组件本身。因此我们可以使用this.message访问组件的data中定义的数据。

2. 关于that指向

在uniapp中，that也可以用来代替this，但是使用that指向有一些场景下的限制。下面我们来看一下在uniapp中，为什么有时需要使用that指向。

2.1 在回调函数中的that指向

在回调函数中，this指向的往往是回调函数本身，而非当前组件或对象。为了解决这个问题，我们可以使用that指向来代替this。

export default {
  data() {
    return {
      message: 'Hello, world!'
    }
  },
  methods: {
    getData() {
      var that = this
      uni.request({
        url: 'https://api.example.com/data',
        success(res) {
          // 这里的this指向回调函数本身，不能访问组件的data中定义的数据
          console.log(that.message)  // 输出'Hello, world!'
        }
      })
    }
  }
}

在回调函数中，this指向的通常是回调函数本身，所以我们可以使用that来代替this，从而访问到组件的数据。

2.2 在异步函数中的that指向

在异步函数中，异步的执行顺序可能会导致this指向发生变化。在这样的场景下，我们也可以使用that来代替this。

export default {
  data() {
    return {
      message: 'Hello, world!'
    }
  },
  methods: {
    async getData() {
      var that = this
      const res = await uni.request({
        url: 'https://api.example.com/data'
      })
      // 这里的this指向可能会发生变化，我们可以使用that来代替this
      console.log(that.message)  // 输出'Hello, world!'
    }
  }
}

在异步函数中，由于异步的执行顺序可能会导致this指向发生变化，所以我们也可以使用that来代替this，从而访问到组件的数据。