javascript - 我是否正确理解了这个 Function.prototype.call() 代码？

Question

代码:

var content = Array.prototype.map.call(document.getElementsByTagName("p"), function(e) {
  return e.innerHTML;
}); 

来自 p. 367 of JavaScript:权威指南，第 6 版。

这是我认为这段代码中发生的事情。

变量content正在分配 .map() 的结果调用NodeList document.getElementsByTagName("p") 返回的段落标签数量.

.map()方法是从 Array.prototype 访问的, 及其 this值设置为段落标记 NodeList使用 .call() .自 .map()应用一个可以访问 item, index, array 的函数, e在function(e)是 NodeList 的项目.

所以 content变量最终由 .innerHTML 的结果组成调用每个 Element输入 Nodes在NodeList由当前文档中的段落标记组成。

.innerHTML如果其中没有其他节点，将返回给定 HTML 元素的文本。否则它将返回其中的 HTML 节点。

这样对吗？我试过:

1. 阅读MDN documentation on Function.prototype.call
2. 搜索 Programmers SE 我找到了 Misunderstanding Scope ，我不确定如何解释。它声称 MDN 文档不完整。
3. 在权威书中阅读更多内容。
4. 在 JSFiddle 中乱搞 - 代码按预期运行，我只想知道它是如何做的。

Answer 1

是的，这正是正在发生的事情。

只是真的挑剔:

.innerHTML will return the text of a given HTML element if it has no other nodes inside it. Otherwise it will return the HTML nodes inside it.

.innerHTML 总是 返回元素的 HTML 内容，无论它是否包含子元素。当元素不包含子元素时，很难发现元素的文本和元素的 HTML 之间的区别(但确实有区别!)。

HTML:

<div>&lt;</div>

JS:

console.log(document.getElementsByTagName("div")[0].innerHTML); // "<"
console.log(document.getElementsByTagName("div")[0].textContent); // "<"

---

FWIW，这首先是可能的，因为很多 JavaScript 方法更喜欢 duck typing依赖继承

When I see a bird that walks like a duck and swims like a duck and quacks like a duck, I call that bird a duck

正因为如此，map() 将愉快地让您map() 任何感觉像数组的对象(即有一个.length 属性)。

你也可以使用:

var content = [].map.call(document.getElementsByTagName("p"), function(e) { return e.innerHTML; }); 

...但前者是首选，因为您不必创建然后丢弃数组来访问 map() 函数。