微信小程序开发——this指针的指向问题

在微信小程序及JS开发中，经常看到别人的代码中使用var that = this;

但一直不知道为啥要使用这么一句话，来重新获取this指针，直接使用this指针不香吗？还是在后来的项目工作中，慢慢有了一点点的理解。

（1）this指向

在函数执行时，this 总是指向调用该函数的对象。要判断 this 的指向，其实就是判断 this 所在的函数属于谁。

a. 函数有所属对象时，则指向所属对象

var object1 = {
    value: 100
};
// 函数有所属对象时，通过 . 表达式调用，这时 this 自然指向所属对象。
object1.getValue = function () {
  console.log(this.value);  // 输出 100
  // 其实就是 object1 对象本身
  console.log(this);
  return this.value;
};
console.log(object1.getValue());

getValue() 属于对象 object1，并由 object1 进行 . 调用，因此 this 指针指向的是 object1 对象，因此object1 内的属性参数也是可以使用.来获取的；

b. 函数没有所属对象，则指向全局对象

var object2 = {
    value: 100
};
object2.getValue = function () {
  var fun = function () {
    console.log(this.value) //  undefined
    console.log(this);// 输出全局对象 global
  };
  //fun函数虽然定义在getValue的函数体内，但它既不属于getValue也不属于object1,意即fun并没有被绑定在任何对象上
  fun();
  return this.value;
};
console.log(object2.getValue()); // => 100

​ 当调用时， this 指针指向了全局对象 global

​ 通过进一步查询资料与深入学习，了解到在小程序中的this指针，指向的是回调函数本身，真正的对象存放在堆内存中，因此它的指向在程序执行过程中会实时变化

（2）探究小程序中的this是怎么指的

在index.js中编写一个测试函数：

// index.js

Page({
  data: {
    content:'这是我的第一个微信小程序',
    motto: 'Hello World',
  },
  test1: function () {
    this.setData({
      contentview1:this.data.content,
    });
    function test2() {
      console.log(this.data.content) //undefined 
    }
    test2();
  },
  onLoad() {
    this.test1();
  },
})

<!--index.wxml-->
<view class="container">
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{contentview1}}</text>
    <text class="user-motto">{{contentview2}}</text>
  </view>
</view>

第一个this.data.test可以打印出结果来，并成功传值到前端页面wxml，原因是因为this指向的是包含自定义函数test1()的Page对象。

第二个打印语句是会报错的，如下：

原因：

​ 在自定义的函数test2()中，this指向已经发生了改变，在该函数中this指向的就只是该函数中定义的内容了，也不存在data属性

内部定义的函数function test2() 实际是一个闭包 ，是无法直接通过this来获取数据的，要想在该自定义的内部函数中使用data对象数据，就是使用 var that = this; 重新定义指针指向。修改后代码如下：

  test1: function () {
    var that = this;
    this.setData({
      contentview1:this.data.content,
    });
    function test2() {
      console.log(that.data.content);  
    }
    test2();
   },

运行结果如下，两个指针指向的就都有数据显示了：