首先补一下 this 是什么？

 this 是和执行上下文绑定的，也就是说每个执行上下文中都有一个 this。

箭头函数和普通函数的区别如下：

普通函数：根据调用我的人（谁调用我，我的this就指向谁）

箭头函数：根据所在的环境（我定义在哪个作用域，我的this就指向谁）

1.普通函数 --- this指向函数的调用对象

var name = '不想打代码';

function f() {
    var name = '但没办法啊';
    console.log(this.name); //不想打代码
    console.log(this); //window
}

f();

 2.对象方法中调用 ---- this 指向上级对象

var name = '不想秃头';
var obj = {
    name: "不秃也得秃",
    fn: function() {
        console.log(this.name); //不秃也得秃
    }
}
obj.fn();

【注1】这里要注意一点，就是在对象中可能有多层嵌套的对象，但是this指向的都是他调用地方的上级对象 

var obj = {
    name: "打代码使我快乐？？？",
    b: {
        name: "打代码",
        fn: function() {
            console.log(this.name); // 打代码
        }
    }

}
obj.b.fn();

 如上，虽然是在obj里面this调用，但是因为是在obj.b这个对象中，所以this指向的是 obj.b

【注2】注意不能只看上级对象，更关键的是调用对象

var name = '猪吧！';
var obj = {
    name: "柯基？",
    b: {
        name: "猫吧！",
        fn: function() {
            console.log(this.name); // 猪吧！
        }
    }

}
var f = obj.b.fn;
f()

 如上，this其实是在f执行的时候调用的，这时候，f的this的调用对象是window,那么就可以理解window.name 为 输出的是全局中name变量="猪吧"

【小结】在对象方法中的this的指向主要是看他最终调用的位置，它是由谁调用的，如果调用对象有多层，this指向的是this的上级对象

 3.构造函数 --- this指向new出来的对象

function Fn() {
    this.name = "努力打代码";
}
var a = new Fn();
console.log(a.name); //努力打代码

 new 的过程其实也是初始化了一个新的对象，然后用新的对象调用原先的函数 Fn.call(a) 这个情况跟下面这种情况类似了。

4.apply, call, bind 通过改变函数的调用对象而改变this的指向 

function foo() {
    console.log('name:', this.name); //输出的是我
}

var name = "输出的是谁？";

foo.call({ name: "输出的是我" }); //foo函数的调用对象变成了 { name: "输出的是我" },所以this指向发生了变化

5.箭头函数this的指向 ---- this指向其定义时候的对象 

function foo() {
    var name = 1
    setTimeout(() => {
        console.log('name:', this.name); //输出的是谁？
    }, 0)
}

var name = "输出的是谁？";

foo({ name: "输出的是我" }); 

图1： 箭头函数，this指向定义时候的对象，foo在window作用域下，所以this指向window; ===> 箭头函数的外层，foo函数的this就是window对象