普通函数的this指向
简单说说
首先，按照惯例，我们先举个栗子：
var bar = 2;
function foo() {
this.bar = 1;
this.getBar = function() {
console.log(this.bar);
}
}
var test = new foo();
var getBar = test.getBar;
test.getBar(); //1
getBar(); //2
通过这个例子我们就能看到，虽然是同一个函数，但是实际上得到的结果却不一样。这个原因相信大家都能知道。不知道的也告诉你：this其实是指向调用该函数的那个对象。那么当我们在全局环境中调用的时候，this自然就指向了全局环境。
那么到是有个问题：this为什么会随调用者变化而变化？
这可能需要你继续往下看看
深入说说
那么如果说深层次的理解this的指向，我觉得大概可以从数据类型讲起
我们都知道，栈中存放的是基本数据类型，也就是String、Number、Boolean、Symbol、Null、Undefined这七种数据类型，当然Symbol是ES6新增的一个数据类型。那么堆中存放的就是一些引用类型了，如Obejct、Function。实际上当我们定义一个引用类型的时候，js会同时定义一个地址指针指向内存中的对象。
例如：当我们声明一个字面量对象时候let a = {num:1};实际上a中存放的是指向{num:1}的地址
现在我们解析一下上面那段代码是如何执行的
// 在全局环境下定义一个变量bar
var bar = 2;
function foo() {
//在foo中也声明了一个bar
this.bar = 1;
//在foo中声明一个getBar函数
this.getBar = function() {
console.log(this.bar);
}
}
//构造函数模式自定义对象，将foo的this赋予test
var test = new foo();
//将test中的getBar方法赋予getBar
var getBar = test.getBar;
//调用test中的getBar
test.getBar(); //1
//调用getBar
getBar(); //2
现在列出来一看，放佛恍然大悟，终于知道为啥输出的是不同的结果了。那么我这里倒是有几个问题
- 为什么调用同一个函数却有不同的结果？
- foo中的this是指向foo的，为什么foo中的函数可以取得外部的this？
- 为什么this会随调用它的对象变化而变化？
ok，其实要弄清楚上述问题，我们需要明白一点，函数也是个引用类型。那么我们上面讲过，创建引用类型的时候会同时创建一个地址指针。那么我们就可以这样理解上面的foo对象
实际上foo中的getBar只是存放了一个函数的地址而已*。那么这个函数并不是foo所私有。什么东西是foo的呢？一个值为1的bar和一个指向function() {console.log(this.bar);}函数的getBar而已。
这样我们就不难理解，为什么调用同一个函数会有不一样的结果了，因为这个函数并不是foo所私有。好比内存就是深圳，函数就只是深圳的一套房。getBar就是这套房的钥匙。那么一开始foo这个人建好了这房子，就他有这房子的钥匙，那么当然只有他能进出该房子，后来有一天他把钥匙多配了一把给了window这好朋友。于是乎window也能进这套房了。给window配钥匙的过程：var getBar = test.getBar;这里只是将该函数的地址赋给全局下的getBar而已，房子也只是一套房子，函数还是一个函数。
由于函数可以在不同的运行环境执行，所以需要有一种机制，能够在函数体内部获得当前的运行环境（context）。所以，this就出现了，它的设计目的就是在函数体内部，指代函数当前的运行环境。
所以当window调用这个函数的时候，this就不是指向foo了。而是指向window。this是指向他们自己。window的衣服不会在进了foo的房子以后就变成foo的衣服。
ok，我们现在再把刚刚的代码重新注释一下
// 在全局环境下定义一个变量bar
var bar = 2;
function foo() {
//在foo中也声明了一个bar
this.bar = 1;
//在foo中声明一个getBar函数，getBar存放该函数的地址
this.getBar = function() {
console.log(this.bar);
}
}
//构造函数模式自定义对象，将foo的this赋予test
var test = new foo();
//将test中的getBar方法的地址赋予全局的getBar
var getBar = test.getBar;
//调用test中的getBar函数
test.getBar(); //1
//调用getBar函数
getBar(); //2
于是乎我们就把普通的this指向弄明白了。顺便还明白了堆栈的区别。接下来看看不普通的函数this指向是如何的
箭头函数this指向
箭头函数内没有this，箭头函数的this是父级函数的this
// 在全局环境下定义一个变量bar
var bar = 2;
function foo() {
//在foo中也声明了一个bar
this.bar = 1;
//在foo中定义一个箭头函数，getBar存放该函数的地址
this.getBar = () => {
console.log(this.bar);
}
}
//构造函数模式自定义对象，将foo的this赋予test
var test = new foo();
//将test中的getBar方法的地址赋予全局的getBar
var getBar = test.getBar;
//调用test中的getBar函数
test.getBar(); //1
//调用getBar函数
getBar(); //1
如果定义了箭头函数的情况下，this执行就不会随意的改变了。普通函数的this是会跟随调用者变化，但是箭头函数就很特别，他只会继承父级的this，而且一旦建立就不会改变了。所以在这里我们就可以看见，尽管全局下面调用getBar，但是实际上还是取到了foo的this。
因此箭头函数不可以用来当作构造函数。因为它本身是没有this的！
所以箭头函数使用的话需要与普通函数区别开这点，它的this指向定义函数时候的父级。
后话
关于this就介绍到这里，如果有什么不懂的欢迎随时提问，我会随时回答大家的问题。
那么最后，成功不在一朝一夕，我们都需要努力
