<div dir="auto">You can use getters mutating an object for this task.<div dir="auto"><br></div><div dir="auto">But why do you need this? </div></div><div class="gmail_extra"><br><div class="gmail_quote">On 24 Oct 2017 7:25 pm, "/#!/JoePea" <<a href="mailto:joe@trusktr.io">joe@trusktr.io</a>> wrote:<br type="attribution"><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex">Well, I know I can set accessors on a prototype easily, but what I<br>
mean is, I need each instance of an `Element` to have exactly one<br>
instance of something right after construction during the same<br>
synchronous operation.<br>
<br>
For example, if we have an application with a bunch of pre-existing<br>
Elements that do not extend from any classes of mine, I'd like for the<br>
all to have `foo` properties, so that I can do this:<br>
<br>
```js<br>
const el = new SomeCustomElementThatWasDefine<wbr>dCreatedByMe<br>
console.log(el.foo) // it exists and is specific to the instance, not<br>
a prototype property<br>
<br>
// or<br>
<br>
const div = document.createElement('div')<br>
console.log(div.foo) // it exists and is specific to the instance, not<br>
a prototype property<br>
```<br>
<br>
Can this be done?<br>
/#!/JoePea<br>
<br>
<br>
On Tue, Oct 24, 2017 at 10:19 AM, /#!/JoePea <<a href="mailto:joe@trusktr.io">joe@trusktr.io</a>> wrote:<br>
>> This feels like a problem similar to <a href="https://esdiscuss.org/topic/block-scoped-prototype-extensions" rel="noreferrer" target="_blank">https://esdiscuss.org/topic/<wbr>block-scoped-prototype-<wbr>extensions</a><br>
><br>
> @Boris, even if it were scoped, how do we monkey patch a<br>
> *constructor*? By the way, for some reason your link to<br>
> `<a href="https://esdiscuss.org/topic/block-scoped-prototype-extensions`" rel="noreferrer" target="_blank">https://esdiscuss.org/topic/<wbr>block-scoped-prototype-<wbr>extensions`</a> posted<br>
> as `<a href="https://esdiscuss.org/topic/block`" rel="noreferrer" target="_blank">https://esdiscuss.org/topic/<wbr>block`</a> which is 404. If you can edit<br>
> it it would help others not to stumble on a broken link.<br>
><br>
>> if that would be possible, then everyone could just monkey patch Object, right?<br>
><br>
> But everyone can monkey patch the entire class already, aside from the<br>
> constructor, by modifying the prototype. Obviously if someone returns<br>
> something new from the constructor they might break everything, but it<br>
> will be completely obvious and people then won't do that. The same<br>
> applies with methods and properties, it is super easy to break entire<br>
> applications monkey patching methods.<br>
><br>
> ---<br>
><br>
> So suppose I want to "polyfill" a concept. For example, I want all<br>
> elements to have a new "foo" accessor after they've been constructed.<br>
> Or for example, suppose `HTMLElement.prototype.style` and<br>
> `SVGElement.prototype.style` didn't exist yet. How would I patch those<br>
> in?<br>
> /#!/JoePea<br>
><br>
><br>
> On Tue, Oct 24, 2017 at 10:07 AM, Michał Wadas <<a href="mailto:michalwadas@gmail.com">michalwadas@gmail.com</a>> wrote:<br>
>> AFAIR DOM classes are not extensible by any means.<br>
>><br>
>><br>
>><br>
>> On 24 Oct 2017 6:51 pm, "/#!/JoePea" <<a href="mailto:joe@trusktr.io">joe@trusktr.io</a>> wrote:<br>
>>><br>
>>> Is it possible to monkey-patch an intermediate constructor of a built-in<br>
>>> subclass?<br>
>>><br>
>>> For example, suppose I want all `Element` instances in a web app to have<br>
>>> new instance properties, is there a way to monkey-patch the Element<br>
>>> constructor so that when I make a custom element by extending a subclass of<br>
>>> `Element` that the new logic will fire?<br>
>>><br>
>>> For example:<br>
>>><br>
>>> ```js<br>
>>> // monkey-patch the Element constructor somehow so that it logs "patched<br>
>>> in Element".<br>
>>><br>
>>> // then<br>
>>> class FooBar extends HTMLElement {}<br>
>>> customElement.define('foo-bar'<wbr>, FooBar)<br>
>>> new FooBar // "patched in Element"<br>
>>> ```<br>
>>><br>
>>> I tried<br>
>>><br>
>>> ```js<br>
>>> const OldElement = window.Element<br>
>>><br>
>>> window.Element = function Element() {<br>
>>>   const _this = new OldElement<br>
>>>   console.log("patched in Element")<br>
>>>   return _this<br>
>>> }<br>
>>><br>
>>> window.Element.prototype = OldElement.prototype<br>
>>> window.Element.prototype.<wbr>constructor = window.Element<br>
>>><br>
>>> class FooBar extends HTMLElement {}<br>
>>> customElements.define('f-b', FooBar)<br>
>>> new FooBar // does not log "patched in Element"<br>
>>> ```<br>
>>><br>
>>> But when I make a new custom element, constructing it seems to use the old<br>
>>> Element constructor, as if a non-global reference to the original<br>
>>> constructor is kept inside a module so that modifying the global wouldn't<br>
>>> have any effect.<br>
>>><br>
>>> Is there a way to monkey patch a constructor in the middle of a built-in<br>
>>> prototype chain or to otherwise inject construction logic to base classes of<br>
>>> existing class hierarchies?<br>
>>><br>
>>><br>
>>> /#!/JoePea<br>
>>><br>
>>> ______________________________<wbr>_________________<br>
>>> es-discuss mailing list<br>
>>> <a href="mailto:es-discuss@mozilla.org">es-discuss@mozilla.org</a><br>
>>> <a href="https://mail.mozilla.org/listinfo/es-discuss" rel="noreferrer" target="_blank">https://mail.mozilla.org/<wbr>listinfo/es-discuss</a><br>
>>><br>
>><br>
</blockquote></div></div>