代码:
var content = Array.prototype.map.call(document.getElementsByTagName("p"), function(e) {
return e.innerHTML;
});
它来自JavaScript的第367页:最终指南,第6版。
以下是我认为这段代码中发生的事情
变量content
被分配.map()
对document.getElementsByTagName("p")
返回的段落标记的NodeList
的调用的结果。
从Array.prototype
访问.map()
方法,并且使用.call()
将其this
值设置为段落标记NodeList
。由于.map()
应用有权访问item, index, array
的功能,因此function(e)
中的e
是NodeList
的项。
因此,content
变量最终由.innerHTML
对由当前文档中的段落标签组成的NodeList
中的每个Element
类型Nodes
的调用结果组成。
如果给定的HTML元素中没有其他节点,.innerHTML
将返回该元素的文本。否则,它将返回其中的HTML节点。
这是正确的吗?我试过:
- 阅读Function.prototype.call上的MDN文档
- 在搜索程序员SE时,我发现了"误解范围",我不知道该如何解释。它声称MDN文档不完整
- 阅读最终书中的更多内容
- 在JSFiddle中闲逛——代码按预期运行,我只想知道它是如何做的
只是为了真的挑剔:
如果给定的HTML元素中没有其他节点,
.innerHTML
将返回该元素的文本。否则,它将返回其中的HTML节点。
.innerHTML
始终返回元素的HTML内容,无论它是否包含子元素。当元素不包含子元素时,很难发现元素的文本和HTML之间的区别(但有区别!(。
HTML:
<div><</div>
JS:
console.log(document.getElementsByTagName("div")[0].innerHTML); // "<"
console.log(document.getElementsByTagName("div")[0].textContent); // "<"
FWIW,这首先是可能的,因为许多JavaScript方法更喜欢鸭子类型而不是依赖于继承
当我看到一只像鸭子一样走路、像鸭子一样游泳、像鸭子那样嘎嘎叫的鸟时,我称之为鸭子
因此,map()
将很乐意让您map()
任何感觉像数组的对象(即具有.length
属性(。
你也可以使用:
var content = [].map.call(document.getElementsByTagName("p"), function(e) { return e.innerHTML; });
但前者更可取,因为您不必创建然后一次性使用数组来访问map()
函数。