你不知道的javascript之this指向的全面解析

this到底是什么

我们在学习js的过程中，相信都会在很多场景遇到this以及使用this，那么this它到底是什么呢？下面给出它的定义。
当一个函数被调用时，会创建一个活动记录（执行上下文）。这个记录会包含函数在哪里被调用（调用栈）、函数的调用方法、传入的参数等信息。this 就是记录的其中一个属性，会在函数执行的过程中用到。

调用位置和调用栈

在理解 this 的绑定过程之前，首先要理解调用位置：调用位置就是函数在代码中被调用的 位置，而不是声明的位置。而调用栈就是：为了到达当前执行位置所调用的所有函数。下面让我们来在代码中体会一下调用位置和调用栈。

function baz() {     
	// 当前调用栈是：baz     
	// 因此，当前调用位置是全局作用域 
    console.log( "baz" );     
    bar(); //  bar 的调用位置 
} 

function bar() {     
	 // 当前调用栈是 baz -> bar    
	 // 因此，当前调用位置在 baz 中 
    console.log( "bar" );     
    foo(); //  foo的调用位置 
} 

function foo() {     
	// 当前调用栈是 baz -> bar -> foo 
	// 因此，当前调用位置在 bar 中  
    console.log( "foo" );      
} 

baz(); //baz 的调用位置

this的四大绑定的规则

这里只考虑非严格模式

默认绑定

即默认情况下，this是绑定到全局作用域的，

观察如下代码：

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

上面代码输出2，因为函数foo调用时应用了 this的默认绑定，this指向全局对象，this.a就是全局作用域中定义的a。

隐式绑定

当函数作为对象的方法调用时，函数（方法）中的this会绑定到当前对象。

观察如下代码：

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

上述代码输出值依然为2，因为此时this绑定到了对象obj上。

隐式绑定会出现这么一个问题：隐式丢失 ，即隐式绑定的函数会丢失绑定对象，也就是它会应用默认绑定，从而把 this 绑定到全局对象。

观察如下代码：

var obj = {      
	a: 2,     
	foo: function() {
		console.log(this.a); 
	}
}; 
 
var bar = obj.foo; // 函数别名！   
var a = "global"; // a 是全局对象的属性 
 
bar(); 

上述代码的输出值是global而不是2。虽然 bar 是 obj.foo 的一个引用，但是实际上，它引用的是 foo 函数本身，因此此时的 bar() 其实是一个不带任何修饰的函数调用，因此应用了默认绑定。

显式绑定

显示绑定就是使用函数的 call) 或者 apply() 来指定this绑定的对象。

观察如下代码：

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

上述的代码输出值为2，因为通过foo.call(obj)，我们可以在调用 foo 时强制把它的 this 绑定到 obj 上。那么此时上述代码就相当于隐式绑定例子中的第一段代码。

new 绑定

观察如下代码：

function foo(a) {      
	this.a = a; 
}  

var bar = new foo(2); 
console.log( bar.a ); 

使用 new 来调用 foo 时，我们会构造一个新对象bar并把它绑定到 foo调用中的 this ，那么bar.a就是this.a，所以上述代码的输出值为2.

this绑定的优先级

现在我们已经了解了函数调用中 this 绑定的四条规则，我们需要做的就是找到函数的调用位置并判断应当应用哪条规则。但是，如果某个调用位置可以应用多条规则该怎么办？这时候就要考虑哪条规则的优先级最高了。

首先给出结论，优先级从高到低依次为：new绑定>显式绑定>隐式绑定>默认绑定。显然，默认绑定是优先级最低的，这是毋庸置疑的，下面我们通过代码来分析一下其它三个规则的优先级。

显式绑定和隐式绑定的优先级，观察如下代码：

var obj1 = {      
	a: 2,     
	foo: function() {
		console.log( this.a ); 
	}
}; 
 
var obj2 = {      
	a: 3,     
	foo: function() {
		console.log( this.a ); 
	} 
}; 
 
obj1.foo(); // 2  
obj2.foo(); // 3 
 
obj1.foo.call( obj2 ); // 3  
obj2.foo.call( obj1 ); // 2

由上述结果可以看出显式绑定优先级更高，也就是说在判断时应当先考虑是否可以应用显式绑定。

接下来分析new绑定和隐式绑定的优先级，观察如下代码：

function foo(something) {      
	this.a = something; 
} 
var obj1 = {      
	foo: foo 
}; 
var obj2 = {}; 
 
obj1.foo( 2 );  
console.log( obj1.a ); // 2 
 
obj1.foo.call( obj2, 3 );  
console.log( obj2.a ); // 3 
 
var bar = new obj1.foo( 4 );  
console.log( obj1.a ); // 2  
console.log( bar.a ); // 4

观察最后两行代码的输出可以知道 new 绑定比隐式绑定优先级高。

最后再来分析下new 绑定和显式绑定的优先级

function foo(something) {      
	this.a = something; 
} 
 
var obj1 = {}; 
 
var bar = foo.bind( obj1 );  
bar( 2 ); 
console.log( obj1.a ); // 2 
 
var baz = new bar(3);  
console.log( obj1.a ); // 2  
console.log( baz.a ); // 3

观察上述代码，bar 被bind函数绑定到 obj1 上，但是 new bar(3) 并没有像我们预计的那样把 obj1.a 修改为 3。这里this绑定的是新建的对象baz，也就是说，当使用new时，this的指向总会被修改为新建的对象，所以new绑定的优先级比显式绑定的优先级更高。