關於JS函數習慣用法

js函數用法

x5 2017-06-17 16:56:29 ‧ 6438 瀏覽

前輩們好小弟剛學JS 看到函數這邊
這是普通用法:

function A()
{
...
}
A();

但是我怎麼看到有人這樣:

var x = function A()
{
...
}
x();
或
var x = function()
{
...
}
x();

測完結果都一樣
但我不懂為什麼要這麼做
尤其是上例2讓我有種多此一舉的感覺QQ?
那樣用有甚麼好處嗎??抓不到那種概念感

看更多先前的討論...收起先前的討論...

小魚 iT邦大師 1 級 ‧ 2017-06-17 18:30:25 檢舉

用你習慣的方式就好，我不知道有沒有多此一舉。

weiclin iT邦高手 4 級 ‧ 2017-06-17 19:00:59 檢舉

關鍵字: 匿名函數 anonymous function, 函數式編程 functional programming

Sam-物理拳頭系工程師(五段) iT邦高手 9 級 ‧ 2017-06-17 19:25:11 檢舉

這可也是一種很重要的函式使用方式。上面的weiclin講得也很清楚了。有很多的callback也會使用暱名函式來處理結果。不過有的語言也會稱之為：閉包(closure)

x5 iT邦新手 5 級 ‧ 2017-06-17 21:15:19 檢舉

@小魚謝謝你ㄉ回答~~
@weiclin 了解謝謝你我查查看
@Sam 可樂快跑哈哈callback不太懂等等去學學謝謝你了
--------------------------------------------------
我剛剛去查了查他是說第1種是一開始就初始化第2.3種是用到才初始化所以如果2.3呼叫在函數之前會Bug
好像只有這個差別@_@?

weiclin iT邦高手 4 級 ‧ 2017-06-17 21:26:25 檢舉

差別很大, 底下的教學看一看, 能理解就理解, 不能理解那就過陣子用到再回來研究
https://llh911001.gitbooks.io/mostly-adequate-guide-chinese/content/

fillano iT邦超人 1 級 ‧ 2017-06-19 15:54:38 檢舉

你的第二例，如果寫成：
var x = function A(){ console.log(A, 'x')};
就有意義了。這時候A只有在函數中有效。

x5 iT邦新手 5 級 ‧ 2017-06-19 22:06:05 檢舉

@weiclin 我理解看看看來是功力不夠><
@fillano !!!!我好激動....崇拜你都有在看你的文你居然來到我的問答了 !!! 我去理解看看哦哦哦

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

weiclin

iT邦高手 4 級 ‧ 2017-06-18 00:33:19

最佳解答

給你一個範例
這範例是用來模擬頁面載入後, 使用 AJAX 從後端讀取資料
於一秒後取得所有資料顯示在畫面上
並為每筆資料提供一個按鈕可以刪除該筆資料
點這裡看執行結果

你思考一下如果要改成用第一種寫法, 要怎麼改?
幫你節錄要改的那部份:

function appendDataToUl(data, ul) {
  let li = document.createElement("li");
  
  let delBtn = document.createElement("input");
  delBtn.type = "button";
  delBtn.value = "Delete";
  delBtn.onclick = function () { // <============ 這邊怎麼改?
    ul.removeChild(li);
  };
  
  li.appendChild(document.createTextNode(data));
  li.appendChild(delBtn);
  
  ul.appendChild(li);
}