this 的 7 种使用场景

[george-es]

关于this的指向问题
函数中this取何值，是在函数真正被调用执行的时候确定下来的，函数定义的时候确定不了。
this 的取值是属于执行上下文的一部分，每次调用函数，都会产生一个新的执行上下文环境。当代码中使用了 this，这个 this 的值就直接从执行的上下文中获取了，而不会从作用域链中搜寻。

大概可以分7种情况

• ① 全局 & 调用普通函数
  在全局环境中，this 永远指向 window
  普通函数在调用的时候，无论普通函数内嵌套多少个普通函数，this 依旧是指向 window的

• ② 构造函数
  在构造函数中，this 代表的是 new 出来的对象, 也就是构造函数

• ③ 对象方法
  如果函数作为对象方法时，方法中的 this 指向该对象，但是，如果在对象方法中定义函数，那情况就不同的了

    var obj = {
      x: 10,
      foo: function () {
          function f(){
              console.log(this);      //Window
              console.log(this.x);    //undefined
          }
          f();
      }
  }
  obj.foo();
  

  可以这么理解：函数 f 虽然是在 obj.foo 内部定义的，但它仍然属于一个普通函数，this 仍指向 window。
  但如果函数不作为对象方法被调用时

    var obj = {
      x: 10,
      foo: function () {
          console.log(this);       //Window
          console.log(this.x);     //undefined
      }
  };
  var fn = obj.foo;
  fn();
  

  obj.foo 被赋值给一个全局变量，并没有作为 obj 的一个属性被调用，那么此时 this 的值是 window。

• ④ 构造函数 prototype 属性
  构造函数中，this 指向的是 new 出来的对象，在整个原型链中，任何一个地方调用this，依旧指的是 new 出来的对象

• ⑤ 函数用 call，apply 或者 bind 调用
  当一个函数被call、apply 或者 bind 调用时，this 的值就取传入对象的值

• ⑥ DOM event this
  在一个 HTML DOM 事件处理程序里，this 始终指向这个处理程序所绑定的 HTML DOM 节点

• ⑦ 箭头函数中的 this
  箭头函数内部的 this 是词法作用域，由上下文确定，也就是说，箭头函数中的 this 指向的是外层的调用者。
  call，apply，bind 方法对于箭头函数来说只是传入参数，对它的 this 毫无影响

• ⑧ 延迟函数setTimeout & setInterval
  非箭头函数情况下，延迟函数中的 this 是指向window的，箭头函数情况下，如果有外层包裹延迟函数，则箭头函数中 this 指向外层函数， 若没有，指向 window