javascript - JavaScript 関数宣言スタイルの混合

Question

JavaScript 関数宣言の 2 つのスタイルを検討してください (4 つのうちの 1 つだと思います)。

function foo() {
    // ...
}

対

var foo = function() {
    // ...
}

多くの場合、これらは同じように動作します。たとえば、次の SO の質問で説明されているように、主な違いを理解していると思います。

両方とも、この非常に役立つ説明にリンクする回答があります。

しかし、両方のスタイルを 1 つのステートメントにまとめたいと思います。1 つの短い/縮小可能なローカル変数名 (非常に頻繁に参照する必要があるため) と 1 つの説明的な名前 ( .name.

これは私が混乱するところです。関数を変数にすぐに代入すると、関数自体の名前が未定義のままになるかのようです。

var f = function foo() {
    // ...
};
console.log( f.name );   // "foo"
console.log( foo.name ); // !? error: foo is not defined ?!

質問に行きましょう：なぜこれがうまくいかないのですか？あるいは、これら 2 つの宣言スタイルについて、私がまだ誤解している可能性があることは何ですか?

以下はエラーにならないことに注意してください。

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

正確には、これはどう違うのですか？

PS:これはこのSOの質問とは異なると思います:

これは、変数名と関数名が同じである、私の苦境の特殊なケースに関するものです。

var foo = function foo() {
    // ...
};

score 1 · Accepted Answer

これが私がそれを見る方法です。JavaScript のすべての関数は Function オブジェクトから継承され、Function オブジェクトにはプロパティ .name があります。

これにより、グローバル空間に foo という名前の関数オブジェクトが作成されます。

function foo(){}

これにより、ローカルの匿名（したがって名前なし）関数が作成され、 is がグローバル空間に存在する変数 f に割り当てられます。

var f = function(){}

これは関数オブジェクトを作成し、それを変数に割り当てます。グローバルコンテキストには存在せず、上記と同じように f に対してローカルにのみ存在しますが、foo という名前を割り当てます。

var f = function foo(){}

編集：より良い写真のために、以下を検討してください

(function foo(){console.log("executing foo")})();
(function(){console.log("executing anonymous")})();

どちらもグローバルコンテキストの関数 (オブジェクト) です。最初は名前付き、2 番目は名前なしです。それらが変数で作成されている場合、コンテキストが異なるだけで同じように機能します。

score 1 · Accepted Answer

あなたが書くとき

var f = function foo () { ... }

のスコープはfoo関数の本体であり、囲んでいる関数ではありません。これは主に、無名の再帰関数を作成する場合に役立ちます。

一部の実装では正しく機能しないため、その表記法を使用しないことをお勧めします。

2 に答える 2