7個關于"this"面試題，你知道幾個

在javascript中，​<code>​this​</code>​ 表示函數調用上下文。​<code>​this​</code>​難點在于它有一個複雜的行為，這也是面試中經常被考的點。

本文列舉​<code>​7​</code>​個關于​<code>​this​</code>​有趣的面試問題:

問題1：變量 vs 屬性

問題2：cat 的名字

問題3：延遲打招呼

問題4：人工方法

問題5：問候和告别

問題6：棘手的 length

問題7：調用參數

下面的列印結果是啥：

答案：​<code>​'hello, world!'​</code>​

​<code>​object.getmessage()​</code>​是一個方法調用，此時的 ​<code>​this​</code>​ 表示 ​<code>​object​</code>​。

方法還有一個變量聲明​<code>​const message = 'hello, earth!'​</code>​。這個變量都不會影響​<code>​this.message​</code>​的值。

下面代碼列印什麼：

答案：​<code>​'fluffy'​</code>​ 和 ​<code>​'fluffy'​</code>​

當函數作為構造函數​<code>​new pet('fluffy')​</code>​調用時，構造函數内部的​<code>​this​</code>​等于構造的對象

​<code>​pet​</code>​構造函數中的​<code>​this.name = name​</code>​表達式在構造的對象上建立​<code>​name​</code>​屬性。

​<code>​this.getname = () =&gt; this.name​</code>​在構造的對象上建立方法​<code>​getname​</code>​。 而且由于使用了箭頭函數，箭頭函數内部的​<code>​this​</code>​值等于外部作用域的​<code>​this​</code>​值, 即 ​<code>​pet​</code>​。

調用​<code>​cat.getname()​</code>​以及​<code>​getname()​</code>​會傳回表達式​<code>​this.name​</code>​，其計算結果為​<code>​'fluffy'​</code>​。​​前端教育訓練​​

答案：1秒後，列印 ​<code>​undefined​</code>​。

盡管​<code>​settimeout()​</code>​函數使用​<code>​object.logmessage​</code>​作為回調，但仍将​<code>​object.logmessage​</code>​用作正常函數，而不是方法。

在正常函數調用期間，​<code>​this​</code>​等于全局對象，即浏覽器環境中的 window。

這就是為什麼​<code>​logmessage​</code>​方法中的 ​<code>​this.message​</code>​等于 ​<code>​window.message​</code>​,即​<code>​undefined​</code>​。

如何調用​<code>​logmessage​</code>​函數，讓它列印 ​<code>​"hello, world!"​</code>​ ?

答案:

至少有 3 種方式，可以做到：

答案: ​<code>​'hello, world!'​</code>​ 和 ​<code>​'goodbye, undefined!'​</code>​。

當調用​<code>​object.greet()​</code>​時，在​<code>​greet()​</code>​方法内部，​<code>​this​</code>​值等于 object，因為​<code>​greet​</code>​是一個正常函數。是以​<code>​object.greet()​</code>​傳回​<code>​'hello, world!'​</code>​。

但是​<code>​farewell()​</code>​是一個箭頭函數，箭頭函數中的​<code>​this​</code>​值總是等于外部作用域中的​<code>​this​</code>​值。

​<code>​farewell()​</code>​的外部作用域是全局作用域，它是全局對象。是以​<code>​object.farewell()​</code>​實際上傳回​<code>​'goodbye， ${window.who}!'​</code>​，它的結果為​<code>​'goodbye, undefined!'​</code>​。

答案: ​<code>​4​</code>​

​<code>​callback()​</code>​是在​<code>​method()​</code>​内部使用正常函數調用來調用的。由于在正常函數調用期間的​<code>​this​</code>​值等于全局對象，是以​<code>​this.length​</code>​結果為​<code>​window.length​</code>​。。

第一個語句​<code>​var length = 4​</code>​，處于最外層的作用域，在全局對象 ​<code>​window​</code>​ 上建立一個屬性​<code>​length​</code>​。

答案: ​<code>​3​</code>​

​<code>​obj.method(callback, 1, 2)​</code>​被調用時有​<code>​3​</code>​個參數:​<code>​callback​</code>​, ​<code>​1​</code>​和​<code>​2​</code>​。結果，​<code>​method()​</code>​内部的參數特殊變量是如下結構的數組類對象:

因為​<code>​arguments[0]()​</code>​是arguments對象上的回調的方法調用，是以回調内部的參數等于​<code>​arguments​</code>​。 是以 ​<code>​callback()​</code>​中的​<code>​this.length​</code>​與​<code>​arguments.length​</code>​相同，即​<code>​3​</code>​。

~ 完，我是小智，我要去刷碗了，我們下期見！

代碼部署後可能存在的bug沒法實時知道，事後為了解決這些bug，花了大量的時間進行log 調試，這邊順便給大家推薦一個好用的bug監控工具 ​fundebug。