小程序中that this

在开发小程序的过程中,我们经常会遇到this和that这两个关键字，对于很多初学者来说，这两个关键字的使用往往让人感到困惑，我就来为大家详细解析一下this和that在小程序中的用法，帮助大家更好地掌握这门技术。

我们要明确this和that的概念,在小程序中，this和that都是用来指代对象的，它们指代的对象有所不同，我将从以下几个方面为大家详细介绍。

this的用法

在Page对象中使用

在小程序的Page对象中,我们可以通过this来访问当前页面的数据、函数和方法。

Page({
  data: {
    name: '小明'
  },
  onLoad: function() {
    console.log(this.data.name); // 输出：小明
  }
});

在这个例子中,this指代的是当前Page对象。

在Component对象中使用

同样地,在Component对象中，我们也可以通过this来访问组件的数据、函数和方法。

Component({
  properties: {
    name: String
  },
  methods: {
    onLoad: function() {
      console.log(this.properties.name); // 输出：组件的name属性值
    }
  }
});

这里,this指代的是当前Component对象。

在函数中使用

在小程序的函数中,this可以用来访问函数的上下文。

function sayHello() {
  console.log(this.name);
}
var obj = {
  name: '小红',
  sayHello: sayHello
};
obj.sayHello(); // 输出：小红

在这个例子中,this指代的是obj对象。

that的用法

在小程序中,that并没有特定的含义，它通常被用作一个变量来保存this的值，为什么要这样做呢？原因在于，this的值会随着函数的执行上下文而改变，而that可以保持对原始上下文的引用。

保存Page对象中的this

Page({
  data: {
    name: '小明'
  },
  onLoad: function() {
    var that = this;
    setTimeout(function() {
      console.log(that.data.name); // 输出：小明
    }, 1000);
  }
});

在这个例子中,我们在onLoad函数中定义了一个变量that，用来保存当前Page对象的this，在setTimeout的回调函数中，我们通过that来访问Page对象的数据。

保存Component对象中的this

Component({
  properties: {
    name: String
  },
  methods: {
    onLoad: function() {
      var that = this;
      setTimeout(function() {
        console.log(that.properties.name); // 输出：组件的name属性值
      }, 1000);
    }
  }
});

同样地,我们在Component对象的onLoad方法中保存了this的值，以便在setTimeout的回调函数中使用。

注意事项

this和that的使用场景

虽然this和that都可以用来指代对象,但它们的使用场景是不同的，直接在Page或Component对象中使用this即可，当需要在函数或回调函数中访问原始上下文时，可以使用that来保存this的值。

避免滥用that

虽然that可以方便地保存this的值,但过度使用会导致代码可读性降低，在编写小程序时，要合理使用that，确保代码清晰易懂。

通过以上介绍,相信大家对小程序中this和that的用法有了更深入的了解，在实际开发过程中，掌握这两个关键字的使用技巧，将有助于我们更好地编写小程序，希望这篇文章能对大家有所帮助，祝大家编程愉快！