Bug w JavaScript? Odwołanie się do elementu HTML poprzez nazwę jego ID, ale bez pobierania go.

Question

Napotkałem dziwną sytuację w JS. Mianowicie odwołałem się do elementu HTML używając po prostu nazwy jego ID, ale bez wcześniejszego pobrania tego elementu przez ID np. za pomocą document.getElementById(); Poza tym jako tekst paragrafu umieściłem ID tegoż elementu.

Kod: https://jsfiddle.net/trm6ayde/

Screen: http://imgur.com/HSpIyZS

Jak to jest możliwe? Jedyne co mi przychodzi do głowy, to że "nieMozliwe" zostało potraktowane jako zmienna globalna (bo nigdzie jej nie deklarowałem słówkiem var) i JS z automatu skojarzył tą nazwę (zmienną?) z ID elementu HTML. Czy to jakiś bug JavaScriptu?

Sytuacja nie ulega zmianie nawet z użyciem IIFE i 'use strict' https://jsfiddle.net/trm6ayde/1/

Answer 1

https://www.w3.org/TR/html5/browsers.html#named-access-on-the-window-object:

The Window interface supports named properties. The supported property names at any moment consist of the following, in tree order, ignoring later duplicates:

[…]

• the value of the id content attribute of any HTML element in the active document with a non-empty id content attribute.

W skrócie: każdy element, który ma atrybut [id] wypływa do globalnego scope i jest to ustandaryzowane jako część HTML5. A wzięło się to stąd, że w czasach Netscape i IE, gdy coś takiego jak DOM de facto nie istniało, tak się odwoływano do obiektów. A że Sieci nie można psuć itd., to zamiast wywalić ten bullshit, ustandaryzowano go. 

Comments

Ah – no i to nie jest bug w JS, a w DOM, jak już ;)

---

Czy użycie 'use strict' nie powinno tego ograniczać w jakiś sposób? Czy, jeśli w specyfikacji HTML coś jest ustandaryzowane, ale ogólnie nie jest bezpieczne w użytkowaniu albo nie należy do praktyk Clean Code, to czy choćby ECMA nie jest skłonna tego naprawić albo ograniczyć implementując do JavaScript jakiś mechanizm, który by wyrzucał błąd? Tak jak jest to w przypadku słówka this w środku funkcji wewnątrz metody obiektu:

http://forum.pasja-informatyki.pl/51989/jak-zapisac-this-podczas-tworzenia-obiektu-bez-konstruktora?show=51989#q51989

(...) Funkcja zadeklarowana wewnątrz metody nie trzyma już wartości this, nie jest przypisana do żadnego obiektu - a to zwyczajowo oznacza, że w takim wypadku this === window. Takie zachowanie zostało zmienione w ES5 strict mode i ES6 - wówczas wywołanie this w funkcji, która nie jest metodą (lub nie została przypisana do żadnego obiektu) rzuca odpowiednim błędem TypeError: http://jsfiddle.net/Comandeer/ob91ybxL/1/ (...)

---

Ale co ma ECMAScript do DOM? Przecież język a implementowane w nim APIs to całkowicie inne rzeczy.

W specyfikacji ES nawet nie pojawia się definicja obiektu window, jest jedynie wspomniany w kontekście definicji globalnego obiektu jako przykład → http://www.ecma-international.org/ecma-262/6.0/#sec-global-object
Obiekt window definiowany jest w specyfikacji HTML5 → https://www.w3.org/TR/html5/browsers.html#the-window-object
W specyfikacji ES można natomiast poczytać o tzw. host environment → http://www.ecma-international.org/ecma-262/6.0/#sec-overview

Dzięki takim definicjom można ES użyć nie tylko w przeglądarce (np. w node.js mamy obiekt global + scope modułów, a nie window bez scope'u modułów).

---

Ale co ma ECMAScript do DOM? Przecież język a implementowane w nim APIs to całkowicie inne rzeczy.

Chodziło mi o to, że JavaScript ma dostęp do HTMLa i może nim manipulować. Dlatego, jeśli globalna zmienna o nazwie identycznej do ID elementu HTML, może służyć do uzyskania dostępu do niego oraz manipulacji nim, to dlaczego JavaScript nie ma mechanizmu obronnego (szczególnie w trybie 'use strict'), który by wyrzucał błąd jeśli ktoś chciałby w ten sposób edytować sobie elementy HTML - zwłaszcza, że korzystanie z globalnych zmiennych nie jest dobrą praktyką?

---

Dalej nie rozróżniasz API od języka! Język nie może mieć mechanizmu obronnego na coś, czego nie definiuje. Obiekt window jest definiowany w specyfikacji HTML5, więc jest częścią BOM/DOM.