Почему функция javascript в теле имеет приоритет над функцией в голове? - PullRequest
Новая
       5

Почему функция javascript в теле имеет приоритет над функцией в голове?

0 голосов
/ 03 июня 2018

Я пытаюсь понять порядок исполнения в javascript.Почему foo в теле имеет приоритет перед foo в голове?Разве это не foo в голове, которая компилируется первой?

<head>
  <meta charset="UTF-8">
  <title>Hello</title>

  <script type="text/javascript">
    function foo() {
      greeting = "hello from the head";
      alert(greeting);
    }
  </script>
</head>

<body>
  <div id="clickMe" onclick="foo()">Click me</div>
  <script>
    function foo() {
      greeting = "hello from the body";
      alert(greeting);
    }
  </script>
</body>

</html>

Ответы [ 4 ]

0 голосов
/ 03 июня 2018

По сути, это просто потому, что в тексте есть последняя функция, которую он читает, поэтому он просто придерживается ее.

Помните, что HTML-документ читается сверху вниз, так что если у вас есть два экземплярата же самая функция, она фактически будет держать ближайшую к концу документа

0 голосов
/ 03 июня 2018

Это вызов Shadowing.

JS-компилятор поднимает функции так, как они находятся в скрипте.Более поздние перезаписывают более ранние встречи с тем же именем. 

function foo() {
   console.log('Foo early');
}

function foo() {
   console.log('Foo late');
}

foo();    //Foo leate
0 голосов
/ 03 июня 2018

Это ничем не отличается от объявления одной и той же функции дважды 

function foo() {
  console.log("first");
}

function foo() {
  console.log("second");
}

foo();  // prints "second"

Что на каком-то уровне ничем не отличается от этого 

let bar;
bar = 1;
bar = 2;

bar теперь 2.

Вы можетеизбежать этого, используя другой синтаксис 

const foo = () => {
  console.log("first");
};

const foo = () => {
  console.log("second");
};

В этом случае вы получите ошибку 

Uncaught SyntaxError: Identifier 'foo' has already been declared

и, похоже, работает даже для сценариев 

<script>
const foo = () => {
  console.log("first");
};
</script>
<script>
const foo = () => {
  console.log("second");
};
</script>
0 голосов
/ 03 июня 2018

Более поздние объявления функций перезаписывают более старые объявления функций.Более старая функция все еще может быть вызвана до того, как объявлена ​​более новая функция : 

<script type="text/javascript">
  function foo() {
    greeting = "hello from the head";
    alert(greeting);
  }
  foo();
</script>
<div id="clickMe" onclick="foo()">Click me</div>
<script>
  function foo() {
    greeting = "hello from the body";
    alert(greeting);
  }
</script>

, но после запуска нижнего тега сценария имя функции переназначается.Это может иметь больше смысла, если вы посмотрите на это так, когда каждая функция переназначает window.foo: 

<script type="text/javascript">
  window.foo = function foo() {
    greeting = "hello from the head";
    alert(greeting);
  }
</script>
<div id="clickMe" onclick="window.foo()">Click me</div>
<script>
  window.foo = function foo() {
    greeting = "hello from the body";
    alert(greeting);
  }
</script>
...