Dlaczego moje nazwy funkcji JavaScript są ze sobą sprzeczne?

Napisałem następujący skrypt, aby zobaczyć, co się dzieje, gdy zmienna i funkcja, do której jest przypisana funkcja, mają zderzenie nazw:

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

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

f();

Wynik, który otrzymuję, to „Mój oryginał”. Dlaczego nie wywołano drugiej funkcji?

Ponadto, jeśli zmienię swoje pierwotne przypisanie na var f = new function() {, otrzymam „Mój oryginał”, a po nim stwierdzenie TypeError object is not a function. Czy ktoś może wyjaśnić?

Deklaracje funkcji są podnoszone (przenoszone na górę) w JavaScript. Chociaż niepoprawny pod względem kolejności analizowania, kod, który masz, jest semantycznie taki sam jak poniższy, ponieważ deklaracje funkcji są podnoszone:

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


f();

Która z kolei, z wyjątkiem nazwy funkcji, jest taka sama jak:

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


f();

Co z kolei ze względu na zmienne podnoszenie jest tym samym, co:

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

f();

Co wyjaśnia, co otrzymujesz, nadpisujesz funkcję. Mówiąc bardziej ogólnie, varw JavaScript dozwolone są wielokrotne deklaracje - var x = 3; var x = 5jest to całkowicie legalne. W nowym standardzie ECMAScript 6 letzabraniają tego stwierdzenia.

Ten artykuł autorstwa @kangax wykonuje fantastyczną robotę w demistyfikacji funkcji w javascript

Jeśli nie wygląda na to, że ktoś odpowiedział na Twoje dodatkowe pytanie, odpowiem na nie tutaj, chociaż generalnie powinieneś zadawać dodatkowe pytania jako osobne pytania.

Zapytałeś, dlaczego to:

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

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

f();

wydrukuje „Ja oryginał”. a następnie błąd.

To, co się tutaj dzieje, polega na tym, że newpowoduje, że funkcja jest używana jako konstruktor. Więc jest to równoważne z następującym:

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

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

f();

A dzięki funkcji podnoszenia, którą wyjaśnił Benjamin, powyższe jest zasadniczo równoważne z tym:

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

f = new myConstructor();

f();

To wyrażenie:

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

powoduje konstruowanie i przypisywanie nowego obiektu fprzy użyciu anonimowej funkcji jako konstruktora. „Ja oryginalny”. jest drukowany w trakcie wykonywania konstruktora. Ale skonstruowany obiekt sam w sobie nie jest funkcją, więc kiedy to w końcu się wykona:

f();

fpojawia się błąd, ponieważ nie jest funkcją.

Wybacz mi, jeśli to niewłaściwy sposób dodawania punktu. Nie byłem tu zbyt często i przyjąłbym konstruktywne wskazówki i / lub krytykę.

Odpowiedź Benjamina doskonale odpowiada na pytanie OP, ale chciałbym dodać jedną poprawkę, która da nam pełną prezentację podnoszenia i jego osobliwości.

Jeśli zaczniemy oryginalny kod od wezwania do f:

f();

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

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

f();

Wynik będzie wtedy:

Me duplicate.
Me original.

Powodem jest to, vara functionoświadczenia są podnoszone na nieco inne sposoby.

Na vartej deklaracji jest przesuwana do góry bieżącego Zakres *, ale każde zadanie nie jest podniesiona. Jeśli chodzi o wartość zadeklarowanej zmiennej, jest ona niezdefiniowana, dopóki nie zostanie osiągnięta pierwotna linia przypisania.

W przypadku functioninstrukcji podnoszona jest zarówno deklaracja, jak i definicja. Wyrażenia funkcyjne użyte w var f = function() {...konstrukcji nie są podnoszone.

Więc po podniesieniu wykonanie wygląda tak, jakby kod był:

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();

* Cały zakres JavaScript jest leksykalny lub funkcjonalny, ale wydawało się, że użycie słowa f w tym momencie byłoby po prostu pomieszane.