this指向问题是js中老生长谈的问题了，今天我们就来捋一捋。

简单总结来说，this指向可以归结为这么两点；

1. 如果函数是对象属性或者类方法，this指向当前对象
2. 如果是普通函数，则指向全局对象

具体我们来看看这几种情况

全局作用域

// 浏览器中执行
console.log(this)  // 输出 window

// node 中执行
console.log(this)  // 输出 {}
console.log(this === module.exports)  // 输出 true

即全局作用域中，在浏览器执行 this 指向的是 window；在 node 中执行，this 指向的是 module.exports。

函数中调用的情况

事件绑定

    <button id="btn1" onclick="console.log(this)">按钮1</button>
    <button id="btn2">按钮2</button>

var btn1 = document.getElementById("btn1");

btn1.onclick = changeBgColor;

function changeBgColor() {
  this.style.backgroundColor = "red";
}

btn中this均指向DOM本身节点对象，可以理解为，调用的函数为btn对象的属性，所以指向为当前对象。

普通函数

function fn() {
  console.log(this);
}
fn();             // 输出 window
window.fn();      // 输出 window

即第二条，普通函数指向全局对象；

需要注意的是，严格模式下，函数没有被 window 显示调用，会指向 undefined

'use strict'

function() {
  console.log(this);
}

fn();             // 输出 undefined

对象中的方法

var obj = {
  a: 10,
  fun: function() {
    console.log(this);
  }
}

obj.fun();          //fun为对象属性，指向自身对象 ，输出对象 obj
window.obj.fun();   // fun为对象属性，指向自身对象 ，输出对象 obj

var c = obj.fun;
c();             //重新定义了变量引用，c变成window的属性了； 输出 window
window.c();      // 输出 window

构造函数

之前文章有提过，使用new关键词构造对象时，会改变this的指向到当前对象

function Fun(age) {
  this.age = age
  console.log(this);
}

var obj = new Fun(31);  // 输出新创建的对象

箭头函数

箭头函数比较特殊，他是没有this和arguments的。

var obj1 = {
  a: 10,
  b: function() {
    console.log('普通函数：', this)
  }
}

var obj2 = {
  a: 20,
  b: () => {
    console.log('箭头函数：', this)
  }
}

obj1.b();  // 输出 {a:10, b:f} 即 obj1对象
obj2.b();  // 输出 window 对象

箭头函数中引用 this 实际上调用的是定义上一层作用域的 this