js関数の前にシンボルを追加する役割を詳しく解説

jqueryのプラグインを見ると、jsの関数の前にセミコロンや感嘆符などが追加されているのをよく見かけますが、この記号を追加する機能を理解していない学生も多いのではないでしょうか。それでは、今日は js 関数の前に記号を追加する役割について詳しく説明します

js 関数の前にセミコロンと感嘆符を追加する役割

js 関数の前にある記号は何を意味しますか?用途は何ですか?

一般的なJQueryプラグインの書き方はこんな感じです

(function($) {         
  //...  
})(jQuery);

今日はbootstrapのjavascriptコンポーネントがこのように書かれているのを見ました

!function( $ ){
  //...
}( window.jQuery );

なぜ前に「!」を付ける必要があるのでしょうか？

関数を宣言するには 2 つの方法があることは誰もが知っています

function fnA(){alert('msg');}//声明式定义函数
var fnB = function(){alert('msg');}//函数赋值表达式定义函数

編集者の質問に登場した 2 つの関数は、どちらも 匿名関数 です。通常、メソッドを呼び出す方法はFunctionName()

ですが、「定義関数」の最後に()を追加しようとすると、パーサーはそれを理解できません。

function msg(){
  alert('message');
}();//解析器是无法理解的

定義された関数の呼び出しメソッドは msg(); である必要があります

関数本体部分を () で囲むと、実行でき、パーサーは次のようなエラーを報告しません:

(function($) {         
  //...  
})(jQuery);

では、なぜ使用するのか() 関数本体部分をラップするだけですか?

定義された関数本体を括弧で囲むと、パーサーは定義された関数を 関数式 の形式で呼び出すことがわかります。つまり、関数を関数式に変換できるメソッドであれば、パーサーが定義された関数を正しく呼び出すことができます。

そして ! もその 1 つであり、+ - || はすべてそのような機能を持っています。

さらに、! の使用は、演算子によってパフォーマンスが異なる場合があります。

文字を省略するだけです...

// 这么写会报错，因为这是一个函数定义：
function() {}()
// 常见的（多了一对括号），调用匿名函数：
(function() {})()
// 但在前面加上一个布尔运算符（只多了一个感叹号），就是表达式了，将执行后面的代码，也就合法实现调用
!function() {}()

~+- やその他の単項 演算子を前に追加することもできます。 。実際、匿名関数が宣言された直後に実行されることを保証できる適合性がいくつかあります。

var hi = function(){
 alert("hi") 
};
hi();

is等しい...

(function(){
 alert("hi")
 })
();

!、+ は () と同じ効果があり、置き換えることができます。 by

!function(){
 alert("hi")
}
();

! これは () 文字よりも安く、または () よりも見栄えが良くなります

JS ではコードを区切るためにセミコロンを使用できることは周知の事実ですが、マージ後は改行を使用できます。複数の js ファイルを圧縮すると、通常は改行文字が削除されるため、セミコロンを追加するとエラーが発生する可能性があります。表示される感嘆符は通常、圧縮された js ファイル内にあります。匿名関数を呼び出すときは、通常、(function(){})() の形式を使用するためです。ただし、別の形式を使用することもできます: !function( ){}() 先行する ! 記号は -+~ などの単項演算子で置き換えることができるため、1 バイトを節約できます。

その他の推奨記事:

JavaScript 関数バインディングの使用分析

以上がjs関数の前にシンボルを追加する役割を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。