JavaScriptの関数宣言と関数式の違いの解析_基礎知識

通常、js で関数を記述する場合、関数 fn () {} という従来の方法で関数を宣言します。優れたプラグインを読むと、必然的に var fn = function () {} が表示されます。これらの関数の作成の違いは何でしょうか? 今日は、鍋を壊して質問するという精神で、この魅力的な関数宣言について話しましょう。

関数宣言

関数宣言のサンプルコード

コードをコピーします コードは次のとおりです:

function fn () {
console.log('fn 関数の実行..');
// コード..
}

このように、fn という関数を宣言しました。この関数の上でそれを呼び出すと実行されると思いますか。それともエラーが報告されるのでしょうか？

コードをコピーします コードは次のとおりです。

fn() // 宣言した fn 関数を呼び出します。 before fn () { console.log('fn 関数の実行..') // コード..}

;

コンソール出力:

はい、この時点で fn 関数を呼び出すことができます。その理由を以下にまとめます。

概要:

1: このとき、fn 関数は変数の結果であり、デフォルトでグローバルコンテキストの変数に格納されます (window.function 名で確認できます)

2: このメソッドは、グローバル コンテキスト ステージに入るときに作成される関数宣言であり、コード実行ステージですでに使用可能です。 ps: JavaScript はメソッド

に入るたびにコンテキスト環境を初期化します (グローバル→ローカル)。

3: 変数オブジェクトに影響を与える可能性があります (コンテキストに格納されている変数のみ)

関数式

関数式サンプルコード

コードをコピーします コードは次のとおりです:

var fn = function () {
console.log('fn 関数 [式] ステートメントの実行..')
// コード..
}

このようにして、匿名関数を宣言し、その参照を変数 fn に指します。

上と下の式で宣言された関数をもう一度呼び出して、コンソールに出力を確認します。

コードをコピーします コードは次のとおりです:

// コンソール出力を明確に確認するために、読みやすさを高めるために各呼び出しの前後にマークを付けます。
console.log('前の通話が開始されました..');
fn();
console.log('前の通話は終了しました..');
var fn = function () {
console.log('fn 関数 [式] ステートメントの実行..')
// コード..
}
console.log('通話開始後..');
fn();
console.log('通話開始後..');

コンソールの印刷結果:

コードが実行され、初めて fn() 関数が呼び出されたときに、次のプロンプトが表示されることがわかります: fn は関数ではありません (fn はメソッドではありません)。エラーが発生すると操作は終了します。遭遇した。

これは、初めて fn() が呼び出されたとき、var fn 変数がグローバル オブジェクトの属性として存在せず、fn によって参照される匿名関数コンテキストが初期化されていないため、前の呼び出しが失敗したことを示しています。 。

コードをコピーします コードは次のとおりです:

// 次に、前の呼び出しロジックをコメントアウトして、コンソール出力を確認します
// console.log('前の通話が開始されました..');
// fn();
// console.log('前の通話は終了しました..');
var fn = function () {
console.log('fn 関数 [式] が実行を宣言します..')
// コード..
}
console.log('通話は後で開始されます..');
fn(); // 式
の後に呼び出されます。 console.log('通話は後で開始されます..');

コンソールの印刷結果:

式関数の後に呼び出すことができることがわかります。その理由をまとめてみましょう。

概要:

1: まず、変数自体は関数として存在せず、無名関数への参照です (値の型は参照ではありません)

2: コード実行フェーズ中、グローバル コンテキストが初期化されるとき、グローバル コンテキストはグローバル属性として存在しないため、変数オブジェクトの汚染を引き起こすことはありません

3: このタイプの宣言はプラグイン開発で一般的であり、クロージャ内のコールバック関数の呼び出しとしても使用できます

つまり、 function fn () {} は var fn = function () {} と等しくありません。これらは本質的に異なります。

上記はこの記事の内容全体であり、その考え方は非常に明確であり、非常に優れた記事ですので、ぜひ読んでください。