簡(jiǎn)單談?wù)刯avascript中this的隱式綁定
我們先來(lái)看一個(gè)例子
function foo() {
console.log( this.a );
}
var obj = {
a: 2,
foo: foo
};
obj.foo(); // 2
this指向了obj,因?yàn)閒oo執(zhí)行時(shí)的call-site(可以理解為調(diào)用時(shí)所在作用域)在obj上面。注意是運(yùn)行的時(shí)候,和在哪里聲明的沒(méi)有關(guān)系。
call-site and call-stack
call-site姑且理解為調(diào)用域,call-stack為調(diào)用棧。如下代碼可以輔助我們理解
function baz() {
// call-stack is: `baz`
// so, our call-site is in the global scope
console.log( "baz" );
bar(); // <-- call-site for `bar`
}
在baz()中調(diào)用bar(),所以bar的調(diào)用域是baz,此時(shí)bar的調(diào)用棧只有baz;而baz本身暴露在全局作用域中,所以它的調(diào)用域則也在全局作用域中。
function bar() {
// call-stack is: `baz` -> `bar`
// so, our call-site is in `baz`
console.log( "bar" );
foo(); // <-- call-site for `foo`
}
function foo() {
// call-stack is: `baz` -> `bar` -> `foo`
// so, our call-site is in `bar`
console.log( "foo" );
}
baz(); // <-- call-site for `baz`
理解之后再回頭看開(kāi)頭的例子,是不是感覺(jué)清晰了很多。其實(shí)this只是指向了它的call-site
還有如下玩法:
function foo() {
console.log( this.a );
}
var obj2 = {
a: 42,
foo: foo
};
var obj1 = {
a: 2,
obj2: obj2
};
obj1.obj2.foo(); // 42
Implicitly Lost(隱式丟失)
function foo() {
console.log( this.a );
}
var obj = {
a: 2,
foo: foo
};
var bar = obj.foo; // function reference/alias!
var a = "oops, global"; // `a` also property on global object
bar(); // "oops, global"
雖然bar引用了obj上的foo,但實(shí)際上相當(dāng)于是直接對(duì)foo引用而已,所以會(huì)默認(rèn)綁定到全局。
function foo() {
console.log( this.a );
}
function doFoo(fn) {
// `fn` is just another reference to `foo`
fn(); // <-- call-site!
}
var obj = {
a: 2,
foo: foo
};
var a = "oops, global"; // `a` also property on global object
doFoo( obj.foo ); // "oops, global"
- JavaScript調(diào)用模式與this關(guān)鍵字綁定的關(guān)系
- JavaScript函數(shù)中的this四種綁定形式
- Javascript中this綁定的3種方法與比較
- 詳細(xì)講解JavaScript中的this綁定
- JavaScript中this的四個(gè)綁定規(guī)則總結(jié)
- js綁定事件this指向發(fā)生改變的問(wèn)題解決方法
- JavaScript call apply使用 JavaScript對(duì)象的方法綁定到DOM事件后this指向問(wèn)題
- Javascript中的this綁定介紹
- javascript下動(dòng)態(tài)this與動(dòng)態(tài)綁定實(shí)例代碼
- JavaScript this綁定過(guò)程深入詳解
相關(guān)文章
淺談JavaScript編程語(yǔ)言的編碼規(guī)范
本文淺談 JavaScript 編程中關(guān)于編碼規(guī)范的問(wèn)題,分析其中緣由。希望引起更多 Web 開(kāi)發(fā)人員對(duì) JavaScript 編碼規(guī)范問(wèn)題的關(guān)注和對(duì)軟件產(chǎn)品質(zhì)量問(wèn)題的重視2011-10-10
Ajax解決跨域之設(shè)置CORS響應(yīng)頭實(shí)現(xiàn)跨域案例詳解
這篇文章主要介紹了Ajax解決跨域之設(shè)置CORS響應(yīng)頭實(shí)現(xiàn)跨域案例詳解,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-07-07
設(shè)計(jì)模式中的組合模式在JavaScript程序構(gòu)建中的使用
組合模式一般是將一系列類似的小對(duì)象組合成大的對(duì)象,由這個(gè)大對(duì)象提供接口來(lái)對(duì)里面的小對(duì)象進(jìn)行操作,下買(mǎi)呢我們來(lái)詳細(xì)看一下設(shè)計(jì)模式中的組合模式在JavaScript程序構(gòu)建中的使用2016-05-05
總結(jié)JavaScript在IE9之前版本中內(nèi)存泄露問(wèn)題
本篇文章給大家總結(jié)了JavaScript在IE9之前版本中內(nèi)存泄露問(wèn)題,對(duì)此有興趣的朋友可以學(xué)習(xí)下。2018-04-04
淺析js中2個(gè)等號(hào)與3個(gè)等號(hào)的區(qū)別
這篇文章介紹了js中2個(gè)等號(hào)與3個(gè)等號(hào)的區(qū)別,有需要的朋友可以參考一下2013-08-08

