顯示廣告
隱藏 ✕
※ 本文為 terievv 轉寄自 ptt.cc 更新時間: 2016-07-18 14:55:09
看板 Ajax
作者 mrbigmouth (大嘴先生)
標題 Re: [問題] javascript 函數的提升
時間 Thu May 12 16:37:16 2016


※ 引述《kisha024 (4545454554)》之銘言:
: 各位好
: 我是參考這裡的資料
: http://fireqqtw.logdown.com/posts/258823-javascript-function-notes
【javascript】了解函式(function)很重要的筆記 « 和平,奮鬥,救WEB
[圖]
雖然會寫 javascript ,但一直沒有好好花時間研究他,有時候常常寫到一些很奇怪的bug,其實都不了解他運作原理造成的。在看【javascript設計模式】時,就把自己覺得很重要的部份記錄... ...

 
: function one() {
:   console.log('global one');
: }
: function two() {
:   console.log('global two');
: }
: function hoistFun() {
:   console.log(typeof one);
:   console.log(typeof two);
:   one();
:   two();
:   function one() {
:     console.log('local one');
:   }
:   var two = function() {
:     console.log('local two');
:   }
: }
: ---------------------------------------------------------------------
: 我不懂的是 two這個函數不是在hoistFun()裡面又被定義一次
: 為什麼console.log(typeof two); 結果卻是undefined?
: 另一個問題是 底下這兩種宣告方式 在使用上都是寫 two();
: 那到底有什麼差別呢? 謝謝
: function two() {
:   console.log('global two');
: }
: var two = function() {
:     console.log('local two');
: }

兩個問題其實是一個解答,
function two() {
}
這種直接以function開頭的宣告語法是一個包含了「宣告」與「定義」的動作:
「宣告一個名稱為two的function並定義其內容」
在系統進行hoisting的時候會被一口氣提升到scope最前方。

var two = function() {
}
這段語法其實是「創建一個匿名function」「並將其位址指派給two變數」的分解動作
於是系統進行hoisting時候被提升的只有var two,
=指定運算式是不會被提升的。
所以你執行hoistFun()時log two會跑出undefined,
因為該匿名function尚未指給two變數

此外,匿名function沒有名稱,在系統debug時或Error stack裡會以
(anonymous function)的方式顯示,造成追溯code時的麻煩,
如果可以,盡可能給function一個名稱是比較好的設計方式。

--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 211.75.132.13
※ 文章代碼(AID): #1ND42_UQ (Ajax)
※ 文章網址: https://www.ptt.cc/bbs/Ajax/M.1463042239.A.79A.html

--
※ 看板: terievv 文章推薦值: 0 目前人氣: 0 累積人氣: 104 
分享網址: 複製 已複製
r)回覆 e)編輯 d)刪除 M)收藏 ^x)轉錄 同主題: =)首篇 [)上篇 ])下篇
看板名稱: 確定(Enter) 取消(Esc) 搜尋(Space)
查詢帳號: 確定(Enter) 取消(Esc) 搜尋(Space)
搜尋: m)m文 b)進板 c)未分類 a)作者 /)標題 q)取消?[q]

搜尋 送出(Enter) 取消(Esc)

回覆文章至: f)看板 m)作者信箱 b)兩者皆是 q)取消?[f]
要引用原文嗎? y)引用原文 n)不引用 a)全部回覆 r)複製原文 q)取消?[y]
轉錄本文章於看板: 1)使用連結 2)使用複製 q)取消 ?[1]
轉寄至站內信箱於使用者: 確定(Enter) 取消(Esc)
轉寄至站內信箱於使用者: 確定(Enter) 取消(Esc)
修改文章標題為: 確定(Enter) 取消(Esc)
修改文章標題為: 確定(Enter) 取消(Esc) 全部(a)

確定要刪除這篇文章?(可按大U救回) 確定(Enter) 取消(Esc)

刪除理由:

確定(Enter) 取消(Esc)
加到這個分類: 確定(Enter) 下一層(→) 回上層(←) 取消(Esc)
你覺得這篇文章: 1)真讚 2)真瞎 q)取消?[1] (再選一次即可收回)
你覺得這篇文章: 1)值得推薦 2)表示反對 3)單純註解 q)取消?[3]
guest
預覽(Enter) 取消(Esc)
上傳圖片
按ctrl+Enter可輸入下一行。
guest
確定要送出? 確定(Enter) 取消(Esc) 繼續(e)
搜尋: 送出(Enter) 取消(Esc)

▏▎▍▌▋▊▉ 請按任意鍵繼續