Introspect bind function targets

kai zhu kaizhu256 at gmail.com
Tue Feb 5 16:42:30 UTC 2019


> for (var i = 0; i < 10; i++) {
>    foo({ handleClick: () => {} })
> }

your ux-workflow example of creating multiple, closure-bound handleClick's is wasteful, and more complicated than needs be.  the correct design-pattern is to delegate it with a single handClickDelegated (and figure out context from event.target.dataset) [1]

```html
<button data-prop-ii="1">button #1</button>
<button data-prop-ii="2">button #2</button>
<button data-prop-ii="3">button #3</button>
<script>
/*jslint browser, devel*/
(function () {
    "use strict";
    var handleClickDelegated;
    handleClickDelegated = function (event) {
        document.body.innerHTML += (
            "<div>clicked button #"
            + event.target.dataset.propIi
            + "</div>"
        );
    };
    document.body.addEventListener("click", handleClickDelegated);
}());
</script>
```

[1] https://codepen.io/kaizhu256/pen/xMLvzX


> On 5 Feb 2019, at 5:50 AM, Sultan Tarimo <thysultan at gmail.com> wrote:
> 
> For example given a set of values. A function that checks whether the values of the object are equal could shallow compare the values of each property in the object. However this heuristics falls short for inline/bound functions that share the same target/backing but are only different with respect to the function “objects" equality.
> 
> Consider the following:
> 
> function foo (props) {
>    return shallowCompare(props) ? expensiveOperation(props) : memorizedOperation(props)
> }
> 
> for (var i = 0; i < 10; i++) {
>    foo({ handleClick: () => {} })
> }
> 
> The function `handleClick` passed to “foo” always points to the same function target even though the closure object passed may be different on each iteration.
> 
> Function.isSameTarget(a, b)
> 
> Would expose some level of introspection to identify when the function is either a bound function referencing the same function target or a closure object referencing the same function target.
> 
> This would also allow things like:
> 
> class A {fn = () => {}}
> 
> Function.isSameTarget((new A).fn, (new A).fn) 
> _______________________________________________
> es-discuss mailing list
> es-discuss at mozilla.org
> https://mail.mozilla.org/listinfo/es-discuss

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://mail.mozilla.org/pipermail/es-discuss/attachments/20190205/e6b493f4/attachment-0001.html>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: Screen Shot 2019-02-05 at 10.37.24 AM.jpg
Type: image/jpeg
Size: 45176 bytes
Desc: not available
URL: <http://mail.mozilla.org/pipermail/es-discuss/attachments/20190205/e6b493f4/attachment-0001.jpg>


More information about the es-discuss mailing list