3

Как объяснить различную реакцию на выполнение следующего кода в разных браузерах?

var func = function() { console.log('1'); };
function func() { console.log('2'); }
func();

При выполнении в Opera 36.0.2130.32 выдается ошибка:

"SyntaxError: Identifier 'func' has already been declared at https://static.jsbin.com/js/prod/runner-3.35.11.min.js:1:13891 at https://static.jsbin.com/js/prod/runner-3.35.11.min.js:1:10820"

При выполнении в Firefox 44.0.2 ошибка не выдается, и в консоль выводится значение "2". Вот ссылка на jsbin: https://jsbin.com/hijobojawe/1/edit?js,console,output

5
  • Видимо firefox берёт последнюю реализованную функцию с данным названием, пропуская все предыдущие определения, а другие браузеры не могут это просто так оставить.
    – Komdosh
    28 мар 2016 в 5:56
  • Различная реакция браузеров - нормальное поведение в настоящее (да и в прошлое) время. Точнее - не нормальное поведение, но такое вполне бывает. Не все бразузеры точно выполняют стандарты. 28 мар 2016 в 6:03
  • Хороший ответ дал @Олег Дёгтев. 28 мар 2016 в 6:57
  • Странное дело: в консольн на JS Bin мой FF 45 выводит "2", в то же время, этот же код в ScratchPad в консоль FireBug выводит "1".
    – Sergiks
    28 мар 2016 в 7:04
  • Странное дело-2: если обернуть всё в ф-ю, то и JS Bin начинает показывать "1" там, где раньше показывал "2" (консоли JS Bin), в том же FireFox. В общем, на JSBin лучше не смотреть и проверять в «родных» консолях браузеров.
    – Sergiks
    28 мар 2016 в 7:22

2 ответа 2

5

Я так понимаю, что должно быть вообще "1". В моем ИЕ как раз выводится единица.
Что тут происходит? При выполнении скрипта существует 2 стадии. Стадия инициализации и стадия выполнения. Function Declaration (2 строка) происходит на стадии инициализации. Далее по-ходу выполнения скрипта - тело функции переписывается в function expression (1 строка), которые как раз выполняются на стадии выполнения. В итоге мы должны видеть (И видим в ИЕ) единицу.
А то, что мы видим на практике - видимо различия реализации JS движков, у каждого производителя он свой. Мы видим, что Opera(и Хром) не дают переписать объявленную функцию. Firefox просто игнорирует перезапись, а IE спокойно перезаписывает.
Почитать.

4

Хорошая демонстрация неочевидного момента т.н. "var hoisting". Дело в том, что на стадии инициализации все объявления переменных, которые могут быть где угодно в теле функции, перемещаются наверх, в то время, как их назначение остаётся на месте.

Было:

function x(){
  // ..здесь много кода
  var v = 'test'; // внезапно объявляем ещё одну переменную
  // ..здесь дальше код
  function f(){ /* тело ф-ии */ } // объявили функцию
}

Стало:

function x(){
  function f(){ /* тело ф-ии */ } // объявили функцию
  var v;
  // ..здесь много кода
  var v = 'test'; // внезапно объявляем ещё одну переменную
  // ..здесь дальше код
}

Объявления функций так же могут находиться где-то ниже по коду внутри контекста, и при этом тоже «переезжают» вверх при исполнении. Причём, как пишут некоторые источники, становятся до объявления всех переменных.

Сначала function, потом var, потом v = 'test'.

В вашем суперпримере ещё один вопрос: какое объявление function() сработает раньше – в правой части назначения переменной, или самостоятельное. Раньше сработает самостоятельное – function declaration. Назначение func = function(){..} выполнится в последнюю очередь.

Итак, сначала объявляется ф-я с 2, затем объявляется переменная func (и вызывает ошибку, т.к. с таким именем уже есть ф-я), а потом эта переменная получает значение ф-ии с 1. По-моему, это правильная реализация JS стандартов.

Тесты:

  • FireFox 45.0.1, ScratchPad, консоль FireBug: "1"
  • Chrome 49.0.2623.87 (64-bit), Uncaught SyntaxError: Identifier 'func' has already been declared
  • Safari 9.1 (11601.5.17.1), консоль: 1
  • Opera 34.0, консоль: 1
  • Opera 36.0, консоль: Uncaught SyntaxError: Identifier 'func' has already been declared
7
  • 2
    что примечательно, если этот код поместить в функцию - Uncaught SyntaxError не будет, по крайней мере в хроме, и выведет 1
    – Grundy
    28 мар 2016 в 7:14
  • Точки над i расставит "use strict"; : )
    – Sergiks
    28 мар 2016 в 7:16
  • это да :-) но я думал по умолчанию он отключен в консоли.
    – Grundy
    28 мар 2016 в 7:17
  • Хотя нет, не помог use strict - ошибки нет - и по прежнему выводит 1 :)
    – Grundy
    28 мар 2016 в 7:21
  • тоже попробовал с обёрткой в ф-ю и "use strict" в FF и Chrome – никаких Warning'ов. Чудеса..
    – Sergiks
    28 мар 2016 в 7:29

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.