立即函式

在 2016 年的某天，因為想試看看臉書的引文功能，就花了一些時間在看他們的 SDK 在幹麻。以下是其中一段

var newHTML2 = document.createElement('div');
// newHTML2.innerHTML='<div class="fb-quote">second</div>';
newHTML2.setAttribute("id","fb-root");
document.body.appendChild(newHTML2);

(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s);
  js.id = id;
  js.src = "//connect.facebook.net/zh_TW/sdk.js#xfbml=1&version=v2.6";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

那時候我就在想:

(function d, s, id){
 // code 
}(document, 'script', 'facebook-jssdk'))

這段到底在寫什麼? 我怎麼都看不懂? 後來無意間才發現這個寫法叫做「立即函式」。

立即函式是什麼

立即函式就是一種能夠「現在，馬上，立刻!」執行的函式。有幾種狀況會使用到它:

• 只會用到一次

• 不想要其他環境變數影響到該函式

立即函式有兩種寫法，差別只是括號放在最後、或是傳入參數的前面而已

// 第一種
(function(arg){// 程式碼}(in));
// 第二種
(function(arg){// 程式碼})(in);

那為什麼立即函式長的這麼奇怪呢? 有文章說(Re: [問題] (...)()或 (...)(window) 是什麼意思? - ptt)，他是由兩種語法組成的: 函式呼叫和實字。

• Re: [問題] (...)()或 (...)(window) 是什麼意思? - 看板 Ajax - 批踢踢實業坊

• Javascript 開發學習心得 - 函數的多種寫法與應用限制 @ 小雕雕的家 :: 痞客邦 PIXNET ::

函式呼叫

函式就是用變數 or 函數名，將一段語法包起來。之後呼叫變數名 or 函數名叫能使用這段語法。函式呼叫有三種寫法:

第一種是具名函式，他的函式是有名字的。例如本例的函式名字叫做 add()

//具名函數
var addfun = function add(a,b) {
   return a + b;
}

第二種是匿名函式，只能透過 addfun 這個變數來呼叫

//匿名函式
var addfun = function (a,b) {
   return a + b;
}

第三種是函式宣告式，function 也有名字

//函數宣告式
function add(a,b) {
  return a + b;
}

• Javascript 開發學習心得 - 函數的多種寫法與應用限制 @ 小雕雕的家 :: 痞客邦 PIXNET ::

實字 literal

實字是產生物件的一種方式。JS 產生物件(實例)有兩種方式: 建構式和實字，例如 json 格式就是一種實字。

// 實字
var obj1 = { name : "總裁實字",
             height : 170,
             say : function(){
               return "I am " + obj1.name;
              }
            },
result = obj1.say();


// 建構式
// js 沒有 class 概念，要用函式模擬
function Person(name){

  // var this = {};
  this.name = name;
  this.say = function(){
    return "I am " + this.name;
  };

  // return this;

};

var adam = new Person("海綿寶寶");
console.log(adam.say());

<h1>
  <p id="demo> paragraph </p>
</h1>

• JavaScript 教學 88：設計模式（實字與建構式） - iT 邦幫忙:: 一起幫忙解決難題，拯救 IT 人的一天

• JavaScript 教學 89：設計模式（實字與建構式～續） - YouTube

• Function 實例

• Javascript 開發學習心得 - 物件實字與建構式 + Callback @ 小雕雕的家 :: 痞客邦 PIXNET ::

相關連結

• VITO の 學習筆記: 函式

• iT 邦幫忙:: 一起幫忙解決難題，拯救 IT 人的一天

• 6.6 立即函式 · 從 HTML 入門至實務應用

• JavaScript 中的函數：閉包，this，高階函數 - 壹讀

• Closure 閉包 - eddychang.me

• 深入淺出 JavaScript Lambda

• 深入理解 JavaScript 系列（4）：立即調用的函數表達式 - 湯姆大叔 - 博客園

• Re: [問題] (...)()或 (...)(window) 是什麼意思? - 看板 Ajax - 批踢踢實業坊

• Javascript 開發學習心得 - 函數的多種寫法與應用限制 @ 小雕雕的家 :: 痞客邦 PIXNET ::

• Javascript 開發學習心得 - 物件實字與建構式 + Callback @ 小雕雕的家 :: 痞客邦 PIXNET ::