Является ли "ясным" зарезервированное слово в Javascript?

Я просто долгое время выяснял, что я не должен использовать 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";
}

Симптомы: нажатие кнопок "добавить" и "проверка" дает мне результат, который я ожидаю, но нажатие кнопки "clear" ничего не делает.

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

Мои вопросы:

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

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

Ответы

Ответ 1

Как говорили другие, clear не зарезервированное ключевое слово. Похоже, что вызываемая функция document.clear [MDN]. Вызов

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

внутри обработчика событий возвращается true.

DEMO

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

JavaScript: окончательное руководство говорит:

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

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

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

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

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

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

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

Ответ 2

Не в соответствии с MDN.

Edit:

Мне было любопытно, поэтому я бросил вместе этот маленький jsfiddle.

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

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

Функция с именем clear, похоже, работает нормально.

Ответ 3

Хороший вопрос. Я думаю, что проблема связана с проблемой: ваш 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>

Ответ 4

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

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

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

Лексическая область окружения

  • Если H является элементом обработчиком событий, то пусть Scope будет результатом NewObjectEnvironment (документ, глобальная среда).

    В противном случае H является Window object обработчик событий: пусть Область действия - глобальная среда.

  • Если владелец формы не равен null, пусть Scope будет результатом NewObjectEnvironment (владелец формы, область действия).

  • Если элемент не равен NULL, пусть Scope будет результатом NewObjectEnvironment (element, Scope).

Примечание: NewObjectEnvironment() определен в разделе ECMAScript 5 раздела 10.2.2.3 NewObjectEnvironment (O, E)

Это означает, что глобальная область видимости

  • Документ
  • Владелец формы, если таковой имеется
  • Элемент

Поэтому вы можете

  • Переименуйте свою функцию.

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