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

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

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

在此HTML中使用：

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

但它不起作用，任何人都可以解释为什么？

已邀请:

4 个回复

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

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

和HTML：

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

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

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作为功能名称可能会出现问题。我会改变它。

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

要回复问题请先登录或注册