深入理解javascript的this机制系列第二篇——this绑定优先级

前面的话

上一篇介绍了this的绑定规则,那如果在函数的调用位置上同时存在两种以上的绑定规则该怎么办?

先给出一个结论: new绑定 > 显示绑定 > 隐式绑定 > 默认绑定

一、显示绑定 pk 隐式绑定(显示绑定胜出)

function foo() {
    console.log( this.a );
}
var obj1 = {
    a: 2,
    foo: foo
};
var obj2 = {
    a: 3,
    foo: foo
};
obj1.foo(); // 2
obj2.foo(); // 3
//在该语句中,显式绑定call(obj2)和隐式绑定obj1.foo同时出现,最终结果为3,说明被绑定到了obj2中
obj1.foo.call( obj2 ); // 3 //直接证明显示绑定胜出
obj2.foo.call( obj1 ); // 2

二、new绑定 pk 隐式绑定(new绑定胜出)

function foo(something) {
    this.a = something;
}
var obj1 = {foo: foo};
var obj2 = {};
obj1.foo( 2 );
console.log( obj1.a ); // 2
obj1.foo.call(obj2,3); //显示绑定胜出
console.log( obj2.a ); // 3
//在下列代码中,隐式绑定obj1.foo和new绑定同时出现。最终obj1.a结果是2,而bar.a结果是4,说明this被绑定在bar上
//证明new绑定胜出隐式绑定
var bar = new obj1.foo( 4 );
console.log( obj1.a ); // 2 
console.log( bar.a ); // 4

三、new绑定 pk 显示绑定(new绑定胜出)

function foo(something) {
    this.a = something;
}
var obj1 = {};
//先将obj1绑定到foo函数中,此时this值为obj1
var bar = foo.bind( obj1 );
bar( 2 );
console.log(obj1.a); // 2
//通过new绑定,此时this值为baz
var baz = new bar( 3 ); //this指向新创建的对象
console.log( obj1.a ); // 2
//说明使用new绑定时,在bar函数内,无论this指向obj1有没有生效,最终this都指向新创建的对象baz
console.log( baz.a ); // 3

最后,我们给出完整的顺序。

new绑定(this指向新创建的对象)> 显示绑定(this绑定到指定对象)> 隐式绑定(this绑定的是属于的对象)> 默认绑定(在全局调用,this在非严格模式下指向window)。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值