JavaScript函数中this的4种绑定策略

今天，我们进行对this知识点的复习，每一次都是温故知新的过程。

这次对于this的学习是基于《你所不知道的JavaScript》这本书，算是对于书中的知识做一个总结。

如果你有兴趣，也可以通过下面的连接精选购买此书，也算是对我和对作者的一种支持，在此，非常感谢。

首先，要明确的是一般情况下，this不是函数被定义时绑定，而是函数被调用时被绑定  

那么函数中的this有四种绑定方式：

1、默认绑定

直接调用函数，使用不带任何修饰的函数进行调用，只能使用默认绑定，无法应用其它规则，代码如下：

function foo() {
  console.log(this.a);
}
var a = 1;
foo() // 1      

2、隐式绑定

函数被调用时有上下文对象，那么this会绑定这个上下文对象，代码如下：

function foo() {
  console.log(this.a);
}
var obj = {
  a: 2,
  foo: foo
}
var a = 1;
obj.foo() // 2      

其实不能讲foo这个函数属于obj对象，但是foo函数被调用时的落脚点的确是指向obj对象，当函数引用有上下文对象时，隐式绑定就会把函数调用中的this绑定到这个上下文对象；

对象属性引用链中只有最顶层或者说最后一层会影响调用位置。​

var foo = function () {
  console.log(this.a)
}
var obj2 = {
  a: 2
  foo: foo
}
var obj1 = {
  a: 1
  obj2: obj2
}
obj1.obj2.foo() // 2      

隐式丢失​

对于应用隐式绑定方式绑定this经常导致的一个情况是隐式丢失this​

function foo() {
  console.log(this.a);
}
var obj = {
  a: 2,
  foo: foo
}
var bar = obj.foo;
var a = 'global';
bar() // 'global'      

针对这种情况，虽然bar是obj.foo的一个引用，但是实际上它引用的是foo函数本身，此时bar（）其实是一个不带任何修饰的函数调用，应用了默认绑定；

3、硬绑定

使用call，apply或者bind，在调用函数的时候直接指定上下文对象，那么函数中的this会绑定到传入的对象，代码如下：

function foo() {
  console.log(this.a);
}
var obj = {
  a: 1
}
foo.apply(obj) // 1      

4、new绑定

使用new调用某个构造函数，代码如下：

function Foo(a) {
  this.a = a;
  console.log(this.a);
}
var obj = new Foo(2);
console.log(obj.a) // 2      

​