顯示廣告
隱藏 ✕
※ 本文為 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 
作者 mrbigmouth 的最新發文:
  • +71 [F/GO][情報] 自己開發的戰鬥模擬器 - TypeMoon 板
    作者: 1.164.69.47 (台灣) 2017-05-29 17:11:53
    網址: 原始碼: Bug回報區: 資料來源: 我是臺版才入坑的, 玩了這段時間後深深感到FGO戰鬥數據的各種不直覺, (我說那個傷害公式一開始先把面板ATK先乘上0.23是怎麼回事!) 總是在出牌的時 …
    93F 71推
  • +31 [問題] 教你學程式設計的遊戲 - C_Chat 板
    作者: 211.75.132.13 (台灣) 2016-10-20 11:53:04
    想了很久不知道該去哪個板發問, 但算是跟本板扯上一點關係而且又高人氣,所以在這邊求助了。 m(_ _)m 最近需要寫一個「讓不懂程式的人也能輕鬆寫程式」的程式, 但在介面設計上遇到難題,難以做到「有足 …
    52F 31推
  • Re: [問題] javascript 函數的提升 - Ajax 板
    作者: 211.75.132.13 (台灣) 2016-05-12 16:37:16
    兩個問題其實是一個解答, function two() { } 這種直接以function開頭的宣告語法是一個包含了「宣告」與「定義」的動作: 「宣告一個名稱為two的function並定義其內容」 …
  • +3 Re: [問題] 有辦法印出this的內容嗎? - Ajax 板
    作者: 211.75.132.13 (台灣) 2016-05-10 11:47:32
    對 : 你一直搞混了整件事的先後順序, 首先,「在幾乎所有語言中」, 等號指定式,也就是'xxx = ooo;'這種語法在執行時, 一定是ooo先執行完畢,才會執行等號,將結果回傳 …
    3F 3推
  • +7 [問卦] 有沒有炸蝦都不炸蝦的八卦? - Gossiping 板
    作者: 1.164.56.34 (台灣) 2014-09-13 19:55:16
    前幾天逛夜市看到有人賣炸蝦, 外面裹了一層厚厚的麵粉,用叉子從蝦子尾部叉進去豎起來賣的那種。 看它擺出來的炸蝦真的是又粗又長,看起來就很好吃的樣子, 雖然有點小貴但還是買下來嘗鮮, 但第一口咬下去感覺 …
    13F 7推
點此顯示更多發文記錄
分享網址: 複製 已複製
r)回覆 e)編輯 d)刪除 M)收藏 ^x)轉錄 同主題: =)首篇 [)上篇 ])下篇