Encontré este código para eliminar las hojas de estilo incluidas en los formularios de Marketo. Supongamos que el autor del código es un ingeniero super senior. Array.from() podría haberse usado en lugar de definir arrayFrom (funcionalmente en cualquier caso), entonces, ¿por qué usar este último?
Por mi parte, estoy tratando de entender la definición de arrayFrom (primera línea del bloque de código):
this en el valor proporcionado, aquí [].slice (¿por qué?)getSelection con this valor vinculado por bind .arrayFrom pasa una matriz (o NodeList) de hojas de estilo y devuelve una matriz de las mismas hojas de estilo (¿una copia superficial de las mismas?) de forma similar a si se Array.from , por lo que el bit funcional de bind y call debe ser para alterar this valor de una manera deseable. Sin embargo, no estoy seguro de cómo actúa eso en [].slice .¿Cualquiera? Claramente me estoy perdiendo algo.
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; } });Hoy en día solo Array.from . Pero sus preguntas son sobre la construcción que se utiliza:
const arrayFrom = getSelection.call.bind([].slice); En primer lugar, esto no tiene nada que ver con getSelection , ya que la expresión no vincula eso , sino la función de call . Esta función de call está en el prototipo de Function , por lo que lo anterior conduce al mismo resultado que:
const arrayFrom = Function.prototype.call.bind(Array.prototype.slice); call es una función que permite llamar a otra función con la posibilidad de proporcionarle un argumento this. Aquí definimos que la función a llamar debe ser slice . El primer argumento que proporcionaremos a arrayFrom será como el primer argumento que proporcionaríamos a call , es decir, el objeto en el que se debe llamar a slice . Esto le da un comportamiento similar al de Array.from .
Puede ser útil reemplazar bind por esta función que hace algo similar:
function arrayFrom(arrayLike) { return Function.prototype.call.call(Array.prototype.slice, arrayLike); } Es confuso, pero invocamos call con call para que podamos proporcionarle un argumento this (definiendo la función que queremos llamar), haciendo que el segundo argumento sea el argumento this del que trata la call (el primero).