JavaScript this绑定过程深入详解

本文实例形式详细分析了JavaScript 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 的绑定。

你可以把调用栈想象成一个函数调用链，就像我们在前面代码段的注释中所写的一样。但是这种方法非常麻烦并且容易出错。另一个查看调用栈的方法是使用浏览器的调试工具。绝大多数现代桌面浏览器都内置了开发者工具，其中包含JavaScript 调试器。就本例来说，你可以在工具中给foo() 函数的第一行代码设置一个断点，或者直接在第一行代码之前插入一条debugger;语句。运行代码时，调试器会在那个位置暂停，同时会展示当前位置的函数调用列表，这就是你的调用栈。因此，如果你想要分析this 的绑定，使用开发者工具得到调用栈，然后找到栈中第二个元素，这就是真正的调用位置。

绑定规则

我们来看看在函数的执行过程中调用位置如何决定this 的绑定对象。你必须找到调用位置，然后判断需要应用下面四条规则中的哪一条。

1.默认绑定

首先要介绍的是最常用的函数调用类型：独立函数调用。可以把这条规则看作是无法应用其他规则时的默认规则。

思考一下下面的代码：

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

你应该注意到的第一件事是，声明在全局作用域中的变量（比如var a = 2）就是全局对象的一个同名属性。它们本质上就是同一个东西，并不是通过复制得到的，就像一个硬币的两面一样。

接下来我们可以看到当调用foo() 时，