資訊專欄INFORMATION COLUMN
摘要：先解釋一下第三個(gè)，這個(gè)也很簡(jiǎn)單，因?yàn)橛昧怂詫?shí)際匹配了顯示綁定，所以當(dāng)前綁定了那么輸出的肯定是?？梢娔悴恢赖倪@本書說(shuō)的很對(duì)，之所以會(huì)在出現(xiàn)箭頭函數(shù)，實(shí)質(zhì)就像用詞法作用域代替因?yàn)檫@個(gè)真的特別特別容易誤用和讓人誤解。
今天前Leader在下班前發(fā)給我一道JavaScript的題目，看到感覺很不錯(cuò)，而且我開始的時(shí)候確實(shí)也理解錯(cuò)了，覺得有必要拿出來(lái)講講，并且為此我也做錯(cuò)了地鐵，哈哈哈~
題目是這樣的：
var length = 10;
function fn() {
console.log(this.length)
};
var obj = {
length: 5,
method: function (fn) {
fn();
arguments[0]();
fn.call(obj, 12);
}
};
obj.method(fn, 1);
請(qǐng)問(wèn)輸出是什么，當(dāng)時(shí)那手機(jī)看的時(shí)候給出了答案
10 10 5
實(shí)際上并不是如此，答案是：
10 2 5
仔細(xì)分析了一下才知道原因，首先介紹一下四種this的類型：
默認(rèn)綁定
隱式綁定
顯示綁定
new綁定
其中，默認(rèn)綁定就是什么都匹配不到的情況下，非嚴(yán)格模式this綁定到全局對(duì)象window或者global,嚴(yán)格模式綁定到undefined;隱式綁定就是函數(shù)作為對(duì)象的屬性，通過(guò)對(duì)象屬性的方式調(diào)用，這個(gè)時(shí)候this綁定到對(duì)象;顯示綁定就是通過(guò)apply和call調(diào)用的方式;new綁定就是通過(guò)new操作符時(shí)將this綁定到當(dāng)前新創(chuàng)建的對(duì)象中，它們的匹配有限是是從小到大的。
那么現(xiàn)在來(lái)解釋一下：
obj.method(fn, 1);
上述執(zhí)行其實(shí)對(duì)應(yīng)的是下面三條語(yǔ)句：
fn(); arguments[0](); fn.call(obj, 12);
通過(guò)將函數(shù)賦值給函數(shù)參數(shù)(fn)，然后調(diào)用fn,這個(gè)時(shí)候能匹配到的this類型就是第一條默認(rèn)綁定，因?yàn)閷?shí)在非嚴(yán)格模式下，所以this綁定的是window，當(dāng)然首先輸出的是10。
先解釋一下第三個(gè)，這個(gè)也很簡(jiǎn)單，因?yàn)橛昧?b>call,所以實(shí)際匹配了顯示綁定，所以當(dāng)前this綁定了obj,那么輸出的肯定是2。
下面著重解釋一下第二個(gè)，這個(gè)我當(dāng)時(shí)理解成和第一次完全一樣，但實(shí)際并不是的，其實(shí)在JavaScript中數(shù)組算是一種特殊的對(duì)象（關(guān)于JavaScript對(duì)象的部分，我現(xiàn)在還在寫，下一篇就會(huì)出的），arguments[0]其實(shí)就是通過(guò)對(duì)象的屬性去調(diào)用（數(shù)組的默認(rèn)屬性類型是數(shù)值而普通對(duì)象的屬性類型是字符串），那么現(xiàn)在其實(shí)運(yùn)用的是規(guī)則2，this被綁定到arguments上，而arguments確實(shí)存在一個(gè)length屬性，并且值為2（這個(gè)別告訴我你看不出來(lái)），所以輸出的肯定就是2啦。
可見《你不知道的JavaScript》這本書說(shuō)的很對(duì)，之所以會(huì)在ES6出現(xiàn)箭頭函數(shù)，實(shí)質(zhì)就像用詞法作用域代替this,因?yàn)檫@個(gè)真的特別特別容易誤用和讓人誤解。
歡迎大家到我的個(gè)人博客看看，https://mrerhu.github.io ?
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/86725.html
摘要：返回值返回值根據(jù)傳入的參數(shù)類型和規(guī)則的不同，返回的內(nèi)容不同，但總體來(lái)說(shuō)，它是返回一個(gè)對(duì)象，而不是索引，如果沒匹配到任何符合條件的字符串，則返回。 本文發(fā)布在我的博客一道小小的題目引發(fā)對(duì)javascript支持正則表達(dá)式相關(guān)方法的探討許可協(xié)議: 署名-非商業(yè)性使用-禁止演繹 4.0 國(guó)際 轉(zhuǎn)載請(qǐng)保留原文鏈接及作者。 以前對(duì)于正則是非常懼怕的，因?yàn)榭床欢蛯W(xué)不會(huì)。但最近項(xiàng)目中頻繁的...
摘要：忍者秘籍一書中，對(duì)于柯里化的定義如下在一個(gè)函數(shù)中首先填充幾個(gè)參數(shù)然后再返回一個(gè)新函數(shù)的技術(shù)稱為柯里化?；氐轿覀兊念}目本身，其實(shí)根據(jù)測(cè)試用例我們可以發(fā)現(xiàn)，函數(shù)的要求就是接受單一函數(shù)，例如但是與柯里化不同之處在于，柯里化返回的一個(gè)新函數(shù)。 歡迎大家再一次來(lái)到我的文章專欄:從面試題中我們能學(xué)到什么，各位同行小伙伴是否已經(jīng)開始了悠閑的春節(jié)假期呢?在這里提前祝大家雞年大吉吧~哈哈，之前有人說(shuō)...
摘要：上周末看這篇文章時(shí)，偶有靈光，所以，分享出來(lái)給大家一起看看前端面試四月二十家前端面試題分享請(qǐng)各位讀者添加一下作者的微信公眾號(hào)，以后有新的文章，將在微信公眾號(hào)直接推送給各位，非常感謝。 前端切圖神器 avocode 有了這個(gè)神器，切圖再也腰不酸，腿不疼了。 這一次，徹底弄懂 JavaScript 執(zhí)行機(jī)制 本文的目的就是要保證你徹底弄懂javascript的執(zhí)行機(jī)制，如果讀完本文還不懂，...
摘要：例如，，則的其中一種組合是的子串，然后返回。如果從題目給出的例子來(lái)窮舉，一共種組合，很容易窮舉出來(lái)，但是字符串長(zhǎng)度非常大的時(shí)候，怎么辦呢所以，窮舉的辦法被我排除了。 題目要求 這道算法題在前端面試中可能遇到，據(jù)說(shuō)某條出過(guò)這題。 查找字符串B的字符任意一種組合是否是字符串A的子串。例如 A=abc123，B=cba，則B的其中一種組合abc是A的子串，然后返回true。 算法思路 題目的...
閱讀 2047·2021-11-22 09:34
閱讀 3379·2021-09-28 09:35
閱讀 13922·2021-09-09 11:34
閱讀 3696·2019-08-29 16:25
閱讀 2899·2019-08-29 15:23
閱讀 2103·2019-08-28 17:55
閱讀 2500·2019-08-26 17:04
閱讀 3101·2019-08-26 12:21
