【前端必备技能js—js中this指向问题】

JavaScript 中的 this 是一个非常重要的语法点，想要理解 this，我们可以先记住以下两点：

• 1）this 永远指向一个对象；
• 2）this 的指向完全取决于函数调用的位置（函数运行时所在环境）。

也可参考阮一峰老师的博客

1、this 指向说明

• 1）事件调用环境：谁触发事件，函数里面的 this 就指向谁；

• 2）全局环境：取决于宿主环境，比如：浏览器中指向 window；

• 3）函数内部

  • this 最终指向的是调用它的对象；
  • 函数被多层对象包含，如果函数被最外层对象调用，this 指向的也只是它上一级的对象；
  • 构造函数中的 this 指向的是实例对象
  • 如果构造函数中有 return，且值为对象，this 指向返回的对象；如果不是对象，则 this 指向保持原来的规则；

    function fn() {
      this.num = 10;
      console.log(this);
    }
    var obj = new fn();
    /*
     *new 一共做了哪些事
     * 1.调用函数
     * 2.自动创建一个对象
     * 3.把创建出来的对象和this绑定
     * 4.如果构造函数没有一个对象，隐式返回this对象
     */
    

• 4）箭头函数：箭头函数本身没有 this 和 arguments，其 this 实际上指向定义时上一层级的作用域的 this（这里强调一下是上一层级作用域，因为对象是不能独立形成作用域的）

2、改变 this 指向

• 1）call：call(thisScope, arg1, arg2, arg3…)
• 2）apply：apply(thisScope, [arg1, arg2, arg3…]);
• 3）bind：bind(thisScope, arg1, arg2, arg3…)

  call()和 apply()都是立即执行函数,而 bind()并不会立即执行，而是先返回改变 this 指向后的函数