Javascript学习/ this 指向学习

最近重学this，找了很多资料，最后参考了王红元老师的公众号的文章，有了一下总结，别碰
1.普通函数：this在全局作用域下默认window

function aaa() {
 console.log(this)//window
}

2.隐式绑定：是它的调用位置中，是通过某个对象发起的函数调用。
前提条件：
必须在调用的对象内部有一个对函数的引用（比如一个属性）；
如果没有这样的引用，在进行调用时，会报找不到该函数的错误；
正是通过这个引用，间接的将this绑定到了这个对象上；

function foo() {
console.log(this); // obj对象
}
var obj = {
 name: "why",
 foo: foo
}
obj.foo();

2.显示绑定
JavaScript所有的函数都可以使用call和apply方法（这个和Prototype有关）。
区别，第一个参数是相同的，后面的参数，apply为数组，call为参数列表；
这两个函数的第一个参数都要求是一个对象，这个对象的作用是什么呢？就是给this准备的。
在调用这个函数时，会将this绑定到这个传入的对象上。
2.1 通过call或者apply绑定this对象
显示绑定后，this就会明确的指向绑定的对象

function foo() {
 console.log(this);
}
foo.call(window); // window
foo.call({name: "why"}); // {name: "why"}
foo.call(123); // Number对象,存放时123

2.2 bind函数
如果我们希望一个函数总是显示的绑定到一个对象上，可以怎么做呢？
方案一：自己手写一个辅助函数（了解）
我们手动写了一个bind的辅助函数
这个辅助函数的目的是在执行foo时，总是让它的this绑定到obj对象上

 function foo() {
 console.log(this);
}
var obj = {
 name: "why"
}
function bind(func, obj) {
 return function() {
 return func.apply(obj, arguments);
  }
}
var bar = bind(foo, obj);
bar(); // obj对象
bar(); // obj对象
bar(); // obj对象

方案二：使用Function.prototype.bind

 function foo() {
 console.log(this);
}
var obj = {
 name: "why"
}
var bar = foo.bind(obj);
bar(); // obj对象
bar(); // obj对象
bar(); // obj对象

2.3 内置函数
有些时候，我们会调用一些JavaScript的内置函数，或者一些第三方库中的内置函数。
这些内置函数会要求我们传入另外一个函数；
我们自己并不会显示的调用这些函数，而且JavaScript内部或者第三方库内部会帮助我们执行；
这些函数中的this又是如何绑定的呢？
案例一：setTimeout

setTimeout中会传入一个函数，这个函数中的this通常是window
setTimeout(function() {
  console.log(this); // window
}, 1000);

为什么这里是window呢？
这个和setTimeout源码的内部调用有关；
setTimeout内部是通过apply进行绑定的this对象，并且绑定的是全局对象；
案例二：数组的forEach
数组有一个高阶函数forEach，用于函数的遍历：
在forEach中传入的函数打印的也是Window对象；
这是因为默认情况下传入的函数是自动调用函数（默认绑定）；

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);

2.4. new绑定
vaScript中的函数可以当做一个类的构造函数来使用，也就是使用new关键字。
使用new关键字来调用函数时，会执行如下的操作：
1.创建一个全新的对象；
2.这个新对象会被执行Prototype连接；
3.这个新对象会绑定到函数调用的this上（this的绑定在这个步骤完成）；
4.如果函数没有返回其他对象，表达式会返回这个新对象；
// 创建Person

function Person(name) {
  console.log(this); // Person {}
  this.name = name; // Person {name: "why"}
}

var p = new Person("why");
console.log(p);

2.5 规则优先级
new绑定 > 显示绑定（bind）> 隐式绑定 > 默认绑定
3. 忽略显示绑定
如果在显示绑定中，我们传入一个null或者undefined，那么这个显示绑定会被忽略，使用默认规则：

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

var obj = {
  name: "why"
}

foo.call(obj); // obj对象
foo.call(null); // window
foo.call(undefined); // window

var bar = foo.bind(null);
bar(); // window

3.1 间接函数引用
另外一种情况，创建一个函数的 间接引用，这种情况使用默认绑定规则。
我们先来看下面的案例结果是什么？
(num2 = num1)的结果是num1的值；

var num1 = 100;
var num2 = 0;
var result = (num2 = num1);
console.log(result); // 100

我们来下面的函数赋值结果：
赋值(obj2.foo = obj1.foo)的结果是foo函数；
foo函数被直接调用，那么是默认绑定；

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

var obj1 = {
  name: "obj1",
  foo: foo
}; 

var obj2 = {
  name: "obj2"
}

obj1.foo(); // obj1对象
(obj2.foo = obj1.foo)();  // window

4.箭头函数：箭头函数是根据外层作用域来决定的

var obj = {
  data: [],
  getData: () => {
    setTimeout(() => {
      console.log(this); // window
    }, 1000);
  }
}

obj.getData();