我的JS筆記 -- this


this引用的是函數(shù)據(jù)以執(zhí)行的環(huán)境對(duì)象郭宝。雖然函數(shù)的作用域是在聲明時(shí)決定的涡贱,但是this實(shí)際上是在函數(shù)被調(diào)用時(shí)發(fā)生的綁定钓葫,它指向什么完全取決于函數(shù)在哪里被調(diào)用,所以this的指向是可變的嵌灰。

this是函數(shù)的內(nèi)部屬性弄匕,所以this的使用環(huán)境是在函數(shù)中。

this的指向是一個(gè)對(duì)象沽瞭。

this綁定規(guī)則

判斷函數(shù)中this綁定的對(duì)象規(guī)則:

  1. 函數(shù)是否在new中調(diào)用(new 綁定)迁匠?如果是的話this綁定的是新創(chuàng)建的對(duì)象;
  2. 函數(shù)是否通過(guò)call驹溃、apply(顯式綁定)或者硬綁定調(diào)用城丧? 如果是的話,this綁定的是指定的對(duì)象豌鹤;
  3. 函數(shù)是否在某個(gè)上下文對(duì)象中調(diào)用(也就是函數(shù)作為某個(gè)對(duì)象的方法調(diào)用)(隱式綁定)亡哄?如果是的話,this綁定的是那個(gè)上下文對(duì)象布疙;
  4. 如果都不是的話蚊惯, 使用默認(rèn)綁定。如果在嚴(yán)格模式下灵临,就綁定到undefined截型,否則綁定到全局對(duì)象;

從上至下逐條判斷儒溉,就能正確判斷this的指向宦焦。

  • new 綁定,構(gòu)造函數(shù)生成實(shí)例中調(diào)用顿涣;

    function F() {
    this.a = 1;
    this.sayA = function () {
    console.log(this.a);
    }
    }
    var f = new F();
    f.sayA(); // 1

  • call波闹、apply調(diào)用(顯式綁定);

    • call园骆、apply接收兩個(gè)參數(shù)舔痪,第一個(gè)是參數(shù)是對(duì)象寓调,函數(shù)this就會(huì)指向這個(gè)對(duì)象锌唾,如果你傳入了一個(gè)原始值(字符串類型、布爾類型或者數(shù)字類型)來(lái)當(dāng)作 this 的綁定對(duì)象夺英,這個(gè)原始值會(huì)被轉(zhuǎn)換成它的對(duì)象形式(也就是 new String(..)晌涕、new Boolean(..)或者new Number(..));第二個(gè)參數(shù)是函數(shù)調(diào)用的痛悯;

        var a = 1;
        var obj = {
            a: 2
        };
        function f() {
            console.log(this.a);
        }
        f(); // 1
        f.call(obj); // 2余黎,硬性將f的this綁定到指定對(duì)象
        f.apply(obj); // 2
      
    • bind,bind的作用與call载萌、apply一樣惧财,都是為函數(shù)指定執(zhí)行環(huán)境對(duì)象巡扇,但是bind返回的是一個(gè)新函數(shù),而call和apply會(huì)直接執(zhí)行返回結(jié)果垮衷;

        var a = 1;
        var obj = {
            a: 2
        };
        function f() {
            console.log(this.a);
        }
        f(); // 1
        var f2 = f.bind(obj); // 返回的是一個(gè)新函數(shù)厅翔,所以可以將函數(shù)保存至變量,方便以后調(diào)用
        f2(); // 2
      
    • 如果你把null或者undefined作為 this 的綁定對(duì)象傳入call搀突、apply或者bind刀闷,這些值在調(diào)用時(shí)會(huì)被忽略,實(shí)際應(yīng)用的是默認(rèn)綁定規(guī)則仰迁;

  • 作為對(duì)象方法調(diào)用(隱式綁定)甸昏;

      var a = 1;
      function f() {
          console.log(this.a);
      }
      var obj = {
          a: 2,
          f: f // 將對(duì)象的方法指向函數(shù)
      };
      obj.f(); // 2,當(dāng)函數(shù)作為對(duì)象方法時(shí)徐许,this就指向當(dāng)前對(duì)象
    
      var f2 = obj.f;
      f2(); //1施蜜,相當(dāng)于直接調(diào)用f,所以this指向全局對(duì)象
    
      var obj2 = {
          a: 3,
          f: obj.f
      };
      obj2.f(); // 3雌隅,作為對(duì)象方法調(diào)用
    
  • 默認(rèn)函數(shù)調(diào)用花墩,函數(shù)獨(dú)立調(diào)用;

      var a = 1; // 全局變量會(huì)成為全局對(duì)象的屬性澄步,所以當(dāng)this指向全局對(duì)象時(shí)能夠訪問(wèn)
      function f() {
          console.log(this.a);
      }
      f(); // 1冰蘑,普通的函數(shù)調(diào)用,this指向全局對(duì)象
    

更多文章在 這里 村缸,覺得不錯(cuò)希望點(diǎn)個(gè) star

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末祠肥,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子梯皿,更是在濱河造成了極大的恐慌仇箱,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,324評(píng)論 6 498
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件东羹,死亡現(xiàn)場(chǎng)離奇詭異剂桥,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)属提,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,356評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門权逗,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人冤议,你說(shuō)我怎么就攤上這事斟薇。” “怎么了恕酸?”我有些...
    開封第一講書人閱讀 162,328評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵堪滨,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我蕊温,道長(zhǎng)袱箱,這世上最難降的妖魔是什么遏乔? 我笑而不...
    開封第一講書人閱讀 58,147評(píng)論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮发笔,結(jié)果婚禮上按灶,老公的妹妹穿的比我還像新娘。我一直安慰自己筐咧,他們只是感情好鸯旁,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,160評(píng)論 6 388
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著量蕊,像睡著了一般铺罢。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上残炮,一...
    開封第一講書人閱讀 51,115評(píng)論 1 296
  • 那天韭赘,我揣著相機(jī)與錄音,去河邊找鬼势就。 笑死泉瞻,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的苞冯。 我是一名探鬼主播袖牙,決...
    沈念sama閱讀 40,025評(píng)論 3 417
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼舅锄!你這毒婦竟也來(lái)了鞭达?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 38,867評(píng)論 0 274
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤皇忿,失蹤者是張志新(化名)和其女友劉穎畴蹭,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體鳍烁,經(jīng)...
    沈念sama閱讀 45,307評(píng)論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡叨襟,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,528評(píng)論 2 332
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了幔荒。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片糊闽。...
    茶點(diǎn)故事閱讀 39,688評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖铺峭,靈堂內(nèi)的尸體忽然破棺而出墓怀,到底是詐尸還是另有隱情汽纠,我是刑警寧澤卫键,帶...
    沈念sama閱讀 35,409評(píng)論 5 343
  • 正文 年R本政府宣布,位于F島的核電站虱朵,受9級(jí)特大地震影響莉炉,放射性物質(zhì)發(fā)生泄漏钓账。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,001評(píng)論 3 325
  • 文/蒙蒙 一絮宁、第九天 我趴在偏房一處隱蔽的房頂上張望梆暮。 院中可真熱鬧,春花似錦绍昂、人聲如沸啦粹。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,657評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)唠椭。三九已至,卻和暖如春忍饰,著一層夾襖步出監(jiān)牢的瞬間贪嫂,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,811評(píng)論 1 268
  • 我被黑心中介騙來(lái)泰國(guó)打工艾蓝, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留力崇,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 47,685評(píng)論 2 368
  • 正文 我出身青樓赢织,卻偏偏與公主長(zhǎng)得像亮靴,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子于置,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,573評(píng)論 2 353

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

  • 官方中文版原文鏈接 感謝社區(qū)中各位的大力支持俱两,譯者再次奉上一點(diǎn)點(diǎn)福利:阿里云產(chǎn)品券饱狂,享受所有官網(wǎng)優(yōu)惠,并抽取幸運(yùn)大...
    HetfieldJoe閱讀 6,926評(píng)論 15 54
  • 參考鏈接 this 關(guān)鍵字 深入理解上下文this 慕課視頻 基本含義 以上示例中實(shí)際都是執(zhí)行的showName方...
    day_day_up閱讀 799評(píng)論 2 3
  • Q&A: 1. apply宪彩、call 有什么作用休讳,什么區(qū)別? apply: 定義:fun.apply(thisAr...
    進(jìn)擊的阿群閱讀 367評(píng)論 0 0
  • 轉(zhuǎn)換為call/apply來(lái)看待this的值 徹底搞懂this 阮一峰-this原理 this 由于運(yùn)行期綁定的特...
    DeeJay_Y閱讀 749評(píng)論 0 0
  • 與其他語(yǔ)言相比尿孔,函數(shù)的this關(guān)鍵字在JavaScript中的表現(xiàn)略有不同俊柔,此外,在嚴(yán)格模式和非嚴(yán)格模式之間也會(huì)有...
    codingC閱讀 572評(píng)論 0 0