JavaScript中的this

JavaScript中的this

以下內(nèi)容屬于個(gè)人的歸納總結(jié)(請(qǐng)大神們多多指點(diǎn)!L酢W嵴稀)
隨著函數(shù)的使用場(chǎng)合不同啤月,this的值會(huì)發(fā)生變化(this代表函數(shù)運(yùn)行時(shí)自動(dòng)生成的一個(gè)內(nèi)部對(duì)象)

全局執(zhí)行

console.log(this);//瀏覽器:Window //node:{}

函數(shù)中執(zhí)行

純粹的函數(shù)調(diào)用

function hello(){ 
  console.log(this);
}
hello();//Window global

可以看到函數(shù)直接調(diào)用時(shí),屬于全局調(diào)用嫉髓,this指全局對(duì)象

嚴(yán)格模式

'use strict';
function hello(){
  console.log(this);
}
hello();//undefined

可以看到在嚴(yán)格模式下執(zhí)行純粹的函數(shù)調(diào)用观腊,this指向的是undefined

作為對(duì)象的方法調(diào)用

當(dāng)一個(gè)函數(shù)被當(dāng)作對(duì)象的方法調(diào)用時(shí),this指當(dāng)前這個(gè)對(duì)象

var o = { 
  x: 7, 
  test: function(){ 
    console.log(this.x); 
}};
o.test(); //this指o這個(gè)對(duì)象

在setTimeout中使用

var o = {
  name: 'Jony',
  f1: function(){ 
    console.log(this); //全局對(duì)象 
},
  f2: function(){
    console.log(this); //o這個(gè)對(duì)象
    setTimeout(this.f1, 1000);
  }
};
o.f2();

在setTimeout這里要注意的是:**把this.f1當(dāng)作參數(shù)傳進(jìn)來,這里的參數(shù)指向的是this.f1的引用算行,只是被當(dāng)作普通函數(shù)的直接調(diào)用梧油,所以這里的this跟o沒有關(guān)系,指全局對(duì)象州邢。
**大家可以思考下面這個(gè)例子的打印結(jié)果是什么儡陨??量淌?

'use strict';
function test() { 
  console.log(this);
}
setTimeout(test, 1000);

上面我提到了在嚴(yán)格模式下this是undefined,但是在setTimeout中this如果沒有指定骗村,相當(dāng)于test.apply(global);

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

var x = 9;
function test() {
  this.x = 8; //this指的構(gòu)造函數(shù)調(diào)用時(shí)實(shí)例化出來的對(duì)象
}
var a = new test();
console.log(a.x); //8
console.log(x); //9

箭頭函數(shù)

在這里我想說一下箭頭函數(shù)的好處之一 :可以改變this的指向請(qǐng)看下面兩段代碼:

var o = { 
  name: 'Jony',
  f1: function(){ 
    console.log(this); 
  },
  f2: function(){ 
    console.log(this); //o這個(gè)對(duì)象 
    var _this = this; 
    setTimeout(function(){ 
      console.log(this); //全局對(duì)象 
      console.log(_this); //o這個(gè)對(duì)象 
    }, 1000); 
  }
};
o.f2();

問題:setTimeout中的this是全局對(duì)象因此我們采用閉包的特性——把this存儲(chǔ)在內(nèi)存中,使用這種方式解決上面的問題但是在箭頭函數(shù)中我們可以更方便的解決this的指向問題,請(qǐng)看下面:

var o = { 
  name: 'Jony',
  f1: function(){ 
    console.log(this); 
  }, 
  f2: function(){ 
    console.log(this); //o這個(gè)對(duì)象 
    setTimeout(() => { 
      console.log(this); //o這個(gè)對(duì)象 
    }, 1000); 
  }
};
o.f2();//箭頭函數(shù)中的this只跟定義它時(shí)作用域中的this有關(guān)

以上是我對(duì)JS中的this淺顯的理解呀枢,僅供參考胚股!

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市裙秋,隨后出現(xiàn)的幾起案子琅拌,更是在濱河造成了極大的恐慌缨伊,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,640評(píng)論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件进宝,死亡現(xiàn)場(chǎng)離奇詭異刻坊,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)党晋,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,254評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門谭胚,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人隶校,你說我怎么就攤上這事漏益。” “怎么了深胳?”我有些...
    開封第一講書人閱讀 165,011評(píng)論 0 355
  • 文/不壞的土叔 我叫張陵绰疤,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我舞终,道長(zhǎng)轻庆,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,755評(píng)論 1 294
  • 正文 為了忘掉前任敛劝,我火速辦了婚禮余爆,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘夸盟。我一直安慰自己蛾方,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,774評(píng)論 6 392
  • 文/花漫 我一把揭開白布上陕。 她就那樣靜靜地躺著桩砰,像睡著了一般。 火紅的嫁衣襯著肌膚如雪释簿。 梳的紋絲不亂的頭發(fā)上亚隅,一...
    開封第一講書人閱讀 51,610評(píng)論 1 305
  • 那天,我揣著相機(jī)與錄音庶溶,去河邊找鬼煮纵。 笑死,一個(gè)胖子當(dāng)著我的面吹牛偏螺,可吹牛的內(nèi)容都是我干的行疏。 我是一名探鬼主播,決...
    沈念sama閱讀 40,352評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼砖茸,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼隘擎!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起凉夯,我...
    開封第一講書人閱讀 39,257評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤货葬,失蹤者是張志新(化名)和其女友劉穎采幌,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體震桶,經(jīng)...
    沈念sama閱讀 45,717評(píng)論 1 315
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡休傍,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,894評(píng)論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了蹲姐。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片磨取。...
    茶點(diǎn)故事閱讀 40,021評(píng)論 1 350
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖柴墩,靈堂內(nèi)的尸體忽然破棺而出忙厌,到底是詐尸還是另有隱情,我是刑警寧澤江咳,帶...
    沈念sama閱讀 35,735評(píng)論 5 346
  • 正文 年R本政府宣布逢净,位于F島的核電站,受9級(jí)特大地震影響歼指,放射性物質(zhì)發(fā)生泄漏爹土。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,354評(píng)論 3 330
  • 文/蒙蒙 一踩身、第九天 我趴在偏房一處隱蔽的房頂上張望胀茵。 院中可真熱鬧,春花似錦挟阻、人聲如沸琼娘。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,936評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽轨奄。三九已至,卻和暖如春拒炎,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背挨务。 一陣腳步聲響...
    開封第一講書人閱讀 33,054評(píng)論 1 270
  • 我被黑心中介騙來泰國打工击你, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人谎柄。 一個(gè)月前我還...
    沈念sama閱讀 48,224評(píng)論 3 371
  • 正文 我出身青樓丁侄,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國和親朝巫。 傳聞我的和親對(duì)象是個(gè)殘疾皇子鸿摇,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,974評(píng)論 2 355

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

  • 導(dǎo)語 不得不說,作為一名初級(jí)的前端開發(fā)者劈猿,this關(guān)鍵字這個(gè)問題對(duì)于我來說一直是一個(gè)痛點(diǎn)拙吉,什么是this潮孽?什么是函...
    Nicole_tiny閱讀 530評(píng)論 0 4
  • 在初階段我看js中的時(shí)候簡(jiǎn)直就是一臉蒙B,跟現(xiàn)在的棒子國的女人一樣筷黔,看來看去都是一個(gè)樣往史,但是根本上還是不知道出自那...
    Ziksang閱讀 753評(píng)論 2 10
  • 前言 總括:詳解JavaScript中的this的一篇總結(jié),不懂this這個(gè)難點(diǎn)佛舱,很多時(shí)候會(huì)造成一些困擾椎例,寫出一些...
    秦至閱讀 581評(píng)論 0 4
  • 1.函數(shù)調(diào)用棧和調(diào)用位置 在函數(shù)執(zhí)行的時(shí)候,會(huì)有一個(gè)活動(dòng)記錄(也叫執(zhí)行上下文)來記錄函數(shù)的調(diào)用順序请祖,這個(gè)就是函數(shù)調(diào)...
    lightNate閱讀 525評(píng)論 1 14
  • 理解用戶的更高一層境界是什么订歪? 用戶研究的思路和方法,可以用于產(chǎn)品經(jīng)理在日常工作中大部分的功能設(shè)計(jì)肆捕、系統(tǒng)設(shè)計(jì)工作刷晋。...
    NicolasFei閱讀 587評(píng)論 2 6