注意: これは確かに長すぎますが、誰かの役に立てば幸いです。
手始めに:($
またはjQuery
、通常は同じものです)は関数です。最初の 2 つの例では、その関数を呼び出して、無名関数への参照を渡しています。これは、渡された関数を「document.ready」イベント リスナーとして追加するための jQuery ショートカットです (実際のイベント名はDOMContentLoaded
、対応ブラウザーにあります)。
JavaScript には、関数を作成する 3 つの方法があります。
1. 関数宣言
function foo() {
// code
}
宣言では、関数に必ず名前を付ける必要があります。この場合、関数名は「foo」です。
2. 関数式
名前を付けても付けなくてもかまいません。通常、彼らは匿名です。コード内の位置によっては、無効な構文と見なされます。たとえば、これは構文エラーです。
// syntax error
function() {
// code
}
しかし、これはそうではありません:
// passing a function expression is fine
foo(function() {
// code
});
これも有効です:
// parentheses make it an expression too
(function() {
// code
});
これも:
// the negation operator also makes it be interpreted as an
// expression, instead of a syntax error
!function() {
// code
}
前の 2 つの例は、通常、関数をすぐに呼び出すために使用されます。
!function() {
alert('invoked')
}();
(function() {
alert('invoked')
}());
呼び出し括弧なしで孤立していると、新しく作成された関数への参照は、何も割り当てないとすぐに失われるため、ほとんど役に立ちません。
一方、これは非常に便利です。
// function expressions are fine on the right-hand-side of an assignment
var fn = function() {
// code
}
3. Function コンストラクターの使用
// This is similar to 'eval'
// the string you pass will be the body of the function
var fn = new Function("return true");
また、特定のコンテキストに存在しない関数と変数について混乱していると述べました。これはスコープによるものです。JavaScript では、すべての関数が新しいスコープを作成します。変数 ( で宣言var
) または別の関数 (上記の有効なバリエーションのいずれかを使用) を作成する場合、その変数または関数は、宣言された関数の外では表示されません。ただし、それらは同じスコープで定義された他のネストされた関数内で表示されます (ネストされた関数は「クローズオーバー」し、外側のスコープであるため、一般に「クロージャー」と呼ばれます)。