HTML 内联处理程序如何访问全局 window 对象和其中的变量？

How can HTML inline handlers access the global window object and variables inside it?

我正在测试一段代码。我有一个名为 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？

在内联事件处理程序中，如果 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>