5

Привет.

Не понимаю, почему коды ниже работаю по-разному. Что у первого когда, что у второго - функция-обработчик события onclick кнопок имеет одинаковое имя. Разница между первым и вторым случаями - разное количество элементов скрипт.

Вот первый код:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button id="red">Hello!</button>
<button id="green">HelloTooo</button>
<script>
    function func(){
        alert('hello!');
    }
   document.getElementById("red").onclick=func;
  function func(){
        alert('Hello too!!!');
    }
    document.getElementById("green").onclick=func;
</script>

</body>
</html>

Вот второй код:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button id="red">Hello!</button>
<button id="green">HelloTooo</button>
<script>
    function func(){
        alert('hello!');
    }
    document.getElementById("red").onclick=func;
</script>
<script>
    function func(){
        alert('Hello too!!!');
    }
    document.getElementById("green").addEventListener('click', func, false);
</script>
</body>
</html>

4
  • 1
    В первом случае идёт переобъявление функции, поэтому работает всегда последняя. Во втором каждая имеет своё место
    – Doofy
    22 июл 2016 в 11:32
  • А ничего, что вы переопределяете функцию? если у вас будет две строки кода: var a = 10; var a = 100; вас не удивит, что в итоге значение переменной a будет равно 100? С функциями та же история.
    – Deonis
    22 июл 2016 в 11:32
  • первый случай мне понятен. а второй - нет. поэтому и задал вопрос
    – Dimon
    22 июл 2016 в 11:39
  • вы описали только первый случай - это "затирание". функция вторая "затирает" одноименную первую функцию
    – Dimon
    22 июл 2016 в 11:41

2 ответа 2

3

Определения функций поднимаются вверх текущего блока <script> либо файла.

В первом случае при поднятии функция объявленная позже просто перекроет объявленную выше поэтому фактически всегда присваивается последняя.

Во втором случае - во время выполнения первого блока скрипт, внутри него объявлена только одна функция, поэтому присваивается именно она, когда выполнение доходит до второго блока скрипт, функция опять переопределяется и во второй обработчик присваивается вторая функция.

9
  • а какой порядок подъема функций? Самая нижняя будет в самом верху и именно ее при вызове задействует интерпретатор?
    – perfect
    22 июл 2016 в 11:43
  • @perfect, да, будет доступна самая последняя объявленная.
    – Grundy
    22 июл 2016 в 11:48
  • я, вообще, первый раз слышу про "подъем" функций
    – Dimon
    22 июл 2016 в 12:00
  • @Dimon, Function declaration hoisting
    – Grundy
    22 июл 2016 в 12:18
  • 1
    @Dimon, я процитирую ответ: во время выполнения первого блока скрипт, внутри него объявлена только одна функция, поэтому присваивается именно она
    – Grundy
    22 июл 2016 в 12:27
-2

В первом случае интерпретатор создал объект (перед выполнением скрипта функциональные декларации в пределах элемента "скрипт" записываются браузером в список) { alert('hello!'); } (функция-это объект), на который ссылается свойство window.func, потом сразу же поменял его на другой - { alert('Hello too!!!'); }, а потом скрипт запустил. На первый объект ссылок вообще нет, он удаляется сборщиком мусора.

Во втором случае интерпретатор перед выполнением скрипта создал объект { alert('hello!'); } в свойстве window.func, затем скрипт отработал. Потом наткнулся на второй скрипт, переопределил предварительно свойство window.func (теперь оно ссылается на объект - { alert('Hello too!!!'); }) и скрипт отработал. Разница между этими двумя вариантами в том, КОГДА наступает переопределение свойства window.func - ПЕРЕД выполнением инструкции document.getElementById("red").onclick=func; или ПОСЛЕ выполнения.

1
  • 1
    Если бы не было предыдущего ответа, то не понял бы о чем вы тут написали...
    – t1nk
    26 июл 2016 в 19:40

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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