“this”关键字似乎无法正常工作

Question

我正在试图理解JavaScript中this关键字的工作原理，并编写了以下脚本：

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

在这个HTML中使用:

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

但是它不起作用，有人能解释一下为什么吗？

- nope

Answer 1

this 只存在于 onclick 事件本身的范围内，它不会自动绑定到其他函数。

像这样传递它：

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

和HTML：

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

- Pekka

Answer 2

你的函数 click 不知道关于 'this'。将它更改为:

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

and

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

- Spiny Norman

Answer 3

您的问题似乎是关于“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`作为函数名称的问题。我建议你修改它。

- user113716

Answer 4

请查看http://www.quirksmode.org/js/this.html

- Gabriele Petrioli