HTML 内联处理程序如何访问全局窗口对象及其中的变量?

Question

我正在测试一段代码。我有一个名为write的函数，我使用带有内联onclick处理程序的按钮来运行write()。

function write(text) {
alert(text)
}

<button onclick='write("Some text")'>
Write
</button>

令我惊讶的是，write()实际上执行了document.write().可以肯定的是，我用更多的功能测试了它。

function write(text) {
alert(text)
}

<button onclick='console.log(body)'>
document.body
</button>

然后，我想知道他们是否可以访问window.事实证明他们可以。但是，document.window是undefined.

console.log(document.window)
/*
Note that this example may not work due to StackSnippets using iframes
*/

<button onclick='window.open()'>
Open blank page
</button>

function doSomething(text) {
console.log(text)
}

<button onclick='doSomething("Some text")'>
doSomething
</button>

所以，我的问题是，为什么内联事件处理程序可以访问window的属性，即使document是全局范围，而document.window是undefined？

Answer 1

在内联事件处理程序中，如果this.property存在，则默认为该处理程序。如果没有，它会回退到document.property。如果甚至不存在，最后，它会在全局window范围内执行该代码。

一些例子

在此示例中，内联处理程序默认document作为全局范围。

document.someProperty = 'something'
var someProperty = 'something else'

<button onclick='console.log(someProperty)'>
Button
</button>

在此示例中，它默认为window。

var someProperty = 'something'

<button onclick='console.log(someProperty)'>
Button
</button>

在另一个示例中，它默认为this，这是元素。

<button style='color: red' onclick='console.log(style.color)'>
Button
</button>