关于vue2中methods使用call修改this指向的问题

Question

在vue组件内部无法使用call修改this指向么，有疑问，烦请帮忙解答

Answer 1

参考免费微信小程序：皆我百晓生 作答，经由专家-司宇整理回复，如问题解决，望采纳；如仍有疑问，请评论回复。

在Vue 2中，methods里的函数默认绑定到Vue实例上，这意味着在这些方法内部，this通常指向Vue实例本身。当你尝试使用.call()或.apply()改变某个方法的this指向时，确实可以修改this上下文，但这样做可能会导致一些意想不到的问题，特别是当该方法依赖于Vue实例上的属性或方法时。

从你提供的信息来看，你在getData方法里调用了this.aaa.call(person);，试图将aaa方法中的this改为外部定义的person对象。如果aaa方法内需要访问Vue实例上的数据或方法，那么更改了this后，它可能无法正常工作，因为你实际上改变了它的执行上下文。

如何解决

1. 确保不需要访问Vue实例属性：如果你确定aaa方法不依赖任何Vue实例的数据或方法，那么直接用.call()改变this是可行的。但是根据你的描述，这似乎不是理想的解决方案。

2. 传递额外参数：另一种方式是在调用aaa时传入额外参数而不是改变this。例如：

   getData (ret) {
       this.allData = ret;
       this.aaa(person);
   }
   aaa(personObj) {
       console.log(personObj); // 这样可以直接使用personObj而不用改变this
   }
   

3. 使用箭头函数保持原始的this：如果你想保持原方法内的this指向不变，同时又想传递额外的数据给这个方法，可以考虑使用箭头函数来包装你的方法调用。这样做的好处是可以保留原有的this值，并且能够向方法传递额外的参数。

   getData (ret) {
       this.allData = ret;
       (() => { this.aaa(); })(person); // 使用立即执行函数表达式(IFE)
   }
   aaa() {
       console.log(this, person); // 此处的this仍为Vue实例
   }
   

4. 利用闭包保存上下文：通过创建一个新的函数，在新函数中调用原始方法并传递所需的上下文。

   getData (ret) {
       this.allData = ret;
       const boundAaa = () => {
           this.aaa();
       };
       boundAaa.call(person);
   }
   aaa() {
       console.log(this, arguments[0]); // 访问外部传入的person
   }
   

以上方法可以根据具体情况选择适合的一种实现。关键是理解this在不同场景下的含义以及如何有效地管理其指向，以避免因不当使用导致的错误。希望这些信息对你有所帮助！