JavaScriptの即時実行関数例を詳しく解説

小云云
リリース: 2017-12-09 13:39:11
オリジナル
1663 人が閲覧しました

JavaScript は他のプログラミング言語に比べて比較的カジュアルなため、JavaScript のコードにはあらゆる種類の奇妙な記述方法が満載であり、時には混乱することもあります。 JavaScript 言語。この記事ではJavaScriptの即時実行関数に関する情報を中心に紹介しますので、お役に立てれば幸いです。

はじめに

js実行関数即時モードは、関数を定義後すぐに実行できるようにする構文です。作成直後に実行される関数式 (名前付きまたは匿名)。

( 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) と呼ばれるもので、その名前が示すように、この関数は関数本体をすぐに実行し、ユーザーが積極的に呼び出す必要がないことを意味します。一般に、IIFE は匿名関数にのみ使用されます。これを行う目的は 2 つあります: 1 つは、関数に名前を付けず、汚染されたグローバル変数を避けることです


2 つ目は、IIFE の別個のスコープを IIFE 内に形成できることです。これにより、カプセル化できないいくつかのプライベート変数をカプセル化できます。外で読まれる。


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


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

var f = function(){
 console.log("f");
}
f();
ログイン後にコピー

ここでの f はこの匿名関数の単なる参照変数であることがわかりました。この関数を呼び出すことができます。 f を関数自体に置き換えることはできますか? function キーワードの場合、その後に関数宣言ステートメントが続くと考えられ、括弧で終わるべきではありません。解決策は、括弧の前の部分が関数定義ステートメントではなく、演算可能な式であることをエンジンに知らせることです。関数宣言と関数式の違いは次のとおりです。

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

function(){
 console.log("f"); 
}();
ログイン後にコピー

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

Uncaught SyntaxError: Unexpected token (
ログイン後にコピー

() の使い方は小学校で習いました。次のように式が最初に実行されます:

function myFunction () { /* logic here */ }
ログイン後にコピー

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


var myFunction = function () { /* logic here */ };
var myObj = {
 myFunction: function () { /* logic here */ }
};
ログイン後にコピー

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

1+(2+3) //这里先运行小括号里面的内容没有意见撒
ログイン後にコピー

この場合、JavaScript エンジンはこれが式であると判断します。もちろん、JavaScript エンジンはこれが式であると認識する必要があります。この式はさまざまな方法で使用できます。他の人が書いた jquery プラグインを見たことがあるなら、通常、次のようなコードがあります:

//用小括号把函数包裹起来
(function(){
  console.log("f");  
})();
ログイン後にコピー

ここでの jquery は、実際には匿名関数のパラメータであると考えてください。匿名関数では、f() を使用します。その場合、匿名パラメータは f(args) ですよね? ここで、jquery がパラメータとして関数に渡される場合、関数内で仮パラメータ $ を使用する場合、外部環境は影響を受けません。一部のプラグインでは $ 修飾子も使用されており、この関数内で必要な操作を行うことができるためです。

関連する推奨事項:

JS の即時実行関数

JavaScript_javascript スキルで即時実行関数を記述する 3 つの異なる方法

JavaScript_javascript スキルでの即時実行関数式の紹介

以上がJavaScriptの即時実行関数例を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート