Я потратил много времени на то, чтобы выяснить, что не следует использовать clear () в качестве имени функции в Javascript:

<head>
    <script type="text/javascript" src="Array.js"></script>
</head>
<body>
    Hello!!!!<br>
    <button type="button" onClick="clear()" id="ppp">Shoo!</button><br>
    <button type="button" onClick="add()" id="add">Add a few elements</button><br>
    <button type="button" onClick="check()" id="check">Check the array</button><br>
    <p id="results">Results will appear here.</p>
    <script type="text/javascript">
initialize();
    </script>
</body>

Вот Array.js:

var results;

function initialize(){
 results = document.getElementById("results");
}

function add() {
results.firstChild.data="add";    
}

function clear() {
results.firstChild.data = "Hello?";
}

function check() {
results.firstChild.data = "check";
}

Симптомы: щелчок на кнопке «add» и «check» «Кнопки» дают ожидаемый результат, но нажатие кнопки «Очистить» ничего не дает.

Если я переименую clear () clearxyz () , все будет хорошо.

Мои вопросы:

  1. Является ли «ясно» зарезервированным словом? Я не вижу его в списке: https://developer.mozilla.org/en/JavaScript/Reference/Reserved_Words
  2. Есть ли способ отладки, который я должен использовать, чтобы выяснить такого рода вещи в будущее? Мне потребовалось много времени (я нуб!), Чтобы понять, что имя функции было моей проблемой.

Большое спасибо. Редактирование: я использую Firefox 6.0 и добавил разрыв строки, чтобы показать, где начинается Array.js.

Как сказали другие, clear, не зарезервированное ключевое слово. Похоже, что вызываемой функцией является document.clear ВАЖНО . Вызов

console.log(clear === document.clear);

внутри обработчика события возвращает true Глядя на вывод

на Jake Archibald на HTML5 Rocks.

Так что, похоже, document находится в цепочке областей действия обработчика события …. теперь возникает вопрос, почему.

JavaScript: полное руководство , говорит:

В обработчике событий в виде атрибута HTML объект Document находится в цепочке областей действия перед объектом Window (…)

Поскольку ваш метод является глобальным, то есть он является свойством объекта window он не найден в цепочке областей действия, так как document.clear находится раньше в цепочке областей действия.

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

Если у вас есть элементы формы внутри формы, то даже соответствующий элемент form будет находиться в цепочке областей действия (хотя не уверен, что это верно для всех браузеров). Это еще одна причина путаницы.


Есть два (не исключительных) способа избежать таких ситуаций:

  • Не используйте встроенные обработчики событий. Это считается плохой практикой, так как смешивает логику и представление. Существуют другие способы присоединения обработчиков событий.

  • Не загрязняйте глобальное пространство имен. Создайте один объект в глобальной области видимости (имя которого, как вы уверены, не вступает в противоречие с какими-либо window или document свойствами или идентификаторами элементов HTML), и назначьте функции в качестве свойств этого объекта. Всякий раз, когда вы вызываете функцию, вы ссылаетесь на нее через этот объект. Там также Обратите внимание на перенос в для пространства имен вашего кода.

только месяцем и годом, используя css, чтобы скрыть дни и т. Д. И я думаю, что не получится смысл по-прежнему, потому что вам нужно нажать на даты, чтобы выбрать дату. MDN Глядя на вывод

Мы только что выпустили

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

function clear() {
    alert("you cleared just fine");
}

$('clear').addEvent('click', clear);

Наличие функции с именем clear, кажется, работает отлично.

Хороший вопрос. Я думаю, что проблема в ограниченном объеме — ваш onClick="clear()" не идет к функции clear, которую вы определили, но я не уверен, куда она идет. Изменение на window.clear() или новая функция, которая просто вызывает ваш clear, работает.

<body>
    Hello!!!!<br>
    <button type="button" onClick="clear()" id="ppp">Shoo!</button><br>
    <button type="button" onClick="window.clear()" id="ppp">window.clear!</button><br>
    <button type="button" onClick="clear2()" id="ppp">clear2!</button><br>
    <button type="button" onClick="add()" id="add">Add a few elements</button><br>
    <button type="button" onClick="check()" id="check">Check the array</button><br>
    <p id="results">Results will appear here.</p>
    <script type="text/javascript">
    var results;

function initialize(){
 results = document.getElementById("results");
}

function add() {
results.firstChild.data="add";    
}

function clear() {
results.firstChild.data = "Hello";
}

function clear2() {
clear();
}

function check() {
results.firstChild.data = "check";
}
initialize();
    </script>
</body>

Нет, clear не является зарезервированным ключевым словом.

Проблема в том, что, поскольку вы используете файл атрибута содержимого обработчика событий , ваша глобальная функция window.clear, затеняется устаревшим document.clear Глядя на вывод

Это поведение объясняется в шаге 10 получения текущего значения обработчика события Область действия Lexical Environment :

H

  1. Вот мое решение. Как сказал Энди Э., отвечая на вопрос является обработчиком события элемента , а затем пусть будет результатом NewObjectEnvironment ( область document global environment , В противном случае, объекта ).

    : пусть является обработчиком события является связанной функцией Window будет глобальным окружением , а затем пусть , владелец формы область быть не равен нулю, элемент элемента let Глядя на вывод

  2. Вот мое решение. Как сказал Энди Э., отвечая на вопрос Владелец формы не является нулевым, пусть элемент область document Владелец формы , область ).

  3. Вот мое решение. Как сказал Энди Э., отвечая на вопрос element не является нулевым, пусть элемент область document , Scope ).

Примечание: NewObjectEnvironment () определен в разделе ECMAScript версии 5 10.2.2.3 NewObjectEnvironment (O, E) Это означает, что глобальная область действия скрыта за

документом

  1. владельца формы, если есть
  2. элемент
  3. . Следовательно, вы можете

переименовать вашу функцию.

  • Этот подход не совсем надежен, потому что некоторые браузеры могут реализовать нестандартную функцию, которая скрывает ваши переменные. Или будущая спецификация может ввести эту функцию (

    function clear__() { document.body.style.background = 'green'; }
    <button type="button" onclick="clear__()">Click me</button>

    Вызывать вашу функцию как метод глобального объекта. Пример ).

  • Например, предполагая, что

    не скрыт, вы можете использовать window Избегать атрибутов содержимого обработчика событий. { *} Вместо этого вы можете использовать IDL-атрибуты обработчика событий или прослушиватели событий. window.clear Глядя на вывод

    function clear() { document.body.style.background = 'green'; }
    <button type="button" onclick="window.clear()">Click me</button>
  • Javascript — Как отправить действие Redux с тайм-аутом? — Stack Overflow

    javascript — Как отправить действие Redux с тайм-аутом? У меня есть действие, которое обновляет состояние уведомления моего приложения. Обычно это уведомление будет ошибкой или какой-либо информацией. Мне нужно через 5 секунд отправить еще одно действие, которое вернет состояние уведомления в исходное состояние, поэтому уведомление не требуется. . Основной причиной этого является предоставление функциональности, при которой уведомления автоматически исчезают через 5 секунд.

    function clear() { document.body.style.background = 'green'; }
    document.querySelector('button').onclick = clear;
    <button type="button">Click me</button>
    function clear() { document.body.style.background = 'green'; }
    document.querySelector('button').addEventListener('click', clear);
    <button type="button">Click me</button>