說起this磺浙,我突然想到一個外國佬學(xué)中文的段子:
解釋文中每個意思的意思: 阿呆送領(lǐng)導(dǎo)紅包。領(lǐng)導(dǎo):你什么意思挟纱?阿呆:意思意思。領(lǐng)導(dǎo)(打開看):你這就不夠意思了腐宋。阿呆:小意思紊服,小意思檀轨。領(lǐng)導(dǎo):你這人真沒意思。阿呆:其實沒有別的意思围苫。領(lǐng)導(dǎo):那我就不好意思了。老外淚流滿面撤师,交白卷回國剂府。
在學(xué)前端的時候,有的時候咱們也會遇到類似的問題剃盾,同樣的一個this腺占,不同的地方就顯示不同的效果,在我們的抓耳撓腮中痒谴,從入門到放棄衰伯,最后回家種田。無奈家中沒田积蔚,只能硬著頭皮學(xué)下去意鲸,所以花了一早上,把這個this給弄明白了尽爆。
讓我們先看看this是啥怎顾,
this對象是在運行時基于函數(shù)的執(zhí)行環(huán)境的上下文(context): 在全局函數(shù)或者匿名函數(shù)中,this等于window漱贱,當(dāng)函數(shù)被作為某個對象調(diào)用時槐雾,等于那個對象
看著也不難啊,所以真正讓人為難的不是this本身幅狮,其罪在于函數(shù)募强,如果不是函數(shù)的調(diào)用,this老老實實的崇摄,讓我們用console.log看看其原本是什么模樣:
看上去倒是不那么面目可憎擎值,倒是可以頒發(fā)一張良民證。
那么身為柯南(小學(xué)生)的我表示真相只有一個逐抑,是因為函數(shù)幅恋。
來人,傳函數(shù)泵肄!
出現(xiàn)了四個身影:函數(shù)調(diào)用
捆交,方法調(diào)用
,隱式調(diào)用
和構(gòu)造函數(shù)調(diào)用
怎么上來四個大漢腐巢,我不是傳函數(shù)的嘛品追?(WTF!!)
稟大人,是因為這個函數(shù)實在是太狡猾了冯丙,由一化四肉瓦,好不容易才把其全部繳獲遭京,你們還不老實招了!不然老虎棍泞莉,辣椒水伺候哪雕!
第一個開口是個憨厚的大漢,此人名叫——函數(shù)調(diào)用
其表現(xiàn)的是:func(p1, p2)
鲫趁,咱們常用的alert("威武~~~斯嚎!")
就是這類。
來挨厚,我問你堡僻,你的this是怎么個回事```
回稟大人,小人住在陳家溝,是一個農(nóng)民,我在家里好好干著活要出,就被抓來。
俺不懂什么this牲阁,小人啥也不懂,我只知道要聽window的話壤躲,要是在嚴(yán)格模式下咨油,就只能undefined了```
原來如此,經(jīng)過我縝密的分析柒爵,在函數(shù)調(diào)用中役电,this等于undefined或者null,其自動轉(zhuǎn)化為window棉胀。如果在最嚴(yán)格模式中法瑟,undefined和null就不能自動轉(zhuǎn)化為window。
var numbers = {
numberA: 5,
numberB: 10,
sum: function() {
console.log(this === numbers); // => true
function calculate()
console.log(this === numbers ); // => false is window
return this.numberA + this.numberB;
}
return calculate();
}
};
numbers.sum();
在上面的代碼中唁奢,calculate
中的this
是window
而不是想要的number
面對這樣的問題霎挟,我們應(yīng)該怎么辦呢?一籌莫展之際麻掸。酥夭。。
第三位大漢開口了 頭上四個大字——隱式調(diào)用
經(jīng)過激烈的言語交鋒脊奋,我算是明白了隱式調(diào)用時怎么個回事熬北,甚至都直接搞定了方法調(diào)用,咱們先說說隱式調(diào)用诚隙。
首先讶隐,隱式調(diào)用最常用的就是call,func.call(context, p1, p2)
久又,我們一眼就能看出this巫延,就是傳入的第一個函數(shù)context
效五。
再者,其實函數(shù)調(diào)用和方法調(diào)用都可以通過call來寫出真正的content炉峰,從而鎖定this畏妖。
函數(shù)調(diào)用:func(p1,p2) => func.call(window,p1,p2)
方法調(diào)用:obj.child.method(p1,p2) => obj.child.method.call(obj.child,p1,p2)
如此一來,一下子就變得明朗了起來疼阔。
這么一來戒劫,函數(shù)調(diào)用,方法調(diào)用竿开,隱式調(diào)用(明明是最清楚的調(diào)用谱仪,怎么叫隱式調(diào)用玻熙,這是在嘲諷否彩?)都明白了。那么還有一個構(gòu)造函數(shù)調(diào)用嗦随,改怎么說呢列荔?
構(gòu)造函數(shù)調(diào)用,移花接木惹人愁
首先是有個構(gòu)造原型枚尼,然后new了個新的函數(shù)贴浙,這個this就是新的函數(shù)了,這么簡單署恍?
對呀就這么簡單崎溃。
還有最后一個就是新出的箭頭函數(shù),本身不改變this盯质,在哪就是哪的this袁串。