直ちに関数IIIFEを実行します.
8336 ワード
いったいIIIFEとは何ですか?
以下の2つの方法を比較します.
JSコードが解釈されると、関数表現ではなく関数宣言として機能するキーワードがデフォルトになります.関数表現として表示されないとエラーが発生します.関数名がないので、エラーが発生します.
関数名を付ける
IIIFE正解
IIIIFの他の多くの書き方:
しかし、良いコード仕様
まだかっこを入れる必要があります.
IIFとクローズド
IIIIIFは、クローズド状態に合わせてIIIIFEの中でもう一つの関数を定義します.この関数はIIIIFE内部の変数とパラメータを参照することができます.この点を利用して、IIFFEを使って変数の状態をロックすることができます.
関数宣言と関数アップ
私たちの注意に値するやり方があります.
しかし、関数式を使うなら、大丈夫です.
以下の2つの方法を比較します.
var foo=function(){
/*code*/}
foo();
他のエラーの方法:function(){}(); //Unexpected token
原因を誤報するJSコードが解釈されると、関数表現ではなく関数宣言として機能するキーワードがデフォルトになります.関数表現として表示されないとエラーが発生します.関数名がないので、エラーが発生します.
関数名を付ける
function foo(){
}() //unexpected token
名前を付けてもエラーが発生します.式の後に括弧を付けて表現します.ただし、文の後に括弧を入れると前後は関係ありません.以上のコードは以下の通りです.function foo(){}
();
まずfooという関数を宣言してから()内の表式演算を行いますが、()内の表式は空ではないので、エラーが発生します.IIIFE正解
(function(){ /* code */ }());
成功、どうして?JSでは、括弧の内部には語句が含まれていません.インタプリタがコードを説明する時、まず()に触れてから、functionキーワードに触れると自動的に()中のコードを関数宣言ではなく関数式として認識します.IIIIFの他の多くの書き方:
//
(function(){}());
(function(){})();
// JS (= && || , )
// , function 。
var i=fuction(){return 10;}();
true&&function(){/*code*/}();
0,function(){}();
単項演算子!function(){}();
~function(){}();
-function(){}();
+function(){}();
new操作子new function(){
}
new function(){
}() //
以上の紹介を通して,()関数式をすぐに実行できることを大体理解した.ある時、私達は実際に関数式を使う必要がありません.どういう意味ですか?たとえば下のこのコードには、()を付けなくても間違いはないです.var i = function(){
return 10; }();
解釈器が先に=>号に会ったので、後のデフォルトを表式として処理しました.しかし、良いコード仕様
まだかっこを入れる必要があります.
var i = (function(){
return 10; }());
コードの可読性のために.IIFとクローズド
IIIIIFは、クローズド状態に合わせてIIIIFEの中でもう一つの関数を定義します.この関数はIIIIFE内部の変数とパラメータを参照することができます.この点を利用して、IIFFEを使って変数の状態をロックすることができます.
// , , IIFE i ,
// for i , , , 。
var elems=document.getElementsByTagName( 'a' );
for ( var i = 0; i < elems.length; i++ ) {
(function(lockedIndex){
elems[i].addEventlistener('click',function(e){
e.preventDefault();
console.log('i am '+lockedIndex);
},'false');
})(i)
}
実は上のコードの中のlockedIndexをiに変えてもいいです.二つの作用領域にあるからです.関数宣言と関数アップ
私たちの注意に値するやり方があります.
if(condition){
function sayHi(){
alert('Hi');
}
}else{
function sayHi(){
//other code
}
}
このようにするのは問題があって、ECMAScriptの中で無効な文法で、JSエンジンはこの誤りを修正して、合理的な状態に転換します.問題はブラウザがバグを修正しようとするやり方が一致していません.ほとんどのブラウザは第二の宣言を返して、直接にconditionを無視します.しかし、関数式を使うなら、大丈夫です.
if(condition){
sayHi=function (){
alert('Hi');
}
}else{
sayHi=function (){
//other code
}
}
コールではなく名前付き関数式を使うべきです.//arguments.callee
function factoral(num){
if(num<=1){
return 1;
}else{
return num*arguments.callee(num-1);
}
}
var factoral=(function f(num){
if(num<=1){
return 1;
}else{
return num*f(num-1);
}
})