javascript - document.body 与 Document.prototype.body

Question

自

document.__proto__.__proto__===Document.prototype

返回 true 并且因为

Document.prototype.hasOwnProperty('body')

也返回真

有人能给我解释一下为什么 document.body 和 Document.prototype.body 不是一回事吗？此外，为什么 Chrome 开发者工具中的 Document.prototype.body 结果为

Uncaught TypeError: Illegal invocation(…)
(anonymous function) @ VM6098:2
InjectedScript._evaluateOn @ VM3911:904
InjectedScript._evaluateAndWrap @ VM3911:837
InjectedScript.evaluate @ VM3911:693

而 document.body 结果为

<body...>...</body>

Answer 1

Document.prototype 是document.__proto__ 的类型(prototype..)，但不代表是同一个对象。通过继承，在对象的原型(prototype)链中查找未作为对象属性找到的属性。对于 document.body，它来自 Document.prototype.body，所以让我们看一下该属性:

console.log(Object.getOwnPropertyDescriptor(Document.prototype, 'body'))

可以看出，body 属性定义了一个getter 方法，它不是一个简单的原始值。这已经给了我们为什么 Document.prototype.body 可能会失败的提示——它需要一些实例来操作。

事实上，我们可以使用我们选择的 this 调用此方法，我们的 document 实例:

console.log(Object.getOwnPropertyDescriptor(Document.prototype, 'body').get.call(document))

现在可以很清楚地看出区别是什么以及为什么会有不同的行为。