Question

我试图理解this关键字在JavaScript中是如何工作的，我制作了这个脚本：

function click(){
    this.innerHTML="changed";
}

在此HTML中使用：

<button id="clicker" onclick="click()" >Click me</button>

但它不起作用，任何人都可以解释原因吗？

Answer 1

this仅存在于onclick事件本身的范围内。它不会自动绑定到其他功能。

像这样传递：

function click(element){
element.innerHTML="changed";
}

和html：

<button id="clicker" onclick="click(this)" >Click me</button>

Answer 2

你的功能click不知道'这个'。将其更改为：

function click(elemenet){
    element.innerHTML="changed";
}

和

<button id="clicker" onclick="click(this)" >Click me</button>

Answer 3

您的问题似乎与this的价值有关。在内联处理程序中，this将代表window。您可以使用this设置.call()的值，因此它会提供您想要的值。

示例： 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作为函数名称时遇到问题。我会改变它。

Answer 4