Javascript：重新创建 Array.from？

Question

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

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

bind() 将 this 设置为提供的值，这里 [].slice （为什么？）
call() 允许我们使用 bind 绑定的 this 值调用 getSelection。
getSelection() returns 所选文本的 Selection 对象（或 Firefox 中的字符串）。这个我不确定。在它的使用中，arrayFrom 传递了一个样式表数组（或 NodeList），returns 传递了一个相同样式表数组（其浅表副本？）与使用 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函数。此 call 函数位于 Function 原型上，因此上面的结果与以下结果相同：

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

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

类似的行为

用这个做类似事情的函数替换 bind 可能会有所帮助：

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

这很令人困惑，但是我们用 call 调用 call 这样我们就可以为它提供一个 this 参数（定义我们要调用的函数），使 second argument this-argument that call (the first one) deals.

Javascript：重新创建 Array.from？

Javascript: recreating Array.from?

javascript

arrays

call

bind

getselection