If I declare an HTML element with an ID, I can access it via a property on the globalThis:
console.log(globalThis.foo) // <div id="foo"></div><div id="foo"></div>...but if I do Object.getOwnPropertyDescriptor(globalThis, 'foo') I get undefined.
Why?
console.log(Object.getOwnPropertyDescriptor(globalThis, 'foo')) // undefined<div id="foo"></div>The only answer I can think of is that a proxy is defined on window.
If you look at the MDN docs for getOwnPropertyDescriptor it states in the first paragraph that only properties directly present on the object will return a valid property descriptor. So it won't return a valid property descriptor if the property is either a) defined on the objects prototype (or its prototype, recursive) or b) defined in native code. Which is most likely the case this with globalThis.
The Object.getOwnPropertyDescriptor() method returns a property descriptor for an own property (that is, one directly present on an object and not in the object's prototype chain) of a given object.
As @52d6c6af figured out in the comments, DOM elements with IDs are defined on the WindowProperties object, which is part of the prototype chain of the window object.
console.log(Object.getOwnPropertyDescriptor(window.__proto__.__proto__, 'foo'))<div id="foo"></div>Also, as a rule of thumb. Don't use globalThis or window to access DOM elements. Use getElementById or querySelector.
const foo0 = globalThis.foo; const foo1 = document.getElementById('foo'); const foo2 = document.querySelector('#foo'); console.log(foo0 === foo1, foo1 === foo2);<div id="foo"></div>
Object.getOwnPropertyDescriptor works with them. eg. console.log(Object.getOwnPropertyDescriptor(globalThis, 'localStorage'))
localstorage in and of it self IS defined in native code. However the key "localstorage" on the globalThis object is a ordinary JS reference to the localhost object. (Bear in mind I'm not an engine developer so lets call these educated guesses)WindowProperties object on the prototype chain of window (window.__proto__.__proto__). I do not know if this is part of the Web standard, but it is present on Chrome, Safari and Firefox. If you add this information to your answer, I will accept it.
globalThisinheritsfoofrom some other object.