this指向问题
this的指向问题
在开发过程中，总是会遇到this指向出现问题的情况，只知道如何解决，但是其中的原理一直不是很了解，有点不求甚解了，今天有幸看见一篇关于this文章，受益颇多。做了一下简单的总结。如果想要细致的了解参考：
https://mp.weixin.qq.com/s/hYm0JgBI25grNG_2sCRlTA
this到底是什么？指向什么？
this 是 JavaScript 中的一个关键字。依赖于函数调用的上下文条件，与函数被调用的方式有关。它指向谁，完全是由函数被调用的调用点来决定的。
所以，this，是在运行时绑定的，与编写时的绑定无关。随着函数使用场合的不同，this 的值也会发生变化。但是有一个总的原则：那就是this 总会指向调用函数的那个对象。
第一遍看这个概念，感觉非常的抽象，如果把指向换成代替再去读，可能就好理解很多了，（当然还是以概念为主，这么说仅方便理解）
this绑定规则
绑定规则大致可以分为4类：
- 默认绑定：通常默认绑定时，函数中的this指向全局对象（window）
- 隐式绑定：通过某个对象发起的函数调用，则绑定这个对象
- 显示绑定：通过call或者apply绑定this对象， bind函数绑定
- new绑定：使用new关键字来调用函数
绑定优先级
new绑定 > 显示绑定（bind）> 隐式绑定 > 默认绑定
new绑定和call、apply是不允许同时使用的，所以不存在谁的优先级更高
绑定规则举例：
1.默认绑定
独立函数调用时，是默认绑定的
（独立函数调用：可以理解成函数没有被绑定到某个对象上进行调用）
function foo() {
console.log(this); // window
}
foo();
有的时候要注意分辨函数是否绑定了对象，如以下的例子
function foo(func) {
func()
}
var obj = {
name: "why",
bar: function() {
console.log(this); // window
}
}
foo(obj.bar);
在真正函数调用的位置，并没有进行任何的对象绑定，只是一个独立函数的调用
2.隐式绑定
function foo() {
console.log(this); // obj对象
}
var obj = {
name: "why",
foo: foo
}
obj.foo();
foo的调用位置是obj.foo()方式进行调用的
那么foo调用时this会隐式的被绑定到obj对象上
隐式丢失
隐式绑定也会丢失，要仔细的辨别
function foo() {
console.log(this);
}
var obj1 = {
name: "obj1",
foo: foo
}
// 讲obj1的foo赋值给bar
var bar = obj1.foo;
bar();
结果最终是window，因为foo最终被调用的位置是bar，而bar在进行调用时没有绑定任何的对象，也就没有形成隐式绑定，相当于是一种默认绑定。
3.显示绑定
- JavaScript所有的函数都可以使用call和apply方法（这个和Prototype有关）。
- 其实非常简单，第一个参数是相同的，后面的参数，apply为数组，call为参数列表；
- 这两个函数的第一个参数都要求是一个对象，这个对象的作用是什么呢？就是给this准备的。
- 在调用这个函数时，会将this绑定到这个传入的对象上。
3.1 call、apply
function foo() {
console.log(this);
}
foo.call(window); // window
foo.call({name: "why"}); // {name: "why"}
foo.call(123); // Number对象,存放时123
3.2 bind函数
使用Function.prototype.bind
function foo() {
console.log(this);
}
var obj = {
name: "why"
}
var bar = foo.bind(obj);
bar(); // obj对象
bar(); // obj对象
bar(); // obj对象
3.3 内置函数
setTimeout中会传入一个函数，这个函数中的this通常是window
这个和setTimeout源码的内部调用有关；
setTimeout内部是通过apply进行绑定的this对象，并且绑定的是全局对象；
setTimeout(function() {
console.log(this); // window
}, 1000);
数组有一个高阶函数forEach，用于函数的遍历
var names = ["abc", "cba", "nba"];
names.forEach(function(item) {
console.log(this); // 三次window
});
改变该函数的this指向：
var names = ["abc", "cba", "nba"];
var obj = {name: "why"};
names.forEach(function(item) {
console.log(this); // 三次obj对象
}, obj);
new 绑定
// 创建Person
function Person(name) {
console.log(this); // Person {}
this.name = name; // Person {name: "why"}
}
var p = new Person("why");
console.log(p);
ES6箭头函数（特殊）
箭头函数不使用this的四种标准规则（也就是不绑定this），而是根据外层作用域来决定this。
var obj = {
data: [],
getData: function() {
var _this = this;
setTimeout(function() {
// 模拟获取到的数据
var res = ["abc", "cba", "nba"];
_this.data.push(...res);
}, 1000);
}
}
obj.getData();
这里我使用setTimeout来模拟网络请求，请求到数据后如何可以存放到data中呢？
我们需要拿到obj对象，设置data；
但是直接拿到的this是window，我们需要在外层定义：var _this = this
在setTimeout的回调函数中使用_this就代表了obj对象