this指針

(1)this在js中主要有四種用法:

1匀哄、作為普通函數(shù)使用

2佳吞、作為對象方法來使用

3底扳、call和apply

4、作為構(gòu)造函數(shù)來使用

1>作為普通函數(shù)來使用:

function funcA() {

this.name = "hello";

console.log(this.name);

this.show =function() {

console.log(this.name);

}

}

funcA();//1鹊汛、hello

這個代碼很簡單,但也隱藏了一個坑滥嘴,就是這個時候的this代表的是window的指針至耻,所以當(dāng)這段代碼運行完之后,你再輸出console.log(window.name)時候走触,你會發(fā)現(xiàn)輸出為”hello”,在使用中盡量避免疤苹。

2>作為對象方法來使用

var obj={name:"hello",show:function(){

console.log(this.name);

}};

obj.show();

這個很簡單卧土,this指向自己,所以this.name就用hello;

var obj={name:"hello",show:function(){

console.log(this.name);

}};

obj.show();

var objA={name:"world"}

objA.show=obj.show;

objA.show()

答案是”world”,因為在js中對象都是引用類型,當(dāng)objA.show=obj.show這句代碼把objA.show也指向的show方法旅敷,所以在調(diào)用的時候會把this缝裁,指向objA而不是obj.

3>call和apply

這個在上面的繼承中的原型冒充中也提過一些捷绑,這里也詳細(xì)說明this在call和apply中微秒的用法:

function funcA() {

this.name = "hello";

console.log(this.name);

this.show =function() {

console.log(this.name);

}

}

var a =new funcA();

a.show();

var objA ={

name:"objA"

}

a.show.call(objA);

上面這段代碼就是call的用法氢妈,這里我們可以把代碼拆解成我們能看的懂的形式:

a.show.call(objA)====>{

obj.show=a.show();

obj.show();

delete obj.show();

}

上面就是call的類似執(zhí)行的過程的形勢(實際上并不是這樣的首量,可以這樣來記),知道了這個執(zhí)行過程加缘,我們就來探究這個的執(zhí)行過程:

1拣宏、把a.show里面的方法中的this全部換成obj.

2、執(zhí)行a.show(),同時把后面的參數(shù)作為參數(shù)處理宋下。

4、作為構(gòu)造函數(shù)來使用

function funcA(name){

this.name;

this.show=function(){

console.log(name);

}

}

var a=new funcA("hello");

a.show();

作為構(gòu)造函數(shù)使用的時候罩引,在new的關(guān)鍵字創(chuàng)建對象的時候枝笨,會先生成一個空對象横浑,然后調(diào)用方法,把this的替換成這個空對象领炫。(這個在上篇有詳細(xì)的說明张咳,這里不多說)脚猾。在創(chuàng)建對象的時候,this指針就指向了創(chuàng)建新對象砰奕。

所以上面的那段代碼我想應(yīng)該就能看懂為什么會是這個輸出結(jié)果了提鸟,唯一的有一個(objB.show = a.show)();這個比較奇怪,因為賦值的時候胸哥,返回的是右邊的那個函數(shù)赡鲜,所以最終執(zhí)行的也是a.show();

總結(jié):js中的this其實是一個比較簡單的東西银酬,上面只列出了常用的東西,至于更深入的赋朦,可以自己在深入挖掘下,相信有了這個基礎(chǔ)后纹因,再深入的話應(yīng)試就不是一件枯燥的事了

下篇說下可以快速學(xué)習(xí)js的方面的知識琳拨。

注意:

var name ="Kevin Yang";

function sayHi(){

 alert("你好狱庇,我的名字叫"+this.name); 

 } 

 sayHi();

script>

這段代碼和上段代碼的區(qū)別就在于sayHi函數(shù)在使用name的時候加上了this.前綴。運行結(jié)果和上面一摸一樣颜启。這說明this.name引用的也還是全局的name對象浪讳。

var name ="Kevin Yang";

functionsayHi(){ 

 alert("你好淹遵,我的名字叫"+this.name); 

 }

var  person = {};

 person.sayHello = sayHi; 

 person.sayHello();

script>

這一次,我們又創(chuàng)建了一個全局對象person济炎,并將sayHi函數(shù)對象賦給person對象的sayHello屬性辐真。運行結(jié)果如下:

![][圖片上傳失敗...(image-6bc0b3-1514356625974)]

我們發(fā)現(xiàn)this.name已經(jīng)變成undefined了。這說明耐床,在sayHello函數(shù)內(nèi)部執(zhí)行時已經(jīng)找不著this.name對象了咙咽。如果我們重新定義person對象淤年,在其上面加上一個name屬性又會怎么樣呢蜡豹?

var person = {name:"Marry"};

運行代碼發(fā)現(xiàn)打招呼的“人”變了:

镜廉![(image-3941e-1513993419330)]

判別this指針的指導(dǎo)性原則:

在Javascript里面,this指針代表的是執(zhí)行當(dāng)前代碼的對象的所有者齐遵。

在上面的示例中我們可以看到,第一次拓哟,我們定義了一個全局函數(shù)對象sayHi并執(zhí)行了這個函數(shù)伶授,函數(shù)內(nèi)部使用了this關(guān)鍵字断序,那么執(zhí)行this這行代碼的對象是sayHi(一切皆對象的體現(xiàn)),sayHi是被定義在全局作用域中糜烹。其實在Javascript中所謂的全局對象违诗,無非是定義在 window這個根對象下的一個屬性而已。因此疮蹦,sayHi的所有者是window對象诸迟。也就是說,在全局作用域下愕乎,你可以通過直接使用name去引用這個對象阵苇,你也可以通過window.name去引用同一個對象。因而this.name就可以翻譯為window.name了妆毕。

再來看第二個this的示例。我們定義了一個person的對象笛粘,并定義了它的sayHello屬性趁怔,使其指向sayHi全局對象。那么這個時候薪前,當(dāng)我們運行person.sayHello的時候润努,this所在的代碼所屬對象就是sayHello了(其實準(zhǔn)確來說,sayHi和sayHello是只不過類似兩個指針示括,指向的對象實際上是同一個)铺浇,而sayHello對象的所有者就是person了。第一次垛膝,person里面沒有name屬性鳍侣,因此彈出的對話框就是this.name引用的就是undefined對象(Javascript中所有只聲明而沒有定義的變量全都指向undefined對象);而第二次我們在定義person的時候加了name屬性了吼拥,那么this.name指向的自然就是我們定義的字符串了倚聚。

理解了上面所說的之后,我們將上面最后一段示例改造成面向?qū)ο笫降拇a凿可。

var name ="Kevin Yang";

function sayHi(){    

alert("你好惑折,我的名字叫"+this.name);  }

function  Person(name){

this.name = name;  

}  

Person.prototype.sayHello = sayHi;

var marry =newPerson("Marry");   

marry.sayHello();

var kevin =newPerson("Kevin");  

kevin.sayHello();

script>

在上面這段代碼中,我們定義了一個Person的“類”(實際上還是一個對象),然后在這個類的原型(類原型相當(dāng)于C++中的靜態(tài)成員變量的概念)中定義了sayHello屬性惨驶,使其指向全局的sayHi對象白热。運行代碼我們可以看到,marry和kevin都成功的向我們打了聲“招呼”粗卜。

image
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末屋确,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子休建,更是在濱河造成了極大的恐慌乍恐,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,639評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件测砂,死亡現(xiàn)場離奇詭異茵烈,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)砌些,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,277評論 3 385
  • 文/潘曉璐 我一進(jìn)店門呜投,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人存璃,你說我怎么就攤上這事仑荐。” “怎么了纵东?”我有些...
    開封第一講書人閱讀 157,221評論 0 348
  • 文/不壞的土叔 我叫張陵吊输,是天一觀的道長剩拢。 經(jīng)常有香客問我,道長,這世上最難降的妖魔是什么然眼? 我笑而不...
    開封第一講書人閱讀 56,474評論 1 283
  • 正文 為了忘掉前任哈肖,我火速辦了婚禮练俐,結(jié)果婚禮上注暗,老公的妹妹穿的比我還像新娘。我一直安慰自己猫牡,他們只是感情好胡诗,可當(dāng)我...
    茶點故事閱讀 65,570評論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著淌友,像睡著了一般煌恢。 火紅的嫁衣襯著肌膚如雪震庭。 梳的紋絲不亂的頭發(fā)上症虑,一...
    開封第一講書人閱讀 49,816評論 1 290
  • 那天,我揣著相機(jī)與錄音归薛,去河邊找鬼。 笑死,一個胖子當(dāng)著我的面吹牛主籍,可吹牛的內(nèi)容都是我干的习贫。 我是一名探鬼主播,決...
    沈念sama閱讀 38,957評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼千元,長吁一口氣:“原來是場噩夢啊……” “哼苫昌!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起幸海,我...
    開封第一講書人閱讀 37,718評論 0 266
  • 序言:老撾萬榮一對情侶失蹤祟身,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后物独,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體袜硫,經(jīng)...
    沈念sama閱讀 44,176評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,511評論 2 327
  • 正文 我和宋清朗相戀三年挡篓,在試婚紗的時候發(fā)現(xiàn)自己被綠了婉陷。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,646評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡官研,死狀恐怖秽澳,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情戏羽,我是刑警寧澤担神,帶...
    沈念sama閱讀 34,322評論 4 330
  • 正文 年R本政府宣布,位于F島的核電站始花,受9級特大地震影響妄讯,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜衙荐,卻給世界環(huán)境...
    茶點故事閱讀 39,934評論 3 313
  • 文/蒙蒙 一捞挥、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧忧吟,春花似錦砌函、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,755評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至煌抒,卻和暖如春仍劈,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背寡壮。 一陣腳步聲響...
    開封第一講書人閱讀 31,987評論 1 266
  • 我被黑心中介騙來泰國打工贩疙, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留讹弯,地道東北人。 一個月前我還...
    沈念sama閱讀 46,358評論 2 360
  • 正文 我出身青樓这溅,卻偏偏與公主長得像组民,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子悲靴,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,514評論 2 348

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