html行內(nèi)觸發(fā)事件的this指向(原生js學(xué)習(xí))

var m=function(){

alert(2);

}

var obj={

A:function(){

},

m:function(){

alert(3);

},

B:function(){

var m=function(){

alert(1);

};

var div=document.createElement("div");

div.innerHTML="

xx

";

document.body.appendChild(div);

}

};

obj.B();

看起來好像onclick=m()會調(diào)用B函數(shù)里頭定義的m函數(shù)牢硅,其實不會。這里新增html芝雪,且是html行內(nèi)觸發(fā)事件减余,所以函數(shù)執(zhí)行在全局,m()調(diào)的是全局定義的m函數(shù)绵脯,結(jié)果彈出2佳励,和B函數(shù)作用域一點關(guān)系都沒有休里。

(2)

潛在包含了一層匿名函數(shù):

例一:

1

,值為

1

自己赃承。

這里相當(dāng)于:

(p#f).onclick=function(){

console.log(this);

};

所以this當(dāng)然是調(diào)用事件的p#f

例二:

1

相當(dāng)于:

(p#f).onclick=function(){

function A(){alert(this==window);};

A();

};

所以A里頭的this當(dāng)然是window妙黍。

例三:

1

var A=function(m){

alert(m.className); ? ? ? //點擊彈出"x"

};

這里相當(dāng)于:

p#f.onclick=function(){

A(this);

};

function體里的this必然是#f元素對象,所以可以彈出m.className瞧剖。拭嫁。

例四:

var m=function(){

alert(10);

}

var obj={

B:function(){

var m=function(){

alert(1);

};

var div=document.createElement("div");

div.innerHTML="cutemurphy";

div.id="gg";

document.body.appendChild(div);

document.getElementById("gg").addEventListener("click",m,false);

}

};

obj.B(); ? ? ?// 1

這個結(jié)果恰好和行內(nèi)執(zhí)行事件的結(jié)果相反,這里會彈出1抓于,而非10做粤。因為它的m函數(shù)并非去全局找,而是按照普通的函數(shù)作用域鏈來查找捉撮。怕品。。理論支持是函數(shù)執(zhí)行在定義的作用域里巾遭。

例五:

var obj={

A:function(){

console.log(this);

},

B:function(){

var m=function(){

alert(1);

};

var div=document.createElement("div");

div.innerHTML="

xx

";

document.body.appendChild(div);

var xNode=document.getElementById("xx");

xNode.addEventListener("click",this.A,false);

}

};

obj.B(); ? ? // xNode;

這里很有意思尝艘,addEventListener里的this.A的this指的是obj搁进,而this.A的函數(shù)體function(){console.log(this)}里的this又是xNode株灸。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末一屋,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子骑素,更是在濱河造成了極大的恐慌炫乓,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,290評論 6 491
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件献丑,死亡現(xiàn)場離奇詭異末捣,居然都是意外死亡,警方通過查閱死者的電腦和手機阳距,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,107評論 2 385
  • 文/潘曉璐 我一進店門塔粒,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人筐摘,你說我怎么就攤上這事卒茬。” “怎么了咖熟?”我有些...
    開封第一講書人閱讀 156,872評論 0 347
  • 文/不壞的土叔 我叫張陵圃酵,是天一觀的道長。 經(jīng)常有香客問我馍管,道長郭赐,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,415評論 1 283
  • 正文 為了忘掉前任确沸,我火速辦了婚禮捌锭,結(jié)果婚禮上俘陷,老公的妹妹穿的比我還像新娘。我一直安慰自己观谦,他們只是感情好拉盾,可當(dāng)我...
    茶點故事閱讀 65,453評論 6 385
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著豁状,像睡著了一般捉偏。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上泻红,一...
    開封第一講書人閱讀 49,784評論 1 290
  • 那天夭禽,我揣著相機與錄音,去河邊找鬼谊路。 笑死讹躯,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的缠劝。 我是一名探鬼主播蜀撑,決...
    沈念sama閱讀 38,927評論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼剩彬!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起矿卑,我...
    開封第一講書人閱讀 37,691評論 0 266
  • 序言:老撾萬榮一對情侶失蹤喉恋,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后母廷,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體轻黑,經(jīng)...
    沈念sama閱讀 44,137評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,472評論 2 326
  • 正文 我和宋清朗相戀三年琴昆,在試婚紗的時候發(fā)現(xiàn)自己被綠了氓鄙。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,622評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡业舍,死狀恐怖抖拦,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情舷暮,我是刑警寧澤态罪,帶...
    沈念sama閱讀 34,289評論 4 329
  • 正文 年R本政府宣布,位于F島的核電站下面,受9級特大地震影響复颈,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜沥割,卻給世界環(huán)境...
    茶點故事閱讀 39,887評論 3 312
  • 文/蒙蒙 一耗啦、第九天 我趴在偏房一處隱蔽的房頂上張望凿菩。 院中可真熱鬧,春花似錦帜讲、人聲如沸衅谷。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,741評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽会喝。三九已至,卻和暖如春玩郊,著一層夾襖步出監(jiān)牢的瞬間肢执,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,977評論 1 265
  • 我被黑心中介騙來泰國打工译红, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留预茄,地道東北人。 一個月前我還...
    沈念sama閱讀 46,316評論 2 360
  • 正文 我出身青樓侦厚,卻偏偏與公主長得像耻陕,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子刨沦,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,490評論 2 348

推薦閱讀更多精彩內(nèi)容

  • 工廠模式類似于現(xiàn)實生活中的工廠可以產(chǎn)生大量相似的商品诗宣,去做同樣的事情,實現(xiàn)同樣的效果;這時候需要使用工廠模式想诅。簡單...
    舟漁行舟閱讀 7,724評論 2 17
  • 單例模式 適用場景:可能會在場景中使用到對象召庞,但只有一個實例,加載時并不主動創(chuàng)建来破,需要時才創(chuàng)建 最常見的單例模式篮灼,...
    Obeing閱讀 2,058評論 1 10
  • 1.語言基礎(chǔ)2.嚴格模式3.js組成(ECMAScript DOM BOM)4.各種(DOM BOM)例子5.組件...
    蒲公英_前端開發(fā)者閱讀 1,543評論 0 3
  • 1. tab列表折疊效果 html: 能源系統(tǒng)事業(yè)部 崗位名稱: 工作地點 崗位名...
    lilyping閱讀 1,842評論 0 1
  • 篩選個人簡歷 HR和技術(shù)leader, 項目經(jīng)驗和個人背景 (重要) 進行技術(shù)面試 電話面試、face to fa...
    ZhouJiping閱讀 292評論 0 0