深入理解this機制系列第二篇——this綁定優先級 - xiaohuochai－IT工程師數位筆記本

文章出處

前面的話

　　上一篇介紹過this的綁定規則，那如果在函數的調用位置上同時存在兩種以上的綁定規則應該怎么辦呢？本文將介紹this綁定的優先級

顯式綁定 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上
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 );
console.log( obj1.a ); // 2
//說明使用new綁定時，在bar函數內，無論this指向obj1有沒有生效，最終this都指向新創建的對象baz
console.log( baz.a ); // 3