尋找this的指向總結(jié) js

一输钩、this是什么?

this是指包含它的函數(shù)作為方法被調(diào)用時所屬的對象仲智。

二买乃、由new調(diào)用(new綁定),綁定到新創(chuàng)建的對象

new表達式:

function foo(a) {
 this.a = a;
}
var bar = new foo( 2 );
console.log( bar.a ); // 2
三钓辆、由call 剪验、apply、bind 調(diào)用(顯示綁定)前联,綁定到指定的對象

顯示綁定:可以直接指定this的綁定對象功戚,例如call()、apply()似嗤。

1.call ( 傳的this啸臀,參數(shù)用逗號隔開 )
2.aplay(傳的this,【參數(shù)用數(shù)組形式】)
3.bind 返回的是一個新的函數(shù)烁落,必須調(diào)用它才會被執(zhí)行乘粒,它的參數(shù)和 call 一樣。

注意:
如果第一個參數(shù)傳的是null伤塌,和undefined 灯萍,this會指向window;
如果是number每聪、string旦棉、boolean會轉(zhuǎn)向包裝類型。

四熊痴、由上下文調(diào)用(隱式綁定)他爸,綁定到那個上下文對象

隱式綁定:會把函數(shù)調(diào)用的this綁定到這個上下文對象。
注意:隱式綁定的函數(shù)如果丟失了綁定的對象果善,就會應用默認綁定,從而吧this綁定到全局對象或者undefined上系谐,取決于是否是嚴格模式巾陕。

function foo() {
    console.log( this.a );
}

var obj = {
    a: 2,
    foo: foo
};

obj.foo(); // 2

下面的this的指向是window讨跟,并不是foo。

function foo(num) {
    console.log( "foo: " + num );

    // keep track of how many times `foo` is called
    this.count++;
}

foo.count = 0;

var i;

for (i=0; i<10; i++) {
    if (i > 5) {
        foo( i );
    }
}
// foo: 6
// foo: 7
// foo: 8
// foo: 9

// how many times was `foo` called?
console.log( foo.count ); // 0 -- WTF?        
image.png
五鄙煤、用 call-site 和 call-stack 來查找上下文調(diào)用時this的指向

call-site:調(diào)用位置晾匠,函數(shù)在代碼中被調(diào)用的位置(不是聲明的位置)。
call-stack:調(diào)用棧梯刚,就是為了到達當前執(zhí)行位置所調(diào)用的所有函數(shù)凉馆。可以從調(diào)用棧中分析出真正的調(diào)用位置亡资,因為它決定了this的綁定澜共。

function foo() {
    console.log( this.a );
}

var obj2 = {
    a: 42,
    foo: foo
};

var obj1 = {
    a: 2,
    obj2: obj2
};

obj1.obj2.foo(); // 42
function foo() {
 console.log( this.a );
}
var obj = {
 a: 2,
 foo: foo
};
var bar = obj.foo; // function reference/alias!
var a = "oops, global"; // `a` also property on global object
bar(); // 調(diào)用位置  "oops, global" 

這里bar是obj.foo的一個引用,它引用的是foo函數(shù)本身锥腻,因此此時的bar()其實是一個不帶任何修飾的函數(shù)調(diào)用嗦董。

六、默認綁定

如果上面三種綁定方法都不是的話瘦黑,使用默認綁定京革。如果在嚴格模式下,就綁定到 undefined 幸斥,否則綁定到全局對象匹摇。

  1. 在全局范圍內(nèi)聲明的變量,就是同名全局對象屬性的同義詞
function foo() {
    console.log( this );
    console.log( this.a );
}
var a = 2;
foo();// 2
  1. 在嚴格模式下甲葬,全局對象不符合默認綁定的條件廊勃,因此將this設置為undefined
function foo() {
 "use strict";
 console.log( this.a );
}
var a = 2;
foo(); // TypeError: `this` is `undefined`
  1. 這個嚴格模式的作用區(qū)域,并沒有在foo中演顾。
function foo() {
    console.log( this.a );
}
var a = 2;
(function(){
    "use strict";
    foo(); // 2
})();

注意:有些調(diào)用可能在無意中使用默認綁定規(guī)則供搀。如果想保護全局對象,可以創(chuàng)建一個空對象钠至,比如 Object.create(unll)葛虐。

七、ES6中箭頭函數(shù)

ES6中箭頭函數(shù)并不會使用四種標準的綁定規(guī)則棉钧,而是根據(jù)當前的詞法作用域來決定this

var obj = {
      say: function () {
        setTimeout(() => {
          //  this指向obj,箭頭函數(shù)是根據(jù)當前的詞法作用域來決定this屿脐。
            console.log(this == obj);
        }, 0)
      }
    }
obj.say();
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市宪卿,隨后出現(xiàn)的幾起案子的诵,更是在濱河造成了極大的恐慌,老刑警劉巖佑钾,帶你破解...
    沈念sama閱讀 222,729評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件西疤,死亡現(xiàn)場離奇詭異,居然都是意外死亡休溶,警方通過查閱死者的電腦和手機代赁,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,226評論 3 399
  • 文/潘曉璐 我一進店門扰她,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人芭碍,你說我怎么就攤上這事徒役。” “怎么了窖壕?”我有些...
    開封第一講書人閱讀 169,461評論 0 362
  • 文/不壞的土叔 我叫張陵忧勿,是天一觀的道長。 經(jīng)常有香客問我瞻讽,道長鸳吸,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,135評論 1 300
  • 正文 為了忘掉前任卸夕,我火速辦了婚禮层释,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘快集。我一直安慰自己贡羔,他們只是感情好,可當我...
    茶點故事閱讀 69,130評論 6 398
  • 文/花漫 我一把揭開白布个初。 她就那樣靜靜地躺著乖寒,像睡著了一般。 火紅的嫁衣襯著肌膚如雪院溺。 梳的紋絲不亂的頭發(fā)上楣嘁,一...
    開封第一講書人閱讀 52,736評論 1 312
  • 那天,我揣著相機與錄音珍逸,去河邊找鬼逐虚。 笑死,一個胖子當著我的面吹牛谆膳,可吹牛的內(nèi)容都是我干的叭爱。 我是一名探鬼主播,決...
    沈念sama閱讀 41,179評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼漱病,長吁一口氣:“原來是場噩夢啊……” “哼买雾!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起杨帽,我...
    開封第一講書人閱讀 40,124評論 0 277
  • 序言:老撾萬榮一對情侶失蹤漓穿,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后注盈,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體晃危,經(jīng)...
    沈念sama閱讀 46,657評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,723評論 3 342
  • 正文 我和宋清朗相戀三年老客,在試婚紗的時候發(fā)現(xiàn)自己被綠了山害。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片纠俭。...
    茶點故事閱讀 40,872評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡沿量,死狀恐怖浪慌,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情朴则,我是刑警寧澤权纤,帶...
    沈念sama閱讀 36,533評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站乌妒,受9級特大地震影響汹想,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜撤蚊,卻給世界環(huán)境...
    茶點故事閱讀 42,213評論 3 336
  • 文/蒙蒙 一古掏、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧侦啸,春花似錦槽唾、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,700評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至忘闻,卻和暖如春钝计,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背齐佳。 一陣腳步聲響...
    開封第一講書人閱讀 33,819評論 1 274
  • 我被黑心中介騙來泰國打工私恬, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人炼吴。 一個月前我還...
    沈念sama閱讀 49,304評論 3 379
  • 正文 我出身青樓本鸣,卻偏偏與公主長得像,于是被迫代替她去往敵國和親缺厉。 傳聞我的和親對象是個殘疾皇子永高,可洞房花燭夜當晚...
    茶點故事閱讀 45,876評論 2 361

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

  • 1.概念 在JavaScript中,this 是指當前函數(shù)中正在執(zhí)行的上下文環(huán)境提针,因為這門語言擁有四種不同的函數(shù)調(diào)...
    BluesCurry閱讀 1,135評論 0 2
  • 關于 this this 關鍵字是 JavaScript 中最復雜的機制之一命爬。它是一個很特別的關鍵字,被自動定義在...
    游學者灬墨槿閱讀 573評論 1 2
  • 函數(shù)和對象 1辐脖、函數(shù) 1.1 函數(shù)概述 函數(shù)對于任何一門語言來說都是核心的概念饲宛。通過函數(shù)可以封裝任意多條語句,而且...
    道無虛閱讀 4,585評論 0 5
  • 1. this之謎 在JavaScript中嗜价,this是當前執(zhí)行函數(shù)的上下文艇抠。因為JavaScript有4種不同的...
    百里少龍閱讀 1,011評論 0 3
  • 特別說明家淤,為便于查閱异剥,文章轉(zhuǎn)自https://github.com/getify/You-Dont-Know-JS...
    殺破狼real閱讀 697評論 0 1