原文出處: http://www.dnew.cn/post/196.htm

先看下下面幾種寫法

1.function f(x){return x*x;};f(x);

2.(function(x){return x*x;})(x);

3.(function(x){return x*x;}(x));

第一種我們應(yīng)該都很熟悉了，這是我們經(jīng)常使用的寫法。第二第三種都是匿名函數(shù)的寫法。

--------------------------------------------------------------------------------

第二種
可以這樣理解：

var f=function(x) {return x*x;};f()

那我們不通過f這個變量來引用函數(shù)就是

function(){}()

然而這樣肯定是錯誤的就像

var f=1+2;
f=f*0;

與

var f=1+2*0;


結(jié)果不同一樣。
要得到正確結(jié)果只能：

f=(1+2)*0;

也就是要明確的標(biāo)識出程序塊,即：

(function(){})()


肯你有疑問：括號“()”到底是不是起到了標(biāo)識代碼塊的作用？
我們可以用JavaScript的內(nèi)置函數(shù)檢測一下！
舉一個最簡單的例子：

alert(4)

這段代碼會彈出提示內(nèi)容是“4”
改成這樣
(alert)(4)

可以看到執(zhí)行的效果和上一段代碼一樣。

這種形式的函數(shù)執(zhí)行也被很多JavaScript框架所采用。

--------------------------------------------------------------------------------

第三種，如果你用過jsvm框架的話就會發(fā)現(xiàn)里面的代碼使用了這種形式。
那如何解釋第三種情況呢?
為了弄明白瀏覽器是如何理解這樣的寫法的，我們可以利用一下Mozilla Firefox的錯誤控制臺功能。
在代碼中插入一段錯誤代碼，代碼段如下：

(function(s){s+s}(1)).splice();

打開Mozilla Firefox的錯誤控制臺，可以看到有如下的錯誤提示

錯誤： (function (s) {})(1) has no properties
源文件：file:///C:/Documents…….html
行：18

可以認(rèn)為，瀏覽器對于
(function(s){s+s}(1))
這樣的代碼按照

(function (s) {s+s})(1)
來解析的。


--------------------------------------------------------------------------------

到此可能你有這樣的認(rèn)識：

function f(x){return x*x;};f(x);==(function(x){return x*x;})(x);==(function(x){return x*x;}(x));


但是他們還是有區(qū)別的，
首先，對于像第二和第三種形式，其它的函數(shù)和代碼是不可能調(diào)用所定義的函數(shù)的，有一種說發(fā)把這樣的函數(shù)稱為匿名函數(shù)或者函數(shù)直接量。
其次，第二和第三種形式執(zhí)行的函數(shù)，中間變量不會污染到全局命名空間，你可以把中間的代碼看作純粹的子過程調(diào)用。
當(dāng)然使用后面兩種形式的函數(shù)定義可以很容易的實現(xiàn)閉包。
看一個例子：

/*
http://jibbering.com/faq/faq_notes/closures.html（Dnew.CN注）
A global variable - getImgInPositionedDivHtml - is declared and
  assigned the value of an inner function expression returned from
  a one-time call to an outer function expression.

  That inner function returns a string of HTML that represents an
  absolutely positioned DIV wrapped round an IMG element, such that
  all of the variable attribute values are provided as parameters
  to the function call:-
*/
var getImgInPositionedDivHtml = (function(){
   /* The - buffAr - Array is assigned to a local variable of the
      outer function expression. It is only created once and that one
      instance of the array is available to the inner function so that
      it can be used on each execution of that inner function.

      Empty strings are used as placeholders for the date that is to
      be inserted into the Array by the inner function:-
   */
   var buffAr = [
       '<div id="',
       '',   //index 1, DIV ID attribute
       '" style="position:absolute;top:',
       '',   //index 3, DIV top position
       'px;left:',
       '',   //index 5, DIV left position
       'px;width:',
       '',   //index 7, DIV width
       'px;height:',
       '',   //index 9, DIV height
       'px;overflow:hidden;\"><img src=\"',
       '',   //index 11, IMG URL
       '\" width=\"',
       '',   //index 13, IMG width
       '\" height=\"',
       '',   //index 15, IMG height
       '\" alt=\"',
       '',   //index 17, IMG alt text
       '\"><\/div>'
   ];
   /* Return the inner function object that is the result of the
      evaluation of a function expression. It is this inner function
      object that will be executed on each call to -
      getImgInPositionedDivHtml( ... ) -:-
   */
   return (function(url, id, width, height, top, left, altText){
       /* Assign the various parameters to the corresponding
          locations in the buffer array:-
       */
       buffAr[1] = id;
       buffAr[3] = top;
       buffAr[5] = left;
       buffAr[13] = (buffAr[7] = width);
       buffAr[15] = (buffAr[9] = height);
       buffAr[11] = url;
       buffAr[17] = altText;
       /* Return the string created by joining each element in the
          array using an empty string (which is the same as just
          joining the elements together):-
       */
       return buffAr.join('');
   }); //:End of inner function expression.
})();
/*^^- :The inline execution of the outer function expression. */

最新評論