Javascript：重新创建 Array.from？

Question

我遇到了这段代码，用于剥离 Marketo 表单中包含的样式表。我们假设代码作者是一位超级高级工程师。可以使用 Array.from() 来代替定义 arrayFrom（至少在功能上），那么为什么要使用后者呢？

就我而言，我试图理解 arrayFrom 定义（代码块的第一行）：

1. bind() 将 this 设置为提供的值，此处为 [] .slice（为什么？）
2. call() 允许我们使用 bind 绑定的 this 值调用 getSelection。
3. getSelection() 返回所选文本的 Selection 对象（或 Firefox 中的字符串）。这个我不确定。 在其使用中，arrayFrom 获取样式表数组（或 NodeList）并返回相同样式表的数组（其浅表副本？），与 Array.from 没有什么不同> 被使用，因此 bind 和 call 的功能位必须是以所需的方式更改 this 值。但不确定它如何作用于 [].slice 。

有人吗？我显然错过了一些东西。

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;
      } 
});

Answer 1

现在我们只使用 Array.from 。但您的问题与所使用的构造有关：

const arrayFrom = getSelection.call.bind([].slice);

首先，这与 getSelection 无关，因为表达式不绑定 that，而是绑定 调用 函数。此 call 函数位于 Function 原型上，因此上面的结果与以下内容相同：

const arrayFrom = Function.prototype.call.bind(Array.prototype.slice);

call 是一个允许一个函数调用另一个函数的函数函数可以为其提供 this 参数。这里我们定义要调用的函数应该是slice。我们将提供给 arrayFrom 的第一个参数将类似于我们提供给 call 的第一个参数，即应调用 slice 的对象。这使其具有与 Array.from 类似的行为。

用这个执行类似操作的函数替换 bind 可能会有所帮助：

function arrayFrom(arrayLike)  {
    return Function.prototype.call.call(Array.prototype.slice, arrayLike);
}

这很令人困惑，但我们用 call 调用 call ，这样我们就可以为其提供一个 this 参数（定义我们要调用的函数），使第二个参数成为调用的 this 参数 （第一个）处理。