JavaScript 核心觀念(44)-函式以及 This 的運作-this 課後練習
前言
接下來將會集中練習 this
囉~
第一題
請問 this
將會出現什麼答案?
1 | function callName() { |
漂亮阿姨
/Magic Watch
Magic Watch
/漂亮阿姨
漂亮阿姨
/undefined
Magic Watch
/undefined
點我看解答(請認真思考後再看解答)
答案是:「1」
首先這題基本觀念在於 this
的呼叫方式,在此由於 callName()
是基於 auntie
物件下呼叫的,因此 this
就會指向到 漂亮阿姨
。
而第二個答案也是相同,this
是在 watch
呼叫,因此 this
答案就會是 Magic Watch
。
第二題
請問 this
將會出現什麼答案?
1 | function callName() { |
漂亮阿姨
/Magic Watch
Magic Watch
/漂亮阿姨
漂亮阿姨
/function callName()
Magic Watch
/function callName()
點我看解答(請認真思考後再看解答)
答案是:「3」
這一題其實有點刻意建立很多變數來混淆視聽,其實認真一看只是差別在於有無呼叫而已唷。
第三題
請問 this
將會出現什麼答案?
1 | var name = '小明'; |
小明
小美
小王
undefined
點我看解答(請認真思考後再看解答)
答案是:「3」
主要考的觀念一樣,不管怎麼樣 this
終究會基於怎麼呼叫而決定它參考誰。
第四題
請問 this
將會出現什麼答案?
1 | var name = '小明'; |
小明
小美
小王
undefined
點我看解答(請認真思考後再看解答)
答案是:「4」
請注意,由於 this
是在 obj
底下呼叫,但底下並沒有 name
屬性,因此為 undefined
。
第五題
請問 this
將會出現什麼答案?
1 | var name = '小明'; |
小明
小美
小王
undefined
點我看解答(請認真思考後再看解答)
答案是:「4」
這題似乎是我出錯到重複了。
第六題
請問 this
將會出現什麼答案?
1 | var name = '小明'; |
小明
/小王
小虎
/undefined
小虎
/小明
小虎
/小王
點我看解答(請認真思考後再看解答)
答案是:「3」
這一題第一個 this
比較沒什麼問題,因為在 x
底下呼叫因此是 小虎
,但是第二個是因為 simple call 關係,因此會指向到 Window 導致答案是 小明
。
第七題
請問 this
將會出現什麼答案?
1 | function callName(name) { |
全域阿婆
/undefined
,漂亮阿姨
/小明
undefined
/小明
,漂亮阿姨
/小明
undefined
/小明
,全域阿婆
/小明
漂亮阿姨
/undefined
,全域阿婆
/小明
點我看解答(請認真思考後再看解答)
答案是:「1」
首先第一個 callName(undefined, '小明');
因為是直接呼叫 this
因此指向會是 window
,所以是全域阿婆
,而 undefined
則是因為第一個參數傳入的關係。
而第二個因為使用了 call
指定了 this
指向變成指向到 auntie
,所以第一個 this
就會是 漂亮阿姨
第二個則是 小明
。
第八題
請問 this
將會出現什麼答案?
1 | var name = '全域'; |
全域
漂亮阿姨
undefined
點我看解答(請認真思考後再看解答)
答案是:「1」
這一題非常簡單,因為是直接呼叫的關係,因此是 全域
。
第九題
請問 this
將會出現什麼答案?
1 | var name = '全域'; |
全域
漂亮阿姨
undefined
點我看解答(請認真思考後再看解答)
答案是:「1」
這一題一樣是 全域
就算放進 setTimeout
中依然是直接呼叫 this
。
第十題
請問 this
將會出現什麼答案?
1 | var name = '小明'; |
- 小明
- 小美
- 小王
- 小光
- 小城
點我看解答(請認真思考後再看解答)
答案是:「2」
這一題主要是考 bind
並不是立即執行,因此在此將 this
指向到 obj
,但後來才呼叫,因此答案是 小美
。