学习this关键字(二)

栏目: JavaScript · 发布时间: 5年前

内容简介:在上篇文章我们明白了函数的在理解使用

在上篇文章我们明白了函数的 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的绑定规则

接下来我们来看看在函数的执行过程中调用位置如何决定 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.nameobj.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
复制代码

虽然 barobj.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) ,因此强制把 foothis 绑定到了 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 操作符,使用方法看起来也和那些面向类的语言一样,然而, JavaScriptnew 的机制实际上和面向类的语言完全不同。在 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 绑定和显式绑定哪个优先级更高?我们来测试一下:

newcall/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 函数调用中的 thisnew 绑定生成了一个新对象 bazbar.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. callapply (或者 bind )调用?绑定到指定的对象。
  3. 由上下文对象调用?绑定到那个上下文对象。
  4. 默认:在严格模式下绑定到 undefined ,否则绑定到全局对象。

以上所述就是小编给大家介绍的《学习this关键字(二)》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

The Information

The Information

James Gleick / Vintage / 2012-3-6 / USD 16.95

James Gleick, the author of the best sellers Chaos and Genius, now brings us a work just as astonishing and masterly: a revelatory chronicle and meditation that shows how information has become th......一起来看看 《The Information》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

MD5 加密
MD5 加密

MD5 加密工具