JavaScript即時実行機能_JavaScriptスキルを徹底分析

JavaScript は他のプログラミング言語に比べてカジュアルなため、JavaScript コードにはあらゆる種類の奇妙な記述方法が満載であり、それらは時々霧の中に現れることがあります。
もちろん、さまざまな記述を理解できるようになるということは、JavaScript 言語の特性をさらに深く理解することにもなります。

JavaScript 関数の構文

関数は、中かっこで囲まれたコードのブロックであり、その前にキーワード function が続きます。

関数 関数名()
{

を実行するコードは次のとおりです。 }

この関数が呼び出されると、関数内のコードが実行されます。

関数は、イベントが発生したとき (ユーザーがボタンをクリックしたときなど) に直接呼び出すことができ、JavaScript によってどこからでも呼び出すことができます。

ヒント: JavaScript では大文字と小文字が区別されます。キーワード function は小文字である必要があり、関数は関数名と同じ大文字と小文字を使用して呼び出される必要があります。

( function(){…} )() と ( function (){…} () ) は、関数をすぐに実行する JavaScript 関数を記述する 2 つの一般的な方法です。

最初は括弧で囲まれた匿名関数だと思いましたが、最後に括弧を追加して関数を呼び出すことで、関数を定義した直後に実行するという目的が達成されました。
後になって、括弧の理由はそうではなかったことが判明しました。関数の即時実行を理解するには、まず関数の基本概念をいくつか理解する必要があります。

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

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

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

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

関数宣言と関数式の違い:

1. Javascript エンジンは JavaScript コードを解析するときに、現在の実行環境 (スコープ) で関数宣言を「ホイスト」します。関数式は、Javascirtp エンジンがその行を実行するまで待機する必要があります。この場合のみ、関数式は上から下まで 1 行ずつ解析されます。

2. 関数式の後に括弧を追加して関数をすぐに呼び出すことはできません。関数宣言は fnName() の形式でのみ呼び出すことができます。

例:

 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,使用！运算符 
 }(12345); 
 + function(a){ 
  console.log(a); //firebug输出123456,使用+运算符 
 }(123456); 
 - function(a){ 
  console.log(a); //firebug输出1234567,使用-运算符 
 }(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の即時実行機能です。気に入っていただければ幸いです。