学习this关键字(二)

周大侠zzzzzz
462 阅读8分钟

在上篇文章我们明白了函数的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，否则绑定到全局对象。

参考

avatar
文章
阅读
粉丝