自己実行関数と匿名関数

 
多くのJSライブラリには下記のコードが見られます.

function(){ //       

}();

 
こう書く目的の一つは、パッケージです.
JavaScriptは対象向けではないので、パッケージはサポートされていません.パッケージに対応していない言語でもパッケージ化が可能です.実現される方法は匿名関数または自己実行関数であり、実は自己実行関数は特殊な匿名関数である.JSの中のクラスは関数によってシミュレーションされていますが、理解するのも簡単です.Cの菗/Javaなどの言語では、クラスはオブジェクトを作成するテンプレートであり、属性と方法のセットでもあります.JSの中では関数によってシミュレーションできるので、関数によって自然に新しい関数を定義することができます.または内部関数は、次のようなクラスです.

//  

function F(x) { this.x = x; function double(x){return x*x;} this.getDoubleX = function(){ return double(this.x); } } //  

f = new F(12); alert(f.getDoubleX());

 
関数Fは構造関数に相当しますが、関数内の他の定義はすべて関数プライベートの外部にアクセスできません.例えばdouble関数です.このように変形してプライベート方法を実現した.他の「this.」プレフィックスを付けたメンバーは、公開メンバーに相当し、外部からアクセスできます.前のブログで、どのように多重化できるJSファイルを書くかを書きました.これは自己実行関数を採用しています.今は写真を360度反転させます.この関数はwindowsに新しいオブジェクトや名前空間を追加しました.この名前空間は自分で定義したものを保存します.
 

(function (wx) { var T$ = function (id) { return document.getElementById(id); } var ua = navigator.userAgent, isIE = /msie/i.test(ua) && !window.opera; var i = 0, sinDeg = 0, cosDeg = 0, timer = null; var rotate = function (target, degree) { target = T$(target); var orginW = target.clientWidth, orginH = target.clientHeight; clearInterval(timer); function run(angle) { if (isIE) { // IE

                    cosDeg = Math.cos(angle * Math.PI / 180); sinDeg = Math.sin(angle * Math.PI / 180); with (target.filters.item(0)) { M11 = M22 = cosDeg; M12 = -(M21 = sinDeg); } target.style.top = (orginH - target.offsetHeight) / 2 + 'px'; target.style.left = (orginW - target.offsetWidth) / 2 + 'px'; } else if (target.style.MozTransform !== undefined) {  // Mozilla

                    target.style.MozTransform = 'rotate(' + angle + 'deg)'; } else if (target.style.OTransform !== undefined) {   // Opera

                    target.style.OTransform = 'rotate(' + angle + 'deg)'; } else if (target.style.webkitTransform !== undefined) { // Chrome Safari

                    target.style.webkitTransform = 'rotate(' + angle + 'deg)'; } else { target.style.transform = "rotate(" + angle + "deg)"; } } timer = setInterval(function () { i += 10; run(i); if (i > degree - 1) { i = 0; clearInterval(timer); } }, 10); } wx.liuyu = {}; wx.liuyu.rotate = rotate; // windows.rotate = rotate;

 }) (window);

 
呼び出し

window.onload = function () {         document.getElementById('demo').onclick = function () {             window.liuyu.rotate('demo', 360); } }

 実際には、左の変数にオブジェクトを返します.これは関数の定義ではなく、直接実行できることを覚えてください.

  var Img=function () { var T$ = function (id) { return document.getElementById(id); } var ua = navigator.userAgent, isIE = /msie/i.test(ua) && !window.opera; var i = 0, sinDeg = 0, cosDeg = 0, timer = null; var rotate = function (target, degree) { target = T$(target); var orginW = target.clientWidth, orginH = target.clientHeight; clearInterval(timer); function run(angle) { if (isIE) { // IE

                    cosDeg = Math.cos(angle * Math.PI / 180); sinDeg = Math.sin(angle * Math.PI / 180); with (target.filters.item(0)) { M11 = M22 = cosDeg; M12 = -(M21 = sinDeg); } target.style.top = (orginH - target.offsetHeight) / 2 + 'px'; target.style.left = (orginW - target.offsetWidth) / 2 + 'px'; } else if (target.style.MozTransform !== undefined) {  // Mozilla

                    target.style.MozTransform = 'rotate(' + angle + 'deg)'; } else if (target.style.OTransform !== undefined) {   // Opera

                    target.style.OTransform = 'rotate(' + angle + 'deg)'; } else if (target.style.webkitTransform !== undefined) { // Chrome Safari

                    target.style.webkitTransform = 'rotate(' + angle + 'deg)'; } else { target.style.transform = "rotate(" + angle + "deg)"; } } timer = setInterval(function () { i += 10; run(i); if (i > degree - 1) { i = 0; clearInterval(timer); } }, 10); } return {"rotate":rotate}; }(); window.onload = function () { document.getElementById('demo').onclick = function () { Img.rotate('demo', 360); } }

 
上のこの方法については、一部の人はよく分からないかもしれません.

  var Img=function () { var T$ = function (id) { return document.getElementById(id); } var ua = navigator.userAgent, isIE = /msie/i.test(ua) && !window.opera; var i = 0, sinDeg = 0, cosDeg = 0, timer = null; var rotate = function (target, degree) { target = T$(target); var orginW = target.clientWidth, orginH = target.clientHeight; clearInterval(timer); function run(angle) { if (isIE) { // IE

                    cosDeg = Math.cos(angle * Math.PI / 180); sinDeg = Math.sin(angle * Math.PI / 180); with (target.filters.item(0)) { M11 = M22 = cosDeg; M12 = -(M21 = sinDeg); } target.style.top = (orginH - target.offsetHeight) / 2 + 'px'; target.style.left = (orginW - target.offsetWidth) / 2 + 'px'; } else if (target.style.MozTransform !== undefined) {  // Mozilla

                    target.style.MozTransform = 'rotate(' + angle + 'deg)'; } else if (target.style.OTransform !== undefined) {   // Opera

                    target.style.OTransform = 'rotate(' + angle + 'deg)'; } else if (target.style.webkitTransform !== undefined) { // Chrome Safari

                    target.style.webkitTransform = 'rotate(' + angle + 'deg)'; } else { target.style.transform = "rotate(" + angle + "deg)"; } } timer = setInterval(function () { i += 10; run(i); if (i > degree - 1) { i = 0; clearInterval(timer); } }, 10); } return {"rotate":rotate}; } window.onload = function () { //Img.rotate('demo', 360);

        document.getElementById('demo').onclick = function () { var xRotate = Img(); xRotate.rotate('demo', 360); } } </script>

 
この二つの小さな違いはJSのコンパイルと運行の二つの段階と関係があります.
 

function a(){ alert("a") } var b = function(){ alert("b") } 

二人はどう違っていますか?前者は関数宣言であり、後者は関数式である.関数宣言は声明として、もちろんプリコンパイル階級で動作しますが、関数表現はできません.もう一つの違いは、関数宣言は直接に括弧を入れて実行させてはいけません.第三の違いは、表式はさらに細分化されています.表式は定数、変数、オペレータ、関数などを組み合わせて作成され、計算後に結果値を返します.少なくともundefinedを返します.
 
参考:     http://www.cnblogs.com/TomXu/archive/2011/12/31/2289423.html
          http://www.nowamagic.net/javascript/js_UsageOf AnonymousFunctions.php
           http://www.cnblogs.com/rubylouvre/archive/2010/02/11/1667364.html