Javascript call() 方法

Question

我了解此代码有效：

var links = document.querySelectorAll('div');
for (var i = 0; i < links.length; i++) {
    (function(){
        console.log(this);
    }).call(links[i]);
}

但为什么这样做有效：

var links = document.querySelectorAll('div');
for (var i = 0; i < links.length; i++) {
    console.log.call(this, links[i]);
}

难道 this 不应该是 window 在调用每次迭代的上下文中的对象吗？

Answer 1

跟打电话没什么区别

var links = document.querySelectorAll('div');
for (var i = 0; i < links.length; i++) {
    console.log(links[i]);
}

你是对的，在这个范围内 this 关键字绑定到 window 对象，如果你运行下面的代码片段，你可以看到我附加了一个新的属性 SomeUniqueValue 到 window 对象，当使用 call 函数时，它可以在外观范围内访问。

现在，如果将该块包装在一个函数中，您可以看到 this 关键字被限制在调用块的范围内，因此在最后一个示例中只有 span 得到登录到控制台。

var links = document.querySelectorAll('div');
for (var i = 0; i < links.length; i++) {
    console.log(links[i]);
}

window.SomeUniqueValue = "WAWAWIWA";
for (var i = 0; i < links.length; i++) {
    console.log.call(this, SomeUniqueValue);
}

var someFunction = function() {
  'use strict';
  var links = document.querySelectorAll('span');
  for (var i = 0; i < links.length; i++) {
      console.log.call(this, links[i]);
  }
}

someFunction();

<div>This</div>
<div>Works</div>
<div>Fine</div>
<span>Inner Scope</span>

Javascript call() 方法

Javascript call() method

javascript

call