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，因为它是在按钮的上下文中调用的。

Answer 2

你是说这个吗？

var button1, getText

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

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

button1.addEventListener('click', getText)

Answer 3

单击该按钮时，事件侦听器会将this设置为DOM元素本身。

就像你的函数被调用一样：

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

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

3 个答案: