詳細(xì)簡(jiǎn)單明了的介紹javascript入門檻this對(duì)象

javascript是一門腳本語(yǔ)言车要,所以好多人認(rèn)為javascript比較簡(jiǎn)單易懂好學(xué)榆俺。

哈哈,那你就錯(cuò)了跪削。javascript支持函數(shù)式編程谴仙、閉包、基于原型鏈繼承等等這些高級(jí)功能碾盐。

今天為大家剖析這門面向?qū)ο骿avascript入門檻this關(guān)鍵字晃跺。你必須了解弄透,才算真正入門javascript毫玖。其實(shí)this就一句話掀虎,誰(shuí)調(diào)用就屬于誰(shuí)凌盯!,javascript中的this對(duì)象含義有好幾種烹玉。

this對(duì)象它可以指全局對(duì)象(window)驰怎、當(dāng)前對(duì)象、或者任意的對(duì)象二打。

this的調(diào)用分別下面這4種:

作為一個(gè)函數(shù)調(diào)用县忌。

作為一個(gè)方法調(diào)用。

作為構(gòu)造函數(shù)調(diào)用继效。

使用call或apply調(diào)用症杏。

1、作為一個(gè)函數(shù)調(diào)用在全局作用域(對(duì)象)內(nèi)調(diào)用函數(shù)瑞信,this綁定到全局對(duì)象中去厉颤,也就是說(shuō)this指向window示例:var name = 'this window';

function getName() {

? ? alert(this.name); // this window

? ? alert(this.name === window.name); // true

}

getName();

由于在全局作用域內(nèi)調(diào)用,所以this指向window作為一個(gè)函數(shù)調(diào)用就這么簡(jiǎn)單凡简!

2逼友、作為一個(gè)方法調(diào)用示例:var name = 'this window';

var obj = {

? ? name: 'my object',

? ? getName: function() {

? ? ? ?alert(this.name);? // 'my boject'

? ? ? ?alert(obj.name === this.name); // true

? ?}

};

obj.getName();

咦~~怎么示例一和示例二都是執(zhí)行一個(gè)名叫g(shù)etName的function,怎么一個(gè)叫函數(shù)一個(gè)叫方法呢秤涩?

你是否有這個(gè)疑惑呢帜乞?

客官莫急!老司機(jī)給你講講筐眷,先上車再說(shuō)吧~~

在javascript中挖函,函數(shù)也是對(duì)象,所以函數(shù)可以作為一個(gè)對(duì)象的屬性存在浊竟,那么這個(gè)時(shí)候就稱之為該對(duì)象的方法!

例如:上面中的obj對(duì)象有一個(gè)叫g(shù)etName的屬性津畸,并且getName還是一個(gè)function振定,所以getName是obj的一個(gè)方法。

換句話來(lái)說(shuō)肉拓,凡是一個(gè)以function作為對(duì)象屬性存在的后频,我們就稱它為方法!

結(jié)論: 一個(gè)函數(shù)作為一個(gè)方法調(diào)用暖途,該this指向該調(diào)用對(duì)象卑惜!

例如:上面的getName就是作為obj的方法調(diào)用,所以該方法內(nèi)的this.name就是指向obj對(duì)象驻售。

3露久、作為構(gòu)造函數(shù)調(diào)用示例:

function Person(name, age) {

? ? this.name = name;

? ? this.age = age;

this.msg = function() {

console.log(this);

return "姓名:" + this.name + "," + '年齡:' + this.age

}

}

var oldDriver = new Person('老司機(jī)', 26);

var laowang = new Person('老王', 40);

alert(oldDriver.msg()); // 姓名:老司機(jī)欺栗,年齡:16

alert(laowang.msg()); // 姓名:老王毫痕,年齡:40

// console.log(this)

結(jié)論:this指向新創(chuàng)建的實(shí)例(對(duì)象)征峦!

4、使用 apply 或 call 調(diào)用示例:var name = 'this window';

var obj = {

name: 'my object',

getName: function() {

return function() {

alert(this.name);

}

}

};

假如我們想得出那個(gè)alert框的this.name的值怎么做呢消请?

相信機(jī)智的未來(lái)司機(jī)肯定obj.getName()()栏笆,

記得有兩個(gè)括號(hào)的哦,只有一個(gè)括號(hào)代表的是執(zhí)行這個(gè)getName函數(shù)然后return 一個(gè)匿名函數(shù)臊泰,要想執(zhí)行這個(gè)匿名函數(shù)再加多一個(gè)括號(hào)蛉加,好那我們就運(yùn)行。

然后彈出:“this window”!

有人肯定問(wèn):剛才你不是說(shuō)getName函數(shù)作為一個(gè)對(duì)象屬性存在缸逃,然后調(diào)用這個(gè)方法针饥,this就指向這個(gè)對(duì)象嗎?

應(yīng)該是“my object”才對(duì)呀察滑!

怎么會(huì)變成“this window”的老鄉(xiāng)打厘!這個(gè)不一樣呀,里面還多了return function() {}的匿名函數(shù)呀贺辰。

這里面就構(gòu)成了一個(gè)閉包呀户盯!咦~閉包什么鬼?其實(shí)閉包在javascript里面可以簡(jiǎn)單的理解為一個(gè)函數(shù)里面嵌套著另外一個(gè)函數(shù)饲化,并且外部的函數(shù)將嵌套的函數(shù)對(duì)象作為一個(gè)返回值返出Cа肌(無(wú)論這個(gè)被返回的函數(shù)對(duì)象是否匿名)大概有點(diǎn)懂了吧!不懂沒關(guān)系吃靠,我們可以先alert(obj.getName())看看是什么東西

哦硫眨,原來(lái)是

function() {

alert(this.name);

}

所以剛才的obj.getName()();就等于一個(gè)匿名的自執(zhí)行函數(shù)(自動(dòng)立馬執(zhí)行的函數(shù),作用域是window)被window調(diào)用了(function(){

alert(this.name);

})();

所以obj.getName()()運(yùn)行巢块, this指向window礁阁!

老司機(jī),老司機(jī)族奢,我可是想讓里面的this.name 變成“my object”姥闭,你有辦法嗎?

我再一次重申越走,在 JavaScript 中函數(shù)也是對(duì)象棚品,對(duì)象則有方法,apply 和 call 就是函數(shù)對(duì)象的方法廊敌。這兩個(gè)方法異常強(qiáng)大铜跑,他們?cè)试S切換函數(shù)執(zhí)行的上下文環(huán)境(context),即 this 綁定的對(duì)象骡澈。很多 JavaScript 中的技巧以及類庫(kù)都用到了該方法锅纺。通俗的說(shuō):

你首先要知道call和apply是Function的方法,他的第一個(gè)參數(shù)是this肋殴,第二個(gè)是Function的參數(shù)伞广。

比如你的方法里寫了this拣帽、window、undefined嚼锄、null,普通調(diào)用這個(gè)方法這個(gè)this是window减拭。

而如果你用了call或者apply,第一個(gè)參數(shù)就是this,第二個(gè)參數(shù)就是這個(gè)Function的參數(shù)(參數(shù)選填)

語(yǔ)法:Function.call(obj,arg); Function.apply(obj,[arg1,arg2..]);我們可以用obj.getName().call(obj);或者obj.getName.apple(obj);var obj = {

name: 'my object',

getName: function() {

return function() {

alert(this.name);

}

}

};

obj.getName().call(obj); // 'my object'

// obj.getName().apply(obj); // 'my object'

意思就是:obj.getName()運(yùn)行返回的匿名函數(shù)区丑,this指向obj拧粪。所以函數(shù)自執(zhí)行時(shí) “this.name”相當(dāng)于“obj.name”,所以是'my object'.

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市沧侥,隨后出現(xiàn)的幾起案子可霎,更是在濱河造成了極大的恐慌,老刑警劉巖宴杀,帶你破解...
    沈念sama閱讀 222,681評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件癣朗,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡旺罢,警方通過(guò)查閱死者的電腦和手機(jī)旷余,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)扁达,“玉大人正卧,你說(shuō)我怎么就攤上這事」蚪猓” “怎么了炉旷?”我有些...
    開封第一講書人閱讀 169,421評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)叉讥。 經(jīng)常有香客問(wèn)我窘行,道長(zhǎng),這世上最難降的妖魔是什么图仓? 我笑而不...
    開封第一講書人閱讀 60,114評(píng)論 1 300
  • 正文 為了忘掉前任抽高,我火速辦了婚禮,結(jié)果婚禮上透绩,老公的妹妹穿的比我還像新娘。我一直安慰自己壁熄,他們只是感情好帚豪,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,116評(píng)論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著草丧,像睡著了一般狸臣。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上昌执,一...
    開封第一講書人閱讀 52,713評(píng)論 1 312
  • 那天烛亦,我揣著相機(jī)與錄音诈泼,去河邊找鬼。 笑死煤禽,一個(gè)胖子當(dāng)著我的面吹牛铐达,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播檬果,決...
    沈念sama閱讀 41,170評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼瓮孙,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了选脊?” 一聲冷哼從身側(cè)響起杭抠,我...
    開封第一講書人閱讀 40,116評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎恳啥,沒想到半個(gè)月后偏灿,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,651評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡钝的,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,714評(píng)論 3 342
  • 正文 我和宋清朗相戀三年翁垂,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片扁藕。...
    茶點(diǎn)故事閱讀 40,865評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡沮峡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出亿柑,到底是詐尸還是另有隱情邢疙,我是刑警寧澤,帶...
    沈念sama閱讀 36,527評(píng)論 5 351
  • 正文 年R本政府宣布望薄,位于F島的核電站疟游,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏痕支。R本人自食惡果不足惜颁虐,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,211評(píng)論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望卧须。 院中可真熱鬧另绩,春花似錦、人聲如沸花嘶。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,699評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)椭员。三九已至车海,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間隘击,已是汗流浹背侍芝。 一陣腳步聲響...
    開封第一講書人閱讀 33,814評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工研铆, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人州叠。 一個(gè)月前我還...
    沈念sama閱讀 49,299評(píng)論 3 379
  • 正文 我出身青樓棵红,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親留量。 傳聞我的和親對(duì)象是個(gè)殘疾皇子窄赋,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,870評(píng)論 2 361

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

  • 工廠模式類似于現(xiàn)實(shí)生活中的工廠可以產(chǎn)生大量相似的商品,去做同樣的事情楼熄,實(shí)現(xiàn)同樣的效果;這時(shí)候需要使用工廠模式忆绰。簡(jiǎn)單...
    舟漁行舟閱讀 7,779評(píng)論 2 17
  • 1. Java基礎(chǔ)部分 基礎(chǔ)部分的順序:基本語(yǔ)法,類相關(guān)的語(yǔ)法可岂,內(nèi)部類的語(yǔ)法错敢,繼承相關(guān)的語(yǔ)法,異常的語(yǔ)法缕粹,線程的語(yǔ)...
    子非魚_t_閱讀 31,665評(píng)論 18 399
  • 原文: https://github.com/ecomfe/spec/blob/master/javascript...
    zock閱讀 3,377評(píng)論 2 36
  • this this是javascript的一個(gè)關(guān)鍵字稚茅,隨著函數(shù)使用場(chǎng)合不同,this的值會(huì)發(fā)生變化平斩。但是總有一個(gè)原...
    西瓜w閱讀 379評(píng)論 0 0
  • 第5章 引用類型(返回首頁(yè)) 本章內(nèi)容 使用對(duì)象 創(chuàng)建并操作數(shù)組 理解基本的JavaScript類型 使用基本類型...
    大學(xué)一百閱讀 3,238評(píng)論 0 4