Question

下面的代码等效于jQuery的每种方法的Vanila JS

NodeList.prototype.each = function(fn) {
  for (var i = 0; i < this.length; i++) {
    fn.apply(this[i], [i, this[i]]);
  }
  return this;
};

有人可以解释为什么使用参数索引“ i”调用功能代码：fn.apply（this [i]，[i，this [i]]）;

Answer 1

func.apply(thisArg, [ argsArray])：

thisArg：为func调用提供的this值。

请注意，这可能不是该方法看到的实际值：如果 method是非严格模式代码中的函数，将为null和undefined 被全局对象替换，原始值将是盒装。此参数是必需的。

argsArray：可选的类似数组的对象，使用应该调用哪个函数，如果没有参数，则为null或undefined 应该提供给该功能。

只是在您的情况下：

this [i]是属于NodeList的当前元素。

每个是已添加到NodeList的新功能，您可以稍后使用，例如与 .querySelectorAll（'p'）

这里是一个例子：

NodeList.prototype.each = function(fn) {
    for (var i = 0; i < this.length; i++) {
        console.log('this[' + i + ']=' + this[i].outerHTML);
        fn.apply(this[i], [i, this[i]]);
    }
    return this;
};

document.querySelectorAll('p').each(function(idx, ele) {
    console.log('each call: idx=' + idx + ' and ele=' + ele.outerHTML);
})

<p>1</p>
<p>2</p>
<p>3</p>

JS在循环内应用功能

1 个答案: