你一定疑惑JavaScript中的this绑定的究竟是什么？😵‍💫

想要了解this的绑定过程，首先要理解调用方式。

调用方式

调用方式被描述为函数被触发执行时语法形式。

主要有以下几种基本模式：

第五点可能很多人没有见过，其实这是应用了逗号操作符，(0,f1)()其实等同于f1(),但它有什么区别呢？我放在显式绑定的最后来阐述吧。

有的人会用调用位置来解释this的绑定，但我感觉那个不太好用，可能是我没理解到位吧，如果有人知道怎么用它来解释this的绑定，希望能告诉我。总之，我们先用调用方式来解释this的绑定吧。

四种绑定规则

接下来介绍四种绑定规则。

默认绑定

首先要介绍的是默认绑定，当使用了最常用的函数调用类型：直接调用（独立函数调用） 时，便应用默认绑定。可以把这条规则看作是无法应用其他规则时的默认规则。

在默认绑定时，this绑定的是全局作用域。

var a = 0;
function f1(){
var a = 1;
console.log(this.a); //输出为0

}
f1(); //直接调用，应用默认绑定

多个函数内部层层调用也是一样的。

var a = 0;
function f1(){
var a = 1;
f2();

}
function f2(){
var a = 2;
console.log(this.a); //输出的是0

}
f1(); 

隐式绑定

当函数被当作对象的属性被调用时（例如通过obj.f1()的形式），this会自动绑定到该对象上，这个绑定是隐式发生的，不需要显式使用call、apply或bind。

var a = 0;
function f1() {
var a = 1;
console.log(this.a); //this绑定的是f2这个对象字面量

}
var obj = {

    a : 2,

    f1 : f1

// 也可以直接在obj内部定义f1
// function f1() {
//     var a = 1;
// }


};

obj.f1(); // 输出为2

对象层层引用只有最后一个对象会影响this的绑定

var a = 0;
function f1() {
var a = 1;
console.log(this.a); //最后输出为2

}
var obj1 = {

    a : 2,

    f1 : f1

};
var obj2 = {

    a : 3,

    obj1 : obj1

}

obj2.obj1.f1();

可以发现这里有两个对象一个是obj1，一个是obj2，obj2中的属性为obj1。先通过ob2.obj1调用obj1，再通过ob2.obj1.f1()调用f1函数，可以发现对象属性引用链中的最后一个对象为this所绑定的对象

隐性丢失

但隐式绑定可能会导致this丢失所绑定的对象，也就是会应用默认绑定（this绑定到全局作用域） 造成隐性丢失主要有两个方面，一个是给函数取别名，一个是回调函数。

• 函数取别名

var a = 0;
function f1() {
var a = 1;
console.log(this.a); //最后输出为0

}
var obj = {

    a : 2,

    f1 : f1

}
var fOne = obj.f1; // 给f1取了一个fOne的别名
fOne();

虽然函数fOne是obj.f1的一个引用，但实际上，它引用的是f1函数本身，因此它执行的就是f1()。所以会使用默认绑定。

• 回调函数

var a = 0;
// f1为回调函数，将obj.f2作为参数传递给f1
function f1(f2) {
var a = 1;
f2();

}
function f2() {
var a = 2;
console.log(this.a); //结果为0

}
var obj = {

    a : 3,

    f2 : f2

}
f1(obj.f2);

原因很简单，f1(obj.f2)把obj.f2赋值给了function f1(f2) {...}中的f2（形参），就像上面讲的函数取了一个别名一样，实际执行的就是直接调用，所以应用默认绑定。

显式绑定

显式绑定很好理解，显式绑定让我们可以自定义this的绑定。我们通过使用函数的apply、call或bind方法，让我们可以自定义this的绑定。

var a = 0;
function f1 () {
var a = 1;
console.log(this.a);

}
//apply方法绑定this   apply(对象，参数数组)

f1.apply({a:2});  //输出2

//call方法绑定this   call(对象，参数1，参数2，...)

f1.call({a:3}); //输出3

//bind方法绑定this   bind(对象,参数1，参数2，...),bind会返回一个函数，需要调用

boundf1 = f1.bind({a:4});
boundf1(); //输出4

但用apply、call来进行显示绑定并不能避免隐性丢失的问题。下面有两个方法来解决这个问题。

1.硬绑定

var a = 0;
function f1() {
var a = 1;
console.log(this.a);

}
var bar = function() { 
return f1.apply({a:2});

};
setTimeout(bar, 1000);//输出为2

让我们来分析分析这个代码。我们创建了函数bar，这个函数负责返回绑定好this的f1函数，并立即执行它。 这种绑定我们称之为硬绑定。

这种绑定方法会使用在一个i可以重复使用的辅助函数 例如

var a = 0;
function f1() {
var a = 1;
console.log(this.a); 

}

function bind(fn, obj) {
return function () {
return fn.apply(obj, arguments);

    };

}

var bar = bind(f1,{a:2});
bar();

可以很明显发现这和我们js自带的函数bind方法很像。是的，在ES5中提供了内置的方法Function.prototype.bind。它的用法我再提一次吧。

var a = 0;
function f1 () {
var a = 1;
console.log(this.a);

}
//bind方法绑定this   
//bind(对象,参数1，参数2，...),bind会返回一个函数，需要调用

boundf1 = f1.bind({a:2});
boundf1(); //输出2

2.API调用的“上下文”

第三方库的许多函数，以及JavaScript语言和宿主环境中许多内置函数，都提供了一个可选参数，通常被称为“上下文”，其作用和bind方法一样，都是为了防止隐性丢失。

现在来举个例子吧。

function f1(el) {
console.log(el, this.id);

}
var obj = {

    id : "awesome"

};

[1,2,3].forEach(f1,obj);
//最后输出的结果为
// 1 'awesome'
// 2 'awesome'
// 3 'awesome'

逗号操作符

在文章开头我们提到了这样一种表达式(0,f1)()，这是逗号操作符的应用，逗号操作符会依次计算所有的表达式，然后返回最后一个表达式的值。这里(0,f1)会先计算0（无实际意义），然后再返回f1,所以最后为f1()。

理解了逗号操作符的使用，那如果我们把f1改为obj.f1呢，即(0,obj.f1)()，这时f1中的this绑定的是谁呢？

直接说结论，绑定的是全局对象。(0,obj.f1)()先计算0，然后返回obj.f1即f1函数本身，所以它返回的是一个解绑this的函数,其相当于f1.call(window)——window是全局对象。

下面我们来验证一下吧。

var a = 0;
function f1() {
var a = 1;
console.log(this.a);

}
var obj = {

    a : 2,

    f1 : f1

};

(0,obj.f1)(); //输出0

完全正确哈哈，注意这种方式不算作隐性丢失哦。

• 这个操作只是调用了 obj.f1，并没有阻止垃圾回收（GC）。
• 如果 obj 或 f1 没有其他引用，它们仍然会被正常回收。

如果对其具体的工作流程感兴趣，可以去网上再找些资料。本篇就不讲太详细了。

new 绑定

这是this绑定的最后一条规则。

new绑定通常的形式为：... = new MyClass(参数1,参数2,...)

JavaScript中的new操作符的机制和那些面向类的语言的new操作符有些不一样，因为JavaScript是基于原型的语言（这个也许以后我会谈谈哈哈）。在JavaScript中，“构造函数”仅仅只是你使用new操作符时被调用的函数。

使用new来调用函数，会自动执行以下操作。

我们现在重点要关注的是第三点。

function f1(a){
this.a = a;

}
var bar = new f1(2);
console.log(bar.a); //输出为2
console.log(f1.a); //输出为undefined

这段代码就可以很明显的看出来new会创建一个新对象bar，并把this绑定到这个bar上，所以才会在bar上创建a这个属性。而原来的f1上则没有a这个属性，所以是undefined。

四条规则的优先级

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

} 
var obj1 = {  

a: 2, 

foo: foo 

}; 
var obj2 = {  

a: 3, 

foo: foo  

}; 

obj1.foo(); // 2  

obj2.foo(); // 3 

obj1.foo.call( obj2 ); // 3  

obj2.foo.call( obj1 ); // 2

稍微分析一下吧，obj1.foo()和obj2.foo()为隐式调用，this分别绑定的为obj1，obj2，所以会打印2，3。接着我们调用了obj1.foo.call(obj2)发现结果输出为obj2中的a属性2，所以这里应用的是显式绑定。

所以显式绑定的优先级是高于隐式绑定的。

2. 再来看看new绑定和隐式绑定的优先级谁更高吧。

1. 函数是否在new中调用（new绑定）？如果是的话this绑定的是新创建的对象。

    var bar = new foo()  //这里bar为this绑定的对象
   

2. 函数是否通过call、apply（显式绑定）或者硬绑定（bind）调用?如果是的话，this绑定的是指定的对象。

    var bar = foo.call(obj)  //这里obj为this绑定的对象
   

3. 函数是否在某个上下文对象中调用（隐式绑定）如果是的话，this绑定的是那个上下文对象。

    var bar = obj.foo()  //这里obj为this绑定的对象
   

4. 如果都不是，则应用默认绑定，this绑定到全局对象上。

    var bar = foo()   //this绑定的为全局对象