首先聲明,this是在運(yùn)行時(shí)綁定的贩猎,并不是在編寫時(shí)綁定,它的上下文取決于函數(shù)調(diào)用時(shí)的各種條件萍膛。常見的this綁定規(guī)則有四種吭服,如下:
1.默認(rèn)綁定
當(dāng)函數(shù)被獨(dú)立調(diào)用時(shí),this默認(rèn)綁定到全局window對(duì)象上
function foo(){
console.log(this.a)
}
var a = 1
foo() // 輸出1
- 隱式綁定
取決于調(diào)用的時(shí)候是否被某個(gè)對(duì)象所引用
function foo(){
console.log(this.a)
}
var obj = {
a:1,
foo: foo
}
obj.foo() // 輸出1
存在一種情況蝗罗,this會(huì)丟失艇棕,比如:
function foo(){
console.log(this.a)
}
var obj = {
a:1,
foo: foo
}
var bar = obj.foo;
var a = 2
bar() // 輸出2
3.運(yùn)用call(),apply()或es5的bind() 來顯示綁定
function foo(){
console.log(this.a)
}
var obj = {
a:1
}
foo.call(obj) // 輸出1
記住,bind()返回的是一個(gè)硬綁定的新函數(shù)串塑,它會(huì)把你指定的參數(shù)設(shè)置為this的上下文沼琉。
4.new綁定
當(dāng)我們使用new來調(diào)用構(gòu)造函數(shù)時(shí),javascript會(huì)先創(chuàng)建一個(gè)新對(duì)象桩匪,然后把它綁定到構(gòu)造函數(shù)的this上打瘪。
5.箭頭函數(shù)
以上的四種規(guī)則不適用在箭頭函數(shù)中,箭頭函數(shù)的this是根據(jù)函數(shù)定義時(shí)外層作用域來決定的傻昙。
function foo(){
return (a) => {
//this繼承了外層foo的作用域
console.log(this.a)
}
}
var obj1 = { a:1}
var obj2 = {a:2}
var bar = foo.call(obj1)
bar.call(obj2) // 輸出1
//在箭頭函數(shù)出來之前闺骚,我們使用這種方式定義的
function foo(){
var self = this
setTimeout(function(){
console.log(self.a)
},100)
}
var obj = { a:1}
foo.call(obj) // 輸出1