我试图了解 this 关键字在 JavaScript 中的工作原理，我编写了这个脚本：
function click(){
this.innerHTML="changed";
}
在此 HTML 中使用：
<button id="clicker" onclick="click()" >Click me</button>
但它不起作用，谁能解释为什么？
【问题讨论】：
标签： javascript html this
this 仅存在于onclick 事件本身的范围内。它不会自动绑定到其他函数。
这样传递：
function click(element){
element.innerHTML="changed";
}
和html：
<button id="clicker" onclick="click(this)" >Click me</button>
【讨论】：
你的函数click 不知道'this'。将其更改为：
function click(elemenet){
element.innerHTML="changed";
}
和
<button id="clicker" onclick="click(this)" >Click me</button>
【讨论】：
您的问题似乎与this 的值有关。在一个内联处理程序中，this 将代表window。您可以使用.call() 设置this 的值，因此它会给出您想要的值。
示例： http://jsfiddle.net/patrick_dw/5uJ54/
<button id="clicker" onclick="click.call(this)" >Click me</button>
现在在您的 click 方法中，this 将成为 <button> 元素。
原因是您的内联属性被包装在一个函数中，该函数本身具有元素的上下文。但它实际上并没有从那个上下文中调用你的函数。通过click()，它最终看起来像：
function onclick(event) {
click();
}
您的函数没有针对特定对象调用，因此隐含了 window。通过这样做：
<button id="clicker" onclick="click.call( this )" >Click me</button>
...你最终得到：
function onclick(event) {
click.call( this );
}
提供所需的上下文。也可以传递事件对象：
<button id="clicker" onclick="click.call( this, event )" >Click me</button>
...所以你最终得到：
function onclick(event) {
click.call( this, event );
}
所以现在在您的 click() 函数中，您将拥有您所期望的 event。
另外，您可能在使用 click 作为函数名时遇到问题。我会改的。
【讨论】：