学习this关键字(二)

在上篇文章我们明白了函数的 this 是在调用时被绑定的，完全取决于函数的调用位置。这一篇我们来深入学习 this 。

函数的调用位置

在理解 this 的绑定过程之前，首先要理解调用位置:调用位置就是函数在代码中被调用的位置(而不是声明的位置)。

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

使用 Chrome 控制台，也能很方便的看出调用栈，如图：

this的绑定规则

接下来我们来看看在函数的执行过程中调用位置如何决定 this 的绑定对象。

默认绑定

我们最常用的函数调用，可以把这条规则看作是无法应用其他规则时的默认规则。

思考下面一段代码：

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

声明在全局作用域中的变量 a 就是全局对象的一个属性。当调用 foo() 函数时， this.a 被解析成了全局变量 a 。函数调用时应用了 this 的默认绑定，因此 this 指向全局对象。

那么我们怎么知道这里应用了默认绑定呢?可以通过分析调用位置来看看 foo() 是如何调用的。在代码中， foo() 是直接使用不带任何修饰的函数引用进行调用的，因此只能使用默认绑定，无法应用其他规则。

如果使用严格模式，那么全局对象将无法使用默认绑定，因此 this 会绑定到 undefined ：

function foo() { 
    "use strict";
    console.log( this.a );
}
var a = 1;
foo(); //Uncaught TypeError: Cannot read property 'a' of undefined

隐式绑定

函数调用位置是否有上下文对象。

思考下面一段代码：

function foo() { 
    console.log(this.name);
}
var obj = { 
    name: 'tom',
    foo: foo 
};
obj.foo(); // tom

这里 foo() 函数的调用是通过一个对象 obj 的属性来实现，调用位置会使用 obj 上下文来引用函数，因此你可以说函数调用时 obj 对象“包含”它。

当 foo() 被调用时，函数确实指向 obj 对象。当函数引用有上下文对象时，隐式绑定规则会把函数调用中的 this 绑定到这个上下文对象。因为调用 foo() 时 this 被绑定到 obj ，因此 this.name 和 obj.name 是一样的。

隐式丢失

一个最常见的 this 绑定问题就是被隐式绑定的函数会丢失绑定对象，也就是说它会应用默认绑定，从而把 this 绑定到全局对象或者 undefined 上，取决于是否是严格模式。

思考下面一段代码：

function foo() { 
    console.log(this.name);
}
var obj = { 
    name: 'tom',
    foo: foo 
};
var bar = obj.foo;
var name = 'cat';
bar(); // cat

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

在看另一个微妙的例子：

function foo() { 
    console.log(this.name);
}

function handleFoo(fn){
    fn();
}

var obj = { 
    name: 'tom',
    foo: foo 
};
var name = 'cat';
handleFoo(obj.foo); // cat

参数传递其实就是一种隐式赋值，因此我们传入函数时也会被隐式赋值，所以结果和上一个例子一样。

还有值得注意的是，系统内置的函数也会丢失 this 绑定，例如：

function foo() { 
    console.log(this.name);
}

var obj = { 
    name: 'tom',
    foo: foo 
};
var name = 'cat';
setTimeout(obj.foo, 100);  //cat

回调函数丢失 this 绑定是非常常见的。除了系统内置的函数外， jquery 中的回调就是其中之一，等等其他第三方库也都有此现象。

显示绑定

Javascript 提供的绝大多数函数以及你自己创建的所有函数都可以使用 call(..) 和 apply(..) 方法。

思考下面一段代码：

function foo(){
  console.log(this.name);  
};
var obj = {
    name:'cat'
};
foo.call(obj);  //cat

通过 foo.call() ，我们可以在调用 foo 函数时强制把它的 this 绑定到 obj 上。

硬绑定

思考下面一段代码：

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

我们创建了一个中间函数 bar ，并在它的内部手动调用了 foo.call(obj) ，因此强制把 foo 的 this 绑定到了 obj 。无论之后如何调用函数 bar ，它总会手动在 obj 上调用 foo 。这种绑定是一种显式的强制绑定，因此我们称之为硬绑定。

硬绑定的一个经典应用：

function foo(){
    console.log(this.name);
}
var obj = {
    name:'cat'
}
function bind(fn,obj){
    return function (){
        return fn.apply(obj,arguments);
    }
}
var bar = bind(foo,obj);
bar(); //cat

由于硬绑定是一种非常常用的模式，所以在 ES5 中提供了内置的方法 Function.prototype.bind ，它的用法如下：

function foo(){
    console.log(this.name);
}
var obj = {
    name:'cat'
}
var bar = foo.bind(obj);
bar(); //cat

API调用的“上下文”

第三方库的许多函数，以及 Javascript 语言和宿主环境中许多新的内置函数，都提供了一个可选的参数，通常被称为“上下文”，其作用和 bind(..) 一样，确保你的回调函数使用指定的 this 。

例如下面代码：

function foo(index){
    console.log(index, this.name);
}
var obj = {
    name:'cat'
}
var arr = [1, 2, 3];
arr.forEach(foo, obj);

这些函数实际上就是通过 call(..) 或者 apply(..) 实现了显式绑定，这样你可以少些一些代码。

new绑定

Javascript 也有一个 new 操作符，使用方法看起来也和那些面向类的语言一样，然而， Javascript 中 new 的机制实际上和面向类的语言完全不同。在 Javascript 中，构造函数只是一些使用 new 操作符时被调用的函数。

使用 new 来调用函数，或者说发生构造函数调用时，会自动执行下面的操作。(这里简单说明一下，以后会有专门的章节介绍)

this
new

示例代码：

function foo(name){
    this.name = name;
}
var bar = new foo('cat');
console.log(bar.name);  //cat

使用 new 来调用 foo(..) 时，我们会构造一个新对象并把它绑定到 foo(..) 调用中的 this 上。 new 是最后一种可以影响函数调用时 this 绑定行为的方法，我们称之为 new 绑定。

this优先级

现在我们已经了解了函数调用中 this 绑定的四条规则，我们需要做的就是找到函数的调用位置并判断应当应用哪条规则。

默认绑定的优先级是四条规则中最低的。

• 隐式绑定和显式绑定哪个优先级更高?我们来测试一下：

function foo(){
    console.log(this.name);
};

var obj1 = {
    a: 'tom',
    foo: foo 
};

var obj2 = { 
    a: 'cat',
    foo: foo 
};

obj1.foo(); // tom
obj2.foo(); // cat

obj1.foo().call(obj2); //cat
obj2.foo().call(obj1); //tom

可以看到，显式绑定优先级更高。

• 隐式绑定和 new 绑定哪个优先级更高?我们来测试一下：

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

var obj = {
    foo:foo
};

obj.foo('tom');
console.log(obj.name); //tom
var bar = new obj.foo('cat');
console.log(bar.name); //cat

可以看到， new 绑定优先级高。

• new 绑定和显式绑定哪个优先级更高?我们来测试一下：

new 和 call/apply 无法一起使用因此无法通过 new foo.call(obj1) 来直接进行测试，但是我们可以间接的测试。

function foo(name){
    this.name = name;
};
var obj = {};
var bar = foo.bind(obj);
bar('tom');
console.log(obj.name); //tom
var baz = new bar('cat');
console.log(obj.name); //tom
console.log(baz.name); //cat

bar 函数被硬绑定到 obj 对象上，但 new bar('cat') 并没有像我们预计的那样把 obj.name 修改为 cat 。相反 new 修改了硬绑定 bar 函数调用中的 this 。 new 绑定生成了一个新对象 baz ， bar.name 的值为 cat 。

判断this

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

   var bar = new foo()

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

   var bar = foo.call(obj)

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

   var bar = obj.foo()

4. 如果都不是的话，使用默认绑定。如果在严格模式下，就绑定到 undefined ，否则绑定到全局对象。

   var bar = foo()

绑定的例外

被忽略的this

如果你把 null 或者 undefined 作为 this 的绑定对象传入 call、apply 或者 bind ，这些值在调用时会被忽略，实际应用的是默认绑定规则：

function foo(){
    console.log(this.name);
}

var name = 'tom';

foo.call(null); //tom

间接引用

另一个需要注意的是，有可能创建一个函数的“间接引用”，在这种情况下，调用这个函数会应用默认绑定规则：

function foo(){
    console.log(this.name);
}
var name = 'tom';
var obj = {
    name:'cat',
    foo:foo
}
obj.foo();  //cat
var baz = obj.foo;
baz();      //tom

总结

如果要判断一个运行中函数的 this 绑定，就需要找到这个函数的调用位置。找到之后就可以顺序应用下面这四条规则来判断 this 的绑定对象。

1. 由 new 调用？绑定到新创建的对象。
2. 由 call 、 apply (或者 bind )调用?绑定到指定的对象。
3. 由上下文对象调用？绑定到那个上下文对象。
4. 默认：在严格模式下绑定到 undefined ，否则绑定到全局对象。