javascript - 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？

score 0 · Accepted Answer

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