一个简单的Javascript上下文更改示例

我是JS新手，读过很多关于

this

内容更改的古怪行为的书，所以我举了一个最简单的例子：

HTML

<button>button1</button>

但是我看不出

这个
的上下文发生了变化，因为代码是有效的。任何人都可以更改此代码，或者给出另一个简单的示例来说明
此
的内容更改的奇怪行为

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`

当窗口加载时，它会说
未定义
，因为没有属性
window.textContent
。当您单击按钮时，它应该说
button1
，因为它是在按钮的上下文中调用的。
当单击按钮时，事件侦听器将
此
设置为DOM元素本身

就好像你的函数是这样调用的：

getText.call(<button-element>, <event>)

getText.call（，）
你是这个意思吗

var button1, getText

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

getText = function() {
    this.textContent = "changed content";
}

button1.addEventListener('click', getText)

这不是一个怪癖，而是一个基本特性。如果你是JS新手，请养成用分号结束语句的好习惯。@AtesGoral，或者，始终以安全的无分号风格书写；上面的代码片段不足以说明使用了（或没有使用）这种编码技术，但您对于“初学者”的说法可能是正确的，尽管我对最终的说法提出了质疑。@AtesGoral抱歉分号，我也在玩coffeescript和rubyThanks，您真的回答我甚至不能用wordgood示例，似乎addEventListener函数将当前节点的上下文传递给回调函数是的，您的答案就是我要找的
var button1, getText

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

getText = function() {
    this.textContent = "changed content";
}

button1.addEventListener('click', getText)