我是否正确理解了此Function.prototype.call()代码？

Question

代码:

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

它来自p.367 JavaScript:The Definitive Guide,第6版.

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

该变量content被赋予对返回的段落标记的.map()调用结果.NodeListdocument.getElementsByTagName("p")

该.map()方法从中访问Array.prototype,其this值设置为段落标记NodeList使用.call().由于.map()应用了具有访问权限的函数item, index, array,因此ein function(e)是项目NodeList.

所以content变量最终被包含的结果.innerHTML在每个呼叫的Element类型Nodes在NodeList当前文档中由段落标记.

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

那是对的吗？我试过了:

1. 阅读Function.prototype.call上的MDN文档
2. 搜索程序员SE我发现了误解范围,我不确定如何解释.它声称MDN文档不完整.
3. 在权威书中阅读更多内容.
4. 在JSFiddle中乱七八糟 - 代码按预期运行,我只是想知道它是如何做的.

Answer 1

是的,正是这种情况正在发生.

只要是真正挑剔:

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

.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来依赖继承

当我看到一只像鸭子一样走路,像鸭子一样游泳,像鸭子一样呱呱叫的鸟儿时,我称这只鸟为鸭子

因此,很map()乐意让你感觉像一个数组(即有一个属性)的map()任何对象..length

您也可以使用:

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

...但前者是首选,因为您不必创建,然后一次性使用数组来访问该map()函数.