uniapp的方法中this无效是什么情况

1. uniapp中this指向问题

在uniapp的开发过程中，有时候写好的函数中this并不会指向当前组件实例，而是会指向其他对象，导致使用this.xxx调用组件内部变量或方法时出现错误。

1.1 函数调用方式问题

在使用uniapp开发的过程中，使用Vue组件内部的方法时，需要注意函数调用的方式，不同的调用方式对this的指向是有影响的。下面是三种常见的调用方式：

export default {
  data() {
    return {
      name: 'jack',
    };
  },
  methods: {
    // 方式一
    clickOne() {
      console.log(this.name);
    },
    // 方式二
    clickTwo: function () {
      console.log(this.name);
    },
    // 方式三
    clickThree: () => {
      console.log(this.name);
    },
  },
};

上述代码中，clickOne和clickTwo是两种不同的函数调用方式。方法一使用的是ES6的箭头函数方式，方法二使用传统的函数声明方式，方法三也是一种箭头函数，但是是在methods外面进行定义的。三种不同的方式调用click方法，打印的name值也是不一样的。

箭头函数: 箭头函数定义时，其this指向的是其所在的环境的this，而不是new出来的实例对象。因此这种方法调用组件实例中的属性或方法不可取。

传统函数声明/函数表达式: 函数声明或表达式中的this指向的是调用该函数的对象。例如上述代码中通过clickTwo方法调用click方法，this指向的是组件实例本身，可以使用this.name调用实例中的变量。

1.2 setTimeout中的this指向问题

setTimeout函数是JavaScript中常用的一个定时器函数，在uniapp中也可以使用这个函数进行定时操作。然而，setTimeout中的this指向并不是指向组件实例的，而是指向window对象。

下面是一个具体的例子：

export default {
  data() {
    return {
      name: 'jack',
    };
  },
  methods: {
    start: function () {
      console.log(this.name);
      setTimeout(function () {
        console.log(`setTimeout: ${this.name}`);
      }, 500);
    },
  },
}

在上述代码中，我们通过start方法调用setTimeout，但是在setTimeout的回调函数中，this.name的值并不是组件实例中的name值，而是undefined，因为setTimeout中的this指向的是window对象，而window对象中并没有name属性。

解决方法：可以在setTimeout的回调函数中通过闭包保存this指向。

  start: function () {
    console.log(this.name);
    let that = this;
    setTimeout(function () {
      console.log(`setTimeout: ${that.name}`);
    }, 500);
  },

在上述代码中，我们通过let声明了一个that变量，将当前的组件实例保存到that变量中，然后在setTimeout的回调函数中通过that.name来调用组件实例中的name属性。

2. 组件内部this指向问题的其他解决方法

2.1 使用箭头函数

在js中，使用箭头函数可以很好地解决this指向问题。在Vue组件中，也可以使用箭头函数代替传统的独立函数来解决this指向问题。

例如：

export default {
  data() {
    return {
      name: 'jack',
    };
  },
  methods: {
    start: () => {
      console.log(this.name);
    },
  },
};

在上述代码中，使用了箭头函数来定义start方法，这时候在start方法中的this指向的是组件实例，就可以通过this.xxx访问组件实例中的变量或方法。

但是，箭头函数并不是总能解决Vue组件中的this指向问题。在一些情况下，比如在methods内部调用自身的方法时，使用箭头函数可能会出现指向错误的问题。

2.2 使用bind方法

在vue组件实例创建时，也可以通过bind方法来修改其内部方法的this指向，这是一种比较常见的解决Vue组件中的this指向问题的方法。

export default {
  data() {
    return {
      name: 'jack',
    };
  },
  methods: {
    start() {
      console.log(this.name);
    },
    bindStart() {
      setTimeout(this.start.bind(this), 1000);
    },
  }
}

在上述代码中，我们添加了一个新的方法bindStart，这个方法中通过setTimeout调用start方法时使用了bind方法来修改start方法的this指向，将其指向了当前的组件实例。

2.3 将this保存在一个变量中

在Vue组件中，也可以使用其他变量来保存当前组件实例的this，然后在使用时直接使用这个变量即可。

例如：

export default {
  data() {
    return {
      name: 'jack',
    };
  },
  created() {
    let vm = this;
    console.log(vm.name);
  },
};

在上述代码中，我们在created生命周期函数中将组件实例的this保存到一个变量vm中，然后在vm中就可以调用组件实例中的变量和方法了。这种方法适用于所有的Vue组件内部，但是需要注意的是，这个变量的命名不要与组件实例中的变量或方法重名，否则会引起冲突。

3. 总结

在uniapp的开发过程中，会遇到this指向问题。但是通过对Vue组件内部的this指向问题进行分析，我们可以发现，这个问题并不难解决。针对不同的情况，我们可以使用不同的方法来保证this指向正确，让我们的代码更加流畅、高效。