JavaScript関数名が衝突するのはなぜですか？

関数が割り当てられている変数と関数に名前が衝突したときに何が起こるかを確認するために、次のスクリプトを作成しました。

var f = function() {
    console.log("Me original.");
}

function f() {
    console.log("Me duplicate.");
}

f();

私が得ている出力は "Me original"です。他の関数が呼び出されなかったのはなぜですか？

また、元の割り当てをに変更するとvar f = new function() {、 "Me original"が表示され、その後にTypeErrorと表示されobject is not a functionます。誰か説明していただけますか？

関数宣言はJavaScriptで巻き上げられます（最上部に移動）。解析順序の点では正しくありませんが、関数宣言が巻き上げられるため、コードは意味的に次のコードと同じです。

function f() {
    console.log("Me duplicate.");
}
var f = function() {
    console.log("Me original.");
}


f();

これは、関数名を除いて、次と同じです。

var f = function() {
    console.log("Me duplicate.");
}
var f = function() {
    console.log("Me original.");
}


f();

これは、巻き上げが可変であるため、次と同じです。

var f;
f = function() {
    console.log("Me duplicate.");
}
f = function() {
    console.log("Me original.");
}

f();

これは、何を取得しているかを説明するものであり、関数をオーバーライドしています。より一般的にvarは、JavaScript では複数の宣言が許可されます-var x = 3; var x = 5完全に合法です。新しいECMAScript 6標準では、letステートメントがこれを禁止しています。

@kangaxによるこの記事は、JavaScriptの関数をわかりやすく説明するのに非常に役立ちます。

フォローアップの質問に誰かが回答したように見えない場合は、ここで回答しますが、通常は別の質問としてフォローアップの質問をする必要があります。

あなたはなぜこれを尋ねました：

var f = new function() {
    console.log("Me original.");
}

function f() {
    console.log("Me duplicate.");
}

f();

「私のオリジナル」を出力します。そしてエラー。

ここで起こっているのは、newが関数をコンストラクターとして使用することです。したがって、これは次と同等です。

function myConstructor() {
    console.log("Me original.");
}
var f = new myConstructor();

function f() {
    console.log("Me duplicate.");
}

f();

そしてベンジャミンが説明した関数の巻き上げのおかげで、上記は基本的にこれと同等です：

var myConstructor = function() {
    console.log("Me original.");
};
var f = function() {
    console.log("Me duplicate.");
};

f = new myConstructor();

f();

この表現：

var f = new function() {
    console.log("Me original.");
}

f匿名関数をコンストラクタとして使用して、新しいオブジェクトが作成され、に割り当てられます。「私オリジナル。」コンストラクターの実行時に出力されます。しかし、構築されるオブジェクト自体は関数ではないため、これが最終的に実行されると、次のようになります。

f();

fは関数ではないため、エラーが発生します。

これがポイントを追加するアプローチの間違った方法であるかどうか私を許してください。私はずっとここにいるわけではなく、建設的な方向性や批判を歓迎します。

ベンジャミンの答えはOPの質問にうまく対応していますが、巻上げとその奇妙さの完全なツアーを提供する1つの微調整を追加したいと思います。

元のコードをの呼び出しで開始するとf、次のようになります。

f();

var f = function() {
   console.log("Me original.");
};

function f() {
   console.log("Me duplicate.");
}

f();

出力は次のようになります。

Me duplicate.
Me original.

その理由は、そのことvarとfunctionステートメントがわずかに異なる方法で持ち上げられているためです。

以下のために宣言 *現在のスコープの上部に移動し、任意れる割当var掲揚されていません。宣言された変数の値に関する限り、元の割り当て行に到達するまでは未定義です。

以下のためfunctionの文、宣言の両方と定義が掲揚されています。関数式、で使用されるvar f = function() {...構文では巻き上げられません。

したがって、巻き上げ後の実行は、コードが次のようになります。

var f; // declares var f, but does not assign it.

// name and define function f, shadowing the variable
function f() { 
  console.log("Me duplicate.");
}

// call the currently defined function f
f(); 

// assigns the result of a function expression to the var f,
// which shadows the hoisted function definition once past this point lexically
f = function() { 
  console.log("Me original."); 
}

// calls the function referenced by the var f
f();

*すべてのJavaScriptスコープは字句スコープ、または関数スコープですが、その時点でfワードを使用すると混乱するように見えました。