浅显的谈谈关于this的指向问题

这是我参与8月更文挑战的第7天，活动详情查看：8月更文挑战

前言

提前说明哦，这是一篇很基础类的文章，只适合小小白阅读，因为文章内容来源于我刚入行时的笔记。各位高人请绕道，谢谢~

关于this的指向有很多的文章博客说明，但在我看来，这个问题并非是看几篇文章就能搞懂的，而是要在实践中不断的运用，才能得心应手，下面我来简单的谈一下关于this指向的个人理解。

关于this的指向一般是这几类：

1. 普通函数中： this--->window
2. 定时器中： this--->window
3. 构造函数中 ： this--->当前实例化的对象
4. 事件处理函数中： this--->事件触发对象
5. js中一般理解为： 谁调用，就指向谁

如下代码：

<script type="text/javascript">
    
      var length = 10;
    
      function fn() {
        console.log(this.length);
      }
    
      var obj = {
        length: 5,
        met: function () {
          length: 1,
          fn();
          arguments[0]();
          fn.call(this);
        }
      }
    
      console.log(this.length);    // 输出是什么？
      
      obj.met(fn, 1);              // 输出是什么？
    
</script>

答案是：输出10，10，2，5

console.log(this.length); 此时this指向window，因为var length = 10;这是在全局中声明的，所以结果是10。

obj.met(fn, 1);这行代码给obj函数中的met函数传了两个参。然后下面执行输出的还有三段函数：

fn(); 此时this指向全局，因为虽然是在met方法内部被执行，met的this指向obj对象。但是fn（）是执行，不是被调用，所以fn（）的this并不是指向obj，还是指向window，实际在原来位置执行，只是把结果传到当前行，所以这里this同样指向window，即为10。

arguments[0]();arguments作为伪数组对象，内部存储的是传进的参数，arguments[0]就是传入的fn，后面加（），就是调用，即调用fn()这个函数。在这里，fn是通过arguments调用的，this指向arguments，arguments有自己的length属性，所以为2。

fn.call(this);在met内部通过call方法传参this，这里met的this指向obj对象，即fn.call(this)的this指向obj对象，所以为5。

后记

你好哇，我是南极大冰块，一个技术与颜值成正比的前端工程师，崇尚一针见血的搞定前端问题，希望我的博客有帮助到了你。关注我，前端路途一起走。嘿哈~😛