调用匿名函数的 MDN 示例

Question

伙计们，我想了解为什么 call 真的有效，我是面向对象的 java 脚本、this 关键字和 call 之类的函数的新手。

我在网上的一个程序中找到了以下行：

this.tabs = [].slice.call( this.el.querySelectorAll( 'nav > ul > li' );

我尝试理解每个功能并且非常成功，实际上下面的线程帮助了我：

Link

但是后来理解调用有点困难，尤其是在查看MDN call doc's 之后。

我不太明白 MDN 文档中的这个例子：

使用调用来调用匿名函数：

var animals = [
  { species: 'Lion', name: 'King' },
  { species: 'Whale', name: 'Fail' }
];

for (var i = 0; i < animals.length; i++) {
  (function(i) {
    this.print = function() {
      console.log('#' + i + ' ' + this.species
                  + ': ' + this.name);
    }
    this.print();
  }).call(animals[i], i);
}

现在我理解了 Object 字面量，我理解了 for 循环，我理解了 IIFE，我理解了 this.print();被调用的函数，

但我不明白的是以下行：

call(animals[i], i);

以及传递给它的参数。

亲切的问候。

Answer 1

(function () { ... }).call(animals[i], i) 调用函数(function () { ... })“on”对象animals[i]（即：在调用范围内，this 将是animals[i]），参数为i。

换句话说，就是这样的：

animals[i].f = function () { ... };
animals[i].f(i);

除非不必设置animals[i].f。

Answer 2

也许更简单的解释方法是将其折叠一下：

 (function(i) {
    this.print = function() {
      console.log('#' + i + ' ' + this.species
                  + ': ' + this.name);
    }
    this.print();
  }).call(animals[i], i);

到

(function(i) {...}).call(animals[i], i);

该调用可能被错误地认为是应用于动物[i]，但它实际上是应用于已定义的匿名函数。换句话说，“call”方法是在刚刚创建的匿名函数上调用的。通过这种方式，该函数无需明确定义即可应用于动物。