面对 this 指向丢失，尤雨溪在 Vuex 源码中是怎么处理的

最新推荐文章于 2023-06-05 00:14:43 发布

若川视野

最新推荐文章于 2023-06-05 00:14:43 发布

阅读量419

点赞数

文章标签： js html 办公软件 glassfish twitter

本文链接：https://blog.csdn.net/u012384510/article/details/119338188

版权

本文探讨了在JavaScript中this指向的问题，特别是在Vuex源码中的处理方式。通过分析actions的处理，解释了如何通过解构赋值和函数绑定确保store实例的正确传递。此外，总结了判断函数this绑定的四条规则，帮助读者理解this在不同场景下的行为。

摘要由CSDN通过智能技术生成

1. 前言

大家好，我是若川。好久以前我有写过《面试官问系列》，旨在帮助读者提升JS基础知识，包含new、call、apply、this、继承相关知识。其中写了面试官问：this 指向文章。在掘金等平台收获了还算不错的反馈。

最近有小伙伴看我的 Vuex源码文章，提到有一处this指向有点看不懂（好不容易终于有人看我的源码文章了，感动的要流泪了^_^）。于是我写篇文章答疑解惑，简单再说说 this 指向和尤大在 Vuex 源码中是怎么处理 this 指向丢失的。

2. 对象中的this指向

var person = {
  name: '若川',
  say: function(text){
    console.log(this.name + ', ' + text);
  }
}
console.log(person.name);
console.log(person.say('在写文章')); // 若川, 在写文章
var say = person.say;
say('在写文章'); // 这里的this指向就丢失了，指向window了。(非严格模式)

3. 类中的this指向

3.1 ES5

// ES5
var Person = function(){
  this.name = '若川';
}
Person.prototype.say = function(text){
  console.log(this.name + ', ' + text);
}
var person = new Person();
console.log(person.name); // 若川
console.log(person.say('在写文章'));
var say = person.say;
say('在写文章'); // 这里的this指向就丢失了，指向 window 了。