ホームページ > 記事 > ウェブフロントエンド > JavaScript での関数の即時実行の詳細な例

JavaScript での関数の即時実行の詳細な例

小云云オリジナル: 2017-12-28 09:38:241540ブラウズ

js 関数即時実行を使用すると、関数を作成後すぐに実行できます。 js 関数即時実行モードは、関数を定義後すぐに実行できるようにする構文です。このモードは、基本的に関数式 (名前付きまたは匿名) であり、直後に実行されます。創造。 JavaScript は他のプログラミング言語に比べて比較的カジュアルな言語であるため、JavaScript のコードにはさまざまな奇妙な記述方法が含まれており、時々霧の中に現れます。もちろん、さまざまな記述方法を理解できることは、さらに深い理解になります。 JavaScript 言語の特徴について説明します。この記事では主に JavaScript の関数の即時実行に関する関連情報を紹介します。必要な方は参考にしてください。

はじめに

( function(){…} )() と ( function (){…} () ) は、関数をすぐに実行する JavaScript 関数を記述する 2 つの一般的な方法です。最初は、これがラップされた匿名関数だと思いました。括弧内に括弧を追加して関数を呼び出すことで、最終的に関数を定義した直後に実行するという目的が達成されます。括弧を追加した理由は同じではないことが後で判明しました。

以下で言うことはあまりありません。詳細な紹介を見てみましょう。

通常、関数は次の方法で宣言します:

// 声明函数f1
function f1() {
 console.log("f1");
}
// 通过()来调用此函数
f1();


//一个匿名函数的函数表达式，被赋值给变量f2:
var f2 = function() {
 console.log("f2");
}
//通过()来调用此函数
f2();


//一个命名为f3的函数的函数表达式(这里的函数名可以随意命名，可以不必和变量f3重名)，被赋值给变量f3:
var f3 = function f3() {
 console.log("f3");
}
//通过()来调用此函数
f3();

いくつかのカスタムコントロールを見たことがある方は、ほとんどがこの書き方に従っていることに気づくでしょう:

(function() {
 "
 // 这里开始写功能需求
 })();

これは、私たちがよく即時実行関数と呼ぶものです ( IIFE) は、名前が示すように、この関数が関数本体を即座に実行し、それを積極的に呼び出す必要がないことを意味します。一般に、これには 2 つの目的があります。関数に名前を付ける必要がないため、グローバル変数の汚染が回避されます。第 2 に、IIFE は内部で別のスコープを形成し、外部から読み取れないいくつかのプライベート変数をカプセル化できます。

これら 2 つの文が理解できない場合は、IIFE の動作原理から始めましょう。

IIFE は通常匿名関数に使用されるため、ここでは例として単純な匿名関数を使用します:

var f = function(){
 console.log("f");
}
f();

ここでの f はこの匿名関数の単なる参照変数であることがわかりました。そのため、 f() はこの関数を呼び出すことができます。、 f を入力しました。関数自体に置き換えることはできますか:

function(){
 console.log("f"); 
}();

実行後、次の結果が得られます:

Uncaught SyntaxError: Unexpected token (

このエラーの理由は、Javascript エンジンが function キーワードを認識した後、次の内容が考慮されることです。は関数宣言ステートメントであり、括弧で終わるべきではありません。解決策は、括弧の前の部分が関数定義ステートメントではなく、演算可能な式であることをエンジンに知らせることです。関数宣言と関数式の違いは次のとおりです。

1. , 通常、関数の宣言には関数 x(){} を使用します)

function myFunction () { /* logic here */ }

2. 関数式 (この形式に似ています)

var myFunction = function () { /* logic here */ };
var myObj = {
 myFunction: function () { /* logic here */ }
};

小学校では、() で囲まれた式が最初に実行されると習いましたが、以下のように:

1+(2+3) //这里先运行小括号里面的内容没有意见撒

実際、JavaScript エンジンは関数キーワードを見つけると、それが関数宣言ステートメントであると判断します。では、JavaScript エンジンが最初に括弧を見た場合はどうなるでしょうか。

//用小括号把函数包裹起来
(function(){
  console.log("f");  
})();

関数は正常に実行されました。 :

f //控制台输出

この場合、JavaScript エンジンはこれが関数宣言ではなく式であると認識します。もちろん、JavaScript エンジンにこれを関数宣言であると認識させる方法はたくさんあります。式:

!function(){}();
+function(){}();
-function(){}();
~function(){}();
new function(){ /* code */ }
new function(){ /* code */ }() // 只有传递参数时，才需要最后那个圆括号。
……

前の質問に戻ります。なぜ IIFE の形式はグローバル変数の汚染を回避すると言われているのですか? 他の人が書いた jquery プラグインを見たことがあるなら、通常、次のようなコードがあります:

(function($){
  "
  //插件实现代码
})(jQuery);

The jqueryこれは実際には匿名関数のパラメータです。匿名関数を呼び出すときに考えてください。関数で f() が使用されている場合、匿名パラメータは f(args) です。ここでは jquery がパラメータとして関数に渡されます。したがって、仮パラメータ $ が関数内で使用されても、外部環境には影響しません。プラグインによっては $ 修飾子も使用するため、この関数内で $ 修飾子を試すことができます。

上記では、このプロセス中に次の 2 つの記事を参照しました:

JavaScript は関数をすぐに実行します: プラグインの function(){}()、もう一度考えてください

JavaScript の即時実行関数

JavaScript での関数の即時実行の詳細な例

関連記事