優(yōu)先級: new綁定 > 顯式綁定 > 隱式綁定 > 默認綁定
1畦木、 默認綁定
console.log('this', this); //輸出 Window
function sayHello() {
// this指向全局對象(非嚴格模式下)
console.log("line 16 ~ sayHello ~ sayHello",this, this.name, name)
}
sayHello() //輸出 Window卵蛉、Tom拘悦、Tom
var name = 'Tom'
2锋爪、 隱式綁定(格式: xxx.fn() || a.b.c.xxx.fn() 那么婆翔,this指向xxx)
function sayHello() {
console.log("line 16 ~ sayHello ~ sayHello",this, this.name, name)
}
var name = 'Tom'
var Person0 = {
name: 'Jack',
sayHello: sayHello
}
Person0.sayHello() //輸出 Person0、Jack善涨、Tom
var Person1 = {
name: 'Sam',
sayHello: sayHello,
friend: Person0
}
// 不管有多少層窒盐,在判斷this的時候,我們只關(guān)注最后一層钢拧,所以綁定的為 Person0
Person1.friend.sayHello() //輸出 Person0蟹漓、Jack、Tom
Person1.sayHello() //輸出 Person1源内、Sam葡粒、Tom
// 需注意:這種就不是隱式綁定(`隱式綁定的丟失`)
var say = Person1.sayHello;
say() //輸出 Window、Tom膜钓、Tom
var Person2 = {
name: 'Mike',
sayHello: function(){
setTimeout(function(){
// setTimeout的回調(diào)函數(shù)中嗽交,this使用的是默認綁定,為全局對象
console.log("line 43 ~ setTimeout ~ sayHello",this, this.name, name)
})
}
}
var Person3 = {
name: 'Bill',
sayHello: sayHello
}
Person2.sayHello(); //輸出 Window、Tom颂斜、Tom
// 下面????的區(qū)別:setTimeout(fn,delay)相當于是將Person3.sayHello賦值給了一個變量fn夫壁,最后執(zhí)行了變量,`隱式綁定的丟失`沃疮。
setTimeout(Person3.sayHello,100); //輸出 Window盒让、Tom梅肤、Tom
setTimeout(function(){
Person3.sayHello(); //輸出 Person3、Bill邑茄、Tom
},200);
3姨蝴、 顯式綁定(通過call,apply,bind的方式,顯式的指定this所指向的對象)
function sayHello() {
console.log("line 16 ~ sayHello ~ sayHello",this, this.name, name)
}
var name = 'Tom'
var Person0 = {
name: 'Jack',
sayHello: sayHello
}
var Person1 = {
name: 'Sam',
sayHello: sayHello,
friend: Person0
}
// 如果我們將null或者是undefined作為this的綁定對象傳入call肺缕、apply或者是bind,這些值在調(diào)用時會被忽略左医,實際應(yīng)用的是默認綁定規(guī)則。
var sayH = Person0.sayHello;
sayH() //輸出 Window搓谆、Tom炒辉、Tom
// 強硬綁定到 Persion1豪墅、Persion3
sayH.call(Person0) //輸出 Person0泉手、Jack、Tom
sayH.call(Person1) //輸出 Person1偶器、Sam斩萌、Tom
sayH.call(null) //輸出 Window、Tom屏轰、Tom
var sayHi = function(fn) {
fn()
}
// call(Person1, Person1.sayHello)相當于Person1.sayHello已經(jīng)被賦值給fn了颊郎,隱式綁定也就丟了
sayHi.call(Person1, Person1.sayHello);//輸出 Window、Tom霎苗、Tom
3姆吭、 new綁定
function newSayHi(name){
this.name = name;
}
var newSay = new newSayHi('Hello ~ Hi')
console.log("line 80 ~ newSayHi ~ newSay",this, newSay, newSay.name) //輸出 Window、newSayHi唁盏、Hello ~ Hi