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对象