I came across this code for stripping Marketo forms of their included stylesheets. Let's assume that the code author is a super senior engineer. Array.from()
could have been used instead of defining arrayFrom
(functionally at any rate), so why use the latter?
For my part I'm trying to understand the arrayFrom
definition (first line of the codeblock):
this
to the provided value, here [].slice
(why?)getSelection
with the this
value bound by bind
.arrayFrom
gets passed an array (or NodeList) of stylesheets and returns an array of the same stylesheets (a shallow copy thereof?) no differently than if Array.from
were used, so the functional bit of bind
and call
must be to alter the this
value in a desirable way. Not sure how that acts on [].slice
though.Anyone? I'm clearly missing something.
const arrayFrom = getSelection.call.bind([].slice);
// remove element styles from <form> and children
const styledEls = arrayFrom(formEl.querySelectorAll("[style]")).concat(
formEl
);
styledEls.forEach(function (el) {
el.removeAttribute("style");
});
// create an array of all stylesheets in document
const styleSheets = arrayFrom(document.styleSheets);
// loop through stylesheets and check for ownerNode properties on each
styleSheets.forEach(function (ss) {
if (
//array of <link/> elements tied to stylesheets
[mktoForms2BaseStyle, mktoForms2ThemeStyle].indexOf(ss.ownerNode) !=
-1 ||
formEl.contains(ss.ownerNode)
) {
ss.disabled = true;
}
});
Nowadays we would just use Array.from
. But your questions are about the construct that is used:
const arrayFrom = getSelection.call.bind([].slice);
First of all, this has nothing to do with getSelection
, as the expression is not binding that, but the call
function. This call
function is on the Function
prototype, so the above leads to the same result as:
const arrayFrom = Function.prototype.call.bind(Array.prototype.slice);
call
is a function that allows one to call another function with the possibility to provide a this-argument to it. Here we define that the function to be called should be slice
. The first argument we will provide to arrayFrom
will be like the first argument we would provide to call
, i.e. the object on which slice
should be called. This gives it a similar behaviour as Array.from
.
It may help to replace bind
by this function that does a similar thing:
function arrayFrom(arrayLike) {
return Function.prototype.call.call(Array.prototype.slice, arrayLike);
}
It is confusing, but we invoke call
with call
so that we can provide a this
argument to it (defining the function we want to call), making the second argument the this
-argument that call
(the first one) deals with.