函数的this指向（含箭头函数）

函数的this指向是较为复杂的，分为很多种情况，虽然情况很多，但是只要记住这句话“this：谁调用就是谁”，就能很好的分辨this的指向了。今天给大家详细的介绍一下，希望对大家有所帮助！

1、普通函数

  function fn() {
    console.log(this);
  }
  fn(); 
  // 普通函数的调用其实相当于window.fn()，所以this指向window

2、对象里的方法

  var obj = {
    fn: function() {
      console.log(this);
    }
  };
  obj.fn(); 
  // this指向obj

3、注册事件

  var btn = document.querySelector("button");
  btn.onclick = function() {
    console.log(this);
  };
  //用户触发的时候：相当于 执行  btn.onclick()，打印btn，this指的是btn

4、构造函数

  function Fn() {
        this.a = 10;
        this.b = 20;
    }
    Fn.prototype.fn = function() {
        console.log(this);
    }
    var res = new Fn();
    res.fn();
  //this指的是构造函数Fn的实例化对象res

5、定时器

  setTimeout(function() {
        console.log(this);
    }, 3000);
  //this指向是window

6、自调用函数

  (function() {
        console.log(this);
    })(); 
  //this指向是window

7、箭头函数

  //箭头函数的this和外层保持一致，也就是说箭头函数的this和箭头函数外的this指向同一个对象
  //ES6箭头函数里this和箭头函数外层对象中this是相同的，如果外层对象没有this，则this就指向window
  var abc=()=>{
       console.log(this);
   }
  abc() //window

  const obj = {
      num: 10,
      hello: function () {
          console.log(this);    // obj
          setTimeout(() => {
              console.log(this);    // obj
          });
      }
  }
  obj.hello();

今天就介绍到这里吧，总结一下

• this总是指向函数的调用者，即谁调用就是谁，如obj.fn()，fn里边的this就指向obj
• 普通函数fn()，其实就相当于window.fn()，故普通函数的this指向的是window
• 在严格模式下，this为undefined
• 函数中的this指向可以通过call，apply，bind进行修改