今天要跟大家介紹的就是上圖的那個 + 號啦

開始之前先來首歌吧

先說說 self invoke function 吧

Imgur

javascript 內的 self invoke function 如字面上的意思就是可以

自己摳自己

哇~~好色喔>////<

用法如下:

1
2
3
(function () {
console.log('gordon');
})(); //gordon

請注意: 上面這段 code 是 anonymous function, 所以並沒有被別人呼叫, 而是在宣告完就自己呼叫(摳 call)自己喔

自己做一個 self invoke function

  1. 宣告一個 anonymous function 第一步就是先宣告一個 function 啦

    1
    2
    3
    function () {
    console.log('gordon');
    }
  2. 摳他, 正常來說摳一個 function 就是在後面加上 () 變成 function (), 比如 getSum(), 這邊也不例外直接在後面加上 () 就對了

    1
    2
    3
    4
    5
    6
    7
    function () {
    console.log('gordon');
    } (); // <- 沒錯就是從這邊摳他 >///< 然後會壞掉唷
    // 摳完要加上 ; 喔
    // 就跟平常我們摳 $().val();
    // 會在摳完 val() 之後加上分號 der

    注意: 上面那段 code 會讓整個世界一起天黑, 至少我的 node 6.0.0 會跟我翻臉

  3. 要再加上一個 () 把 function 包起來才是對的

    1
    2
    3
    4
    (function () {
    console.log('gordon');
    }) (); // gordon
    // 這次就可以完美印出 gordon 了

+ 號的用途

+ 其實就是上面的第三步驟, 大家可以試試看底下這段 code

1
2
3
+function () {
console.log('gordon');
} (); // gordon

竟然完美印出 gordon 了!!!

其實 -, !, ~, 也都可以喔

說明:

javascript 引擎(引擎好像比較猛,其實是直譯器啦, 但是 google 都叫 v8 engine QQ)

在沒有任何符號的情況下讀到 function 這個關鍵字, 會先認為是 declaration, 後面又讀到 () 會無法辨認

因此 (, +, -, !, ~, 會讓 javascript 引擎知道後面是 statement ( expression or several non-expression statements )

實際範例

這篇有 jQuery 的 tag 就是要拿 jQuery plugin 來當例子啦~

1
2
3
+function () {
// plugin content
} (jQuery);
1
2
3
(function () {
// plugin content
}) (jQuery);

上面這兩個是很常看到的 jQuery plugin 起手式喔, 而且是等價的

參考資料

Zoom.js
JavaScript plus sign in front of function name