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):

1. bind() sets this to the provided value, here [].slice (why?)
2. call() allows us to call getSelection with the this value bound by bind.
3. getSelection() returns a Selection object (or string in Firefox) of the selected text. This I'm unsure about. In its use, 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;
      } 
});

CodePudding user response：

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.