Discuss
  • Introspect bind function targets

Introspect bind function targets

# Sultan (5 years ago)

A way to determine if two bound functions reference the same target function.

For example:

function proto () {}

const a = proto.bind(null, 1) const b = proto.bind(null, 2)

console.assert(Function.isSameTarget(a, b))

# Jordan Harband (5 years ago)

Given that you can also do const c = (...args) => proto.call(null, ...args);, and Function.isSameTarget(a, c) would presumably be false, can you elaborate more on the use case for this?

# Sultan Tarimo (5 years ago)

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)

# kai zhu (5 years ago)

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]

<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] codepen.io/kaizhu256/pen/xMLvzX