javascript - Javascript 中一个简单的 this 上下文更改示例

Question

我是 JS 的新手，并且已经阅读了很多关于 this 内容更改的怪癖行为，所以我做了一个最简单的例子:

HTML

<button>button1</button>

JavaScript

var button1, getText

button1 = document.getElementsByTagName('button')[0]

getText = function(){alert(this.textContent)}

button1.addEventListener('click', getText)

http://jsfiddle.net/e95ME/

但我看不到 this 的上下文发生了变化，因为代码有效。任何人都可以更改此代码或给出另一个简单示例来显示 this 的内容更改的古怪行为？

Answer 1

var button1, getText

button1 = document.getElementsByTagName('button')[0]

getText = function(){alert(this.textContent)} // called in context of `button1`

button1.addEventListener('click', getText)

getText(); // called in context of `window`

当窗口加载时，它会说 undefined，因为没有属性 window.textContent。当您单击按钮时，它应该显示 button1，因为它是在按钮的上下文中调用的。