学习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来调用函数，或者说发生构造函数调用时，会自动执行下面的操做。(这里简单说明一下，之后会有专门的章节介绍)

1. 建立(或者说构造)一个全新的对象。
2. 这个新对象会被执行[[原型]]链接。
3. 这个新对象会绑定到函数调用的this。
4. 若是函数没有返回其余对象，那么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，不然绑定到全局对象。

参考

• this
• call
• apply
• bind
• 你不知道的JavaScript