Почему имена моих функций JavaScript конфликтуют?

Я написал следующий сценарий, чтобы посмотреть, что происходит, когда имена переменной и функции, которой назначена функция, совпадают:

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

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

f();

В результате я получаю «Я оригинальный». Почему не была вызвана другая функция?

Кроме того, если я изменяю свое исходное назначение на var f = new function() {, я получаю «Я исходный», за которым следует сообщение 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это не функция.

Простите меня, если это неправильный подход к добавлению точки. Я нечасто бывал здесь и приветствовал бы конструктивные указания и / или критику.

Ответ Бенджамина отлично отвечает на вопрос ОП, но я хотел бы добавить одну настройку, которая даст нам полный обзор подъема и его странностей.

Если мы начнем исходный код с вызова 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 в этот момент просто сбивает с толку.