簡單易懂的this 的指向問題

函數(shù)的 this 關(guān)鍵字**在 JavaScript 中的表現(xiàn)略有不同吕世,此外,在嚴格模式和非嚴格模式之間也會有一些差別戴陡。

1. 無論是否在嚴格模式下塞绿,在全局執(zhí)行環(huán)境中(在任何函數(shù)體外部)this 都指向全局對象。

2. 嚴格模式下恤批,不在全局執(zhí)行環(huán)境中异吻,進入執(zhí)行環(huán)境時沒有設(shè)置 this 的值,this 會保持為 undefined喜庞。


function f2(){
  "use strict"; // 這里是嚴格模式
  return this;
}

f2() === undefined; // true

3. 重點來了诀浪, this 永遠指向調(diào)用它本身的對象,構(gòu)造函數(shù) this 指向構(gòu)造函數(shù)新創(chuàng)建的對象延都。

下面我將舉例說明這一點

函數(shù)自己調(diào)用


function f1(){
  return this;
}
//在瀏覽器中:
f1() === window;   //在瀏覽器中雷猪,全局對象是window,  f1() 相當于 window.f1();

//在Node中:
f1() === globalThis; 

當某個函數(shù)為對象的一個屬性時


var car = {
    name:'豐田',
    run() {
        console.log(this); // {name: "豐田", run: ?}   調(diào)用 run 的是 car,所以this指向car
    }
}

car.run() 

原型鏈中的 this


var o = {
  f: function() {
    return this.a + this.b;
  }
};
var p = Object.create(o);
p.a = 1;
p.b = 4;

console.log(p.f()); // 5 調(diào)用他的是 this 指向 p

作為構(gòu)造函數(shù) , this構(gòu)造函數(shù)新創(chuàng)建的對象


var Car = function(name) {
    this.name = name;
    console.log(this); // Car {name: "亞洲龍"} 
                       // Car {name: "漢蘭達"} 
}

var myCar_1 = new Car('亞洲龍');  
var myCar_2 = new Car('漢蘭達');

當一個元素被綁定事件處理函數(shù)時晰房,this指向被點擊的這個元素


var btn = document.querySelector('button');

btn.onclick = function() { 
    console.log(this); // <button>this</button> 
}

4. 箭頭函數(shù)沒有自身的this求摇,他沿用父級作用域的this。

5. 題目測試


var out = 25,
   inner = {
        out: 20,
        func: function () {
            var out = 30;
            return this.out;
        }
    };

console.log((inner.func, inner.func)());  // 25  (inner.func, inner.func) ',' 運算符返回了一個匿名函數(shù) ` inner.func`  this 指向 window
console.log(inner.func());                // 20  inner 調(diào)用 this指向 inner
console.log((inner.func)());              // 20  inner 調(diào)用 this指向 inner
console.log((inner.func = inner.func)()); // 25 (inner.func = inner.func) 返回了一個匿名函數(shù) this 指向 window

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末嫉你,一起剝皮案震驚了整個濱河市月帝,隨后出現(xiàn)的幾起案子躏惋,更是在濱河造成了極大的恐慌幽污,老刑警劉巖,帶你破解...
    沈念sama閱讀 212,884評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件簿姨,死亡現(xiàn)場離奇詭異距误,居然都是意外死亡,警方通過查閱死者的電腦和手機扁位,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,755評論 3 385
  • 文/潘曉璐 我一進店門准潭,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人域仇,你說我怎么就攤上這事刑然。” “怎么了暇务?”我有些...
    開封第一講書人閱讀 158,369評論 0 348
  • 文/不壞的土叔 我叫張陵泼掠,是天一觀的道長。 經(jīng)常有香客問我垦细,道長择镇,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,799評論 1 285
  • 正文 為了忘掉前任括改,我火速辦了婚禮腻豌,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己吝梅,他們只是感情好虱疏,可當我...
    茶點故事閱讀 65,910評論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著苏携,像睡著了一般订框。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上兜叨,一...
    開封第一講書人閱讀 50,096評論 1 291
  • 那天穿扳,我揣著相機與錄音,去河邊找鬼国旷。 笑死矛物,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的跪但。 我是一名探鬼主播履羞,決...
    沈念sama閱讀 39,159評論 3 411
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼屡久!你這毒婦竟也來了忆首?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,917評論 0 268
  • 序言:老撾萬榮一對情侶失蹤被环,失蹤者是張志新(化名)和其女友劉穎糙及,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體筛欢,經(jīng)...
    沈念sama閱讀 44,360評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡浸锨,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,673評論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了版姑。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片柱搜。...
    茶點故事閱讀 38,814評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖剥险,靈堂內(nèi)的尸體忽然破棺而出聪蘸,到底是詐尸還是另有隱情,我是刑警寧澤表制,帶...
    沈念sama閱讀 34,509評論 4 334
  • 正文 年R本政府宣布健爬,位于F島的核電站,受9級特大地震影響夫凸,放射性物質(zhì)發(fā)生泄漏浑劳。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 40,156評論 3 317
  • 文/蒙蒙 一夭拌、第九天 我趴在偏房一處隱蔽的房頂上張望魔熏。 院中可真熱鬧衷咽,春花似錦、人聲如沸蒜绽。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,882評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽躲雅。三九已至鼎姊,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間相赁,已是汗流浹背相寇。 一陣腳步聲響...
    開封第一講書人閱讀 32,123評論 1 267
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留钮科,地道東北人唤衫。 一個月前我還...
    沈念sama閱讀 46,641評論 2 362
  • 正文 我出身青樓,卻偏偏與公主長得像绵脯,于是被迫代替她去往敵國和親佳励。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 43,728評論 2 351

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

  • 一蛆挫、 普通調(diào)用方式 => window 構(gòu)造函數(shù)調(diào)用=> 實例對象赃承,原型對象里面的方法也指向?qū)嵗龑ο?對象方法...
    ticktackkk閱讀 375評論 0 0
  • 問題由來 雖然obj.foo和foo指向同一個函數(shù),但是執(zhí)行結(jié)果可能不一樣悴侵。this指的是函數(shù)運行時所在的環(huán)境瞧剖,對...
    1f7e4d5d72cf閱讀 712評論 0 0
  • 在說this的指向性問題之前,咱們先說一下函數(shù)的調(diào)用位置畜挨,調(diào)用位置就是函數(shù)在代碼中被調(diào)用的位置筒繁。 1噩凹、下面我們來看...
    越努力越幸運_952c閱讀 2,557評論 0 2
  • This指向問題 this指向什么巴元,跟函數(shù)所處得位置是沒有關(guān)系的 跟函數(shù)得調(diào)用者有關(guān)系 在嚴格模式下,與調(diào)用位置無...
    小丸子啊啊啊閱讀 269評論 0 0
  • 一:this 是在函數(shù)被調(diào)用時確定的驮宴,它的指向完全取決于函數(shù)調(diào)用的地方逮刨,而不是它被聲明的地方(除箭頭函數(shù)外)。當一...
    張艷華_zzz閱讀 251評論 0 0