“this”关键字似乎不起作用

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

请访问http://www.quirksmode.org/js/this.html