徹底理解js中this的指向問題

首先需要理解:

1.this的指向在函數(shù)定義的時候并不能確定this的指向

2.this的最終指向是那個調(diào)用它的直接對象(注意兩個詞 :1.最終指向 2. 直接對象)

列子1
function a () {
       var user = '趙老二';
       console.log(this.user)//undefined
       console.log(this)//window
   }
   a()   //a()==window.a()

按照上面手的this指向調(diào)用它的直接對象恭金,那么這個調(diào)用的對象為window她按,所以this指向window

列子2
let a = {
        user:'趙老二',
        fn: function () {
            console.log(this.user)//趙老二
            console.log(this)//{user: "趙老二", fn: ?}對象
        }
    }

    a.fn() 

fn()的直接調(diào)用對象是a,所有this指向a随闺,這里再次強(qiáng)調(diào)一點,this的指向在函數(shù)創(chuàng)建的時候是決定不了的位仁,在調(diào)用的時候才能決定携悯,誰調(diào)用的就指向誰,一定要搞清楚這個涨岁。

列子3
let a = {
        user:'趙老二',
        fn: function () {
            console.log(this.user)//undefined
            console.log(this)//window
        }
    }
  let b=a.fn
  b()

這里this指向的是window,是不是有些蒙了吉嚣?其實是因為你沒有理解一句話梢薪,這句話同樣至關(guān)重要。
this永遠(yuǎn)指向最后調(diào)用它的那個對象尝哆,這里b=a.fn并沒有執(zhí)行秉撇,只是一個賦值的過程,b()才進(jìn)行調(diào)用秋泄,并且在window下直接調(diào)用的所以this指向window

列子5
var o = {
    a:10,
    b:{
        fn:function(){
            console.log(this.a); //undefined
            console.log(this);//{fn: ?}
        }
    }
}
o.b.fn();

這里要記住一句話琐馆,this指向的永遠(yuǎn)是調(diào)用它的直接對象,所以上面的this指向的是b對象

再次說明:this指向的是最終調(diào)用該方法的直接對象印衔;

構(gòu)造函數(shù)版的this

function Fn(){
    this.user = "趙老二";
}
var a = new Fn();
console.log(a.user); //趙老二

這里之所以對象a可以點出函數(shù)Fn里面的user是因為new關(guān)鍵字可以改變this的指向,將這個this指向?qū)ο骯姥敛,為什么我說a是對象奸焙,因為用了new關(guān)鍵字就是創(chuàng)建一個對象實例,理解這句話可以想想我們的例子3彤敛,我們這里用變量a創(chuàng)建了一個Fn的實例(相當(dāng)于復(fù)制了一份Fn到對象a里面)与帆,此時僅僅只是創(chuàng)建,并沒有執(zhí)行墨榄,而調(diào)用這個函數(shù)Fn的是對象a玄糟,那么this指向的自然是對象a,那么為什么對象a中會有user袄秩,因為你已經(jīng)復(fù)制了一份Fn函數(shù)到對象a中阵翎,用了new關(guān)鍵字就等同于復(fù)制了一份逢并。

添加手動實現(xiàn)new的過程
    function Fn() {
        this.user ='趙老二';
    }
    function newfn(fn) {
        let obj = {};
        //此外因為 shift 會修改原數(shù)組,所以 arguments 會被去除第一個參數(shù)
        const Constructor = [].shift.call(arguments)
        // 將obj的原型指向構(gòu)造函數(shù)的原型對象郭卫,這樣obj就可以訪問構(gòu)造函數(shù)原型上的屬性
        obj.__proto__ = Constructor.prototype
        // 將構(gòu)造函數(shù)的this指向obj乃摹,這樣obj就可以訪問到構(gòu)造函數(shù)中的屬性
        Constructor.apply(obj, arguments);
        return obj;
    }
    newfn(Fn) //Fn{user:'趙老二'}

更新一個小問題當(dāng)this碰到return時

function fn()  
{  
    this.user = '趙老二';  
    return {};  
}
var a = new fn;  
console.log(a.user); //undefined
function fn()  
{  
    this.user = '趙老二';  
    return function(){};
}
var a = new fn;  
console.log(a.user); //undefined

再來

function fn()  
{  
    this.user = '趙老二';  
    return 1;  
}
var a = new fn;  
console.log(a.user); //趙老二
function fn()  
{  
    this.user = '趙老二';  
    return undefined;
}
var a = new fn;  
console.log(a.user); //趙老二
這是什么原因呢陵像?如果返回值是一個對象,那么this指向的就是那個返回的對象,如果返回值不是一個對象那么this還是指向函數(shù)的實例烁试。

以上只是個人關(guān)于this的指向問題的一些理解,歡迎評論留言一起討論饮怯。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末废境,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子贰盗,更是在濱河造成了極大的恐慌许饿,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,122評論 6 505
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件童太,死亡現(xiàn)場離奇詭異米辐,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)书释,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,070評論 3 395
  • 文/潘曉璐 我一進(jìn)店門翘贮,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人爆惧,你說我怎么就攤上這事狸页。” “怎么了扯再?”我有些...
    開封第一講書人閱讀 164,491評論 0 354
  • 文/不壞的土叔 我叫張陵芍耘,是天一觀的道長。 經(jīng)常有香客問我熄阻,道長斋竞,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,636評論 1 293
  • 正文 為了忘掉前任秃殉,我火速辦了婚禮坝初,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘钾军。我一直安慰自己鳄袍,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 67,676評論 6 392
  • 文/花漫 我一把揭開白布吏恭。 她就那樣靜靜地躺著拗小,像睡著了一般。 火紅的嫁衣襯著肌膚如雪樱哼。 梳的紋絲不亂的頭發(fā)上哀九,一...
    開封第一講書人閱讀 51,541評論 1 305
  • 那天剿配,我揣著相機(jī)與錄音,去河邊找鬼勾栗。 笑死惨篱,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的围俘。 我是一名探鬼主播砸讳,決...
    沈念sama閱讀 40,292評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼界牡!你這毒婦竟也來了簿寂?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,211評論 0 276
  • 序言:老撾萬榮一對情侶失蹤宿亡,失蹤者是張志新(化名)和其女友劉穎常遂,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體挽荠,經(jīng)...
    沈念sama閱讀 45,655評論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡克胳,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,846評論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了圈匆。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片漠另。...
    茶點故事閱讀 39,965評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖跃赚,靈堂內(nèi)的尸體忽然破棺而出笆搓,到底是詐尸還是另有隱情,我是刑警寧澤纬傲,帶...
    沈念sama閱讀 35,684評論 5 347
  • 正文 年R本政府宣布满败,位于F島的核電站,受9級特大地震影響叹括,放射性物質(zhì)發(fā)生泄漏算墨。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,295評論 3 329
  • 文/蒙蒙 一汁雷、第九天 我趴在偏房一處隱蔽的房頂上張望净嘀。 院中可真熱鬧,春花似錦摔竿、人聲如沸面粮。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,894評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至稍走,卻和暖如春袁翁,著一層夾襖步出監(jiān)牢的瞬間柴底,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,012評論 1 269
  • 我被黑心中介騙來泰國打工粱胜, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留柄驻,地道東北人。 一個月前我還...
    沈念sama閱讀 48,126評論 3 370
  • 正文 我出身青樓焙压,卻偏偏與公主長得像鸿脓,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子涯曲,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,914評論 2 355