Зарезервированные имена функций в JavaScript

Проблема заключается в цепочке областей действия функций, скомпилированных из значений атрибутов элемента HTML, объявленных в исходном коде HTML. Атрибуты формы on_eventName=functionBodyCode демонстрируют такое поведение.

По историческим причинам (DOM не существовал в его нынешнем виде, document.getElementByID еще предстояло изобрести...) такие функции компилируются с цепочкой областей видимости, включающей объект, для которого предоставляется атрибут обработчика событий, любой form элемент, которым является элемент внутри и объект document. Однако разные браузеры использовали разные подходы к эмуляции поведения Netscape. Некоторые браузеры включали любой и каждый родительский объект элемента, предоставляющий атрибут обработчика событий, в то время как другие опускали некоторые соответствующие объекты, такие как document.

Технические подробности можно найти в Javascript в полном руководстве O'Reilly, раздел 19.1.6. Область действия обработчиков событий.

Основная рекомендация — избегать предоставления обработчиков событий в HTML — вместо этого добавьте их в JavaScript, используя addEventListener. Если по какой-либо причине вызовы функций должны быть закодированы в значениях атрибутов HTML, избегайте использования имен функций, которые являются методами объектов DOM.

Обратите внимание, что настраиваемая цепочка областей действия для обработчиков событий применяется только к функциям, созданным из атрибутов HTML. Он не применяется к функциям, созданным в JavaScript и добавленным к элементу с помощью addEventListener или element.onEventName=aFunctionObject.

Следующий фрагмент демонстрирует поиск имен свойств внешних элементов в цепочке областей видимости обработчиков событий, определенных в HTML:

<form name="formName1" action="">
<p> Try to access the elements collection of the form:
   <button type="button"
      onclick="console.log( elements);">elements
   </button>
</p>

</form>
<form name="formName2" action="" onsubmit="return false">
<p> Try to access form name as form.name:
  <button type="button"
     onclick="console.log( 'form.name: %s', form.name);">form.name
  </button>
</p>
</form>

<form name="formName3" action="" onsubmit="return false">
<p>Access document.write as "write"
   <button type="button"
      onclick="console.log( 'write: %s', write);">write
   </button>
</p>
</form>

• В первой форме elements является свойством окружающего элемента формы.

• Во второй форме form является свойством HTMLButtonElement.

• В третьей форме write является методом document.

• Ссылаясь на 2020 год, HTML5 определяет цепочку областей действия для обработчиков атрибутов HTML как элемент › внешний элемент формы › документ в разделе Scope в элементе нумерованного списка 3.9 внутренний необработанный нескомпилированный обработчик.

По какой-то странной причине кажется, что встроенные обработчики неявно используют with(this) при запуске, где this ссылается на элемент, вызвавший событие. Всякий раз, когда вы пытаетесь сослаться на что-то, если это что-то существует как свойство this, тогда в конечном итоге будет ссылка на это свойство, а не на внешнюю переменную с тем же именем:

console.log(typeof className); // Undefined in standard global scope
console.log(typeof scrollIntoView); // Undefined in standard global scope

.mydiv {
  width: 100px;
  height: 100px;
  background-color: red;
  cursor: pointer;
}

<div class="mydiv" onclick="
  console.log(typeof className); // Defined inside inline handler
  console.log(typeof scrollIntoView); // Defined inside inline handler
">

Для интерпретатора onclick фактически выглядит примерно так:

onclick="with(this) {
  console.log(typeof className);
  console.log(typeof scrollIntoView);
}"

Это довольно странно. Но встроенные обработчики событий в любом случае являются ужасной практикой, и, вероятно, их не следует использовать; вместо этого назначьте обработчик правильно с помощью addEventListener или onkeydown:

document.querySelector('.mydiv').onmousedown = () => scrollIntoView("id001");
function scrollIntoView(id) {
  console.log(id);
}

.mydiv {
  width: 100px;
  height: 100px;
  background-color: red;
  cursor: pointer;
}

    <div class="mydiv"></div>

Чтобы переопределить, просто попробуйте:

Element.prototype.scrollIntoView = function(id) {
    alert(id);
}

Но обратите внимание, что это работает с addEventListener:

var element = document.getElementById("element");

function scrollIntoView(id) {
    alert(id);
}

element.addEventListener("mousedown", function() {
    scrollIntoView("id001");
});

div {
  width: 100px;
  height: 100px;
  background-color: red;
  cursor: pointer;
}

<div id="element"></div>