即時実行関数(function(){…})()の深い理解＿JavaScriptの基礎知識

JavaScript は他のプログラミング言語に比べて比較的カジュアルなため、JavaScript コードにはあらゆる種類の奇妙な記述方法が満載で、時には煙と鏡のように見えることがあります。もちろん、あらゆる種類の記述方法を理解できることも必要です。 JavaScript 言語の特性をより深く理解します。

( function(){…} )() と ( function (){…} () ) は、すぐに実行する JavaScript 関数を記述する 2 つの一般的な方法です。最初は、これがかっこで囲まれた匿名関数だと思いました。括弧は関数を呼び出し、定義直後に関数を実行するという目的を最終的に達成します。その後、括弧を追加した理由は同じではないことが判明しました。関数の即時実行を理解するには、まず関数の基本概念をいくつか理解する必要があります。

関数宣言、関数式、匿名関数

関数宣言: function fnName () {…}; function キーワードを使用して関数を宣言し、関数名を指定します。これを関数宣言と呼びます。

関数式 var fnName = function () {…}; function キーワードを使用して関数を宣言しますが、関数に名前を付けません。最後に、関数式と呼ばれる変数に無名関数が割り当てられます。は最も一般的な関数式です。

匿名関数: function () {}; function キーワードを使用して関数を宣言しますが、関数に名前を付けないため、匿名関数と呼ばれます。匿名関数は関数式に属します。変数に代入すると関数が作成され、イベントを代入するとイベント ハンドラーになるか、クロージャが作成されます。

関数宣言と関数式の違いは次のとおりです。 1. Javascript エンジンが JavaScript コードを解析するとき、現在の実行環境 (スコープ) で関数宣言を「関数宣言をホイスティング」しますが、関数式は待機する必要があります。 Javascirtp エンジンが実行される行に到達するまで、関数式を上から下に 1 行ずつ解析します。 2. 関数式の後に括弧を追加して、関数を呼び出すことはできません。関数宣言は直ちに呼び出すことができます。 fnName() フォーム呼び出し。違いの 2 つの例を次に示します。

コードをコピー コードは次のとおりです:

fnName();
function fnName (){
…
}
//通常、関数宣言は「プロモート」されているため、関数呼び出しは関数宣言の前に行うことができます

fnName();
var fnName=function( ){
…
}
//エラー、変数 fnName は関数への参照を保存していません。関数呼び出しは関数式

コードをコピー コードは次のとおりです。

var fnName=function(){
alert( 'Hello World');
}();
//JavaScript エンジンがこれを解析すると、関数をすぐに呼び出すことができます。
function fnName(){
alert( 'Hello World');
}();
//エラーは報告されませんが、JavaScript エンジンは関数宣言のみを解析し、後続のかっこを無視します。関数宣言は呼び出されません。
function(){
console.log('Hello World');
}();
//構文エラー。匿名関数は関数式ですが、代入操作は実行されません。
//これにより、JavaScript エンジンが開始されます。 function キーワードが関数宣言として使用され、エラーが報告されます: 関数名が必要です

関数の基本的な概念を理解した後、関数をすぐに実行する 2 つの関数の書き方 (function(){…})() と (function (){…} ()) を振り返りました。同じものだと思っていました 無名関数を括弧で囲み、その後に括弧を追加して関数をすぐに呼び出します その時はなぜ括弧が追加されたのか分かりませんでしたが、後で括弧を追加したい場合はそうする必要があることに気づきました。関数本体の後にすぐに呼び出すには、関数は関数宣言ではなく関数式である必要があります。

コードをコピー コードは次のとおりです。

(function(a){
console.log (a); //firebug 出力 123、() 演算子
})(123);

(function(a){
console.log(a); // firebug 出力 1234、使用 () 演算子
}(1234));

!function(a){
console.log(a); //firebug 出力 12345、使用! Operator
}(12345);

function(a){
console.log(a); //firebug 出力 123456、operator
}(123456);

-function(a){
console.log(a); //firebug 出力 1234567、使用 -operator
}(1234567);

var fn=function(a ){
console.log(a); //firebug 出力 12345678、使用 = 演算子
}(12345678)

出力を確認するには、関数の前に追加してください。 、、、 - またはカンマでも、(),! の間、関数が定義された直後に関数を実行する効果があります。 、 、 - 、 = などの演算子はすべて、関数宣言を関数式に変換し、関数式と関数宣言を識別する際の JavaScript エンジン間のあいまいさを排除し、これが関数宣言ではなく関数式であることを JavaScript エンジンに伝えます。後で使用できるように括弧を追加し、関数のコードをすぐに実行します。

括弧を追加するのが最も安全な方法です。 、 、 - などの演算子も関数の戻り値を使用して演算を実行するため、無用なトラブルが発生することがあります。

しかし、このように書いて何の役に立つのでしょうか?

JavaScript にはプライベート スコープの概念がありません。複数人で開発したプロジェクトで一部の変数をグローバル スコープまたはローカル スコープで宣言すると、他の人が同じ名前の変数を使用して誤って上書きされる可能性があります。 JavaScriptの関数スコープチェーンの特性を利用して、プライベートスコープを模倣し、匿名関数を「コンテナ」として利用することができます。「コンテナ」内では外部変数にアクセスできますが、外部環境から「コンテナ」内の変数にはアクセスできません。 ". 変数。そのため、(function(){…})()() 内で定義された変数は、一般に「匿名ラッパー」または「名前空間」として知られる外部変数と競合しません。

JQuery はこのメソッドを使用します。JQuery コードを (function (window, unknown){...jquery code...} (window) で囲みます。JQuery コードをグローバル スコープで呼び出すときに、JQuery の内部変数を保護できます。 .

この記事は個人的な理解をまとめたものです。誤りがある場合は、ご指摘ください。記事内の見解は、

を参照しています。

「JavaScript 権威ガイド」、「JavaScript 高度なプログラミング」