立即函式

在 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);

那為什麼立即函式長的這麼奇怪呢? 有文章說()，他是由兩種語法組成的: 函式呼叫和實字。

函式呼叫

函式就是用變數 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;
}

實字 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>

立即函式是什麼

函式呼叫

實字 literal

相關連結