JavaScript深入理解this关键字(二) JavaScript深入理解this关键字(二

摘要

上一篇文章中，引入了为什么使用this,以及this中常见的误区和解决方案。接下来我就关于this的使用以及规则说一下，希望对读友有帮助。

1 调用位置在理解this的使用之前，先了解一个调用位置:函数在代码中调用的位置，这有助于我们理解this是指向谁。例子

function baz() { console.log('baz'); bar(); } function bar() { console.log('bar'); foo(); } function foo() { console.log('foo'); debugger; } baz();

以上代码在浏览器中执行，我们可以通过浏览器的调试工具查看函数的调用顺序与this指向谁。这里效果图就不截取了。接下来就是this的规则。
2 绑定规则 2.2.1 默认规则首先看一下代码来自《你不知道的JavaScript》中。

function foo() { console.log(this); console.log(this.a); } var a = 'hello'; foo(); //this->window,this.a->hello

预期结果就是输出window，hello。函数在自身调用的时候，其this指向的是全局对象window，这样被称之为默认规则。但这条默认规则，在严格模式下又是不可取的，如下代码

function foo() { "use strict"; console.log(this); console.log(this.a); } var a = 'hello'; foo(); //this->undefined,this.a->获取不到 undefined

在严格模式下的函数中，函数在自身调用的时候，this的指向为undefined。
但是，还有另外一种情况就是在严格模式下调用，依然会使用默认规则代码如下

function foo() { console.log(this); console.log(this.a); } var a = 'hello'; (function () { 'use strict'; foo(); //this->window,this.a->hello })();

2.2.2 隐式绑定在隐式绑定中，可以理解为谁调用这个函数，this就指向谁。话不多说直接上代码

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

通过代码来看其实一点不难理解,obj调用了这个函数，自然的this就指向了obj这个对象。其实换句话说就是谁直接调用这个函数，this就指向谁。在上代码

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

这段代码中，最终直接调用foo的是obj2，那么this.a就会获取obj2的a的值。
在隐式绑定中，会出现一个问题，就是this绑定丢失的问题。上代码

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

我们预期的运行结果是this.a=2；但是实际结果是oops,global; 在代码中虽然我们用bar引用了obj.foo这个属性，但实际上是引用了foo这个函数。因此最后调用bar()和调用foo()是一个道理,最后this指向了window。应用了默认绑定在非严格模式下的规则。
2.2.3 显式绑定在隐式绑定中，我们是通过让函数绑定到对象中的某个属性来实现this的指向，这个容易造成this指向的丢失。为了解决这个问题，我们通过显式绑定的方式解决。在JavaScript中的函数中都有两个方法call与apply可以通过调用者两个方法强制改变this的指向。这种方式我们称之为显式绑定。
实例直接上代码

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

2.2.3.1 硬绑定
在显式绑定中的一种方式就是硬绑定，一旦绑定成功不会受调用他的对象影响。上代码

function foo() { console.log( this.a ); } var obj = { a:2 }; var bar = function () { foo.call(obj); }; bar.call(window); //2 setTimeout(bar,100); //2

在这段代码中，我们看到了foo绑定了obj，让this指向了obj。在调用foo的函数中bar也改变了this的指向。但对于运行的预期结果没有影响。
2.2.3.2 API调用的"上下文"
在第三方库中的许多函数，以及JavaScript和宿主环境中的许多新的内置函数，都提供了一个可选的参数，来指定this。上代码

function foo(el) { console.log(el,this.id); } var obj = { id:"awesome" }; //调用foo(...)时把this绑定到obj [1,2,3].forEach(foo,obj); //1 "awesome"2 "awesome" 3 "awesome"

【JavaScript深入理解this关键字(二)】类似的forEach内置的函数实际上是通过call和apply来实现绑定的。
2.2.4 new 绑定在JavaScript中new操作符合其他语言的new有很大的区别。一个函数通过new 调用的时候，其实并不是真正的类的调用，这里模仿了java中类的调用，可以称之为虚拟类吧。JavaScript的new一次其实进行了很多操作这里就不赘述了。下面直接上代码，看看new是怎么绑定this的