我正在漫长的之旅中了解JavaScript中的 this 关键字(我很高兴得知Remy Sharp,创作者在他早期的时候,JS Bin也很难用这个关键词 - 所以不要失去对那些新手的希望。
1)我正在做this React JS tutorial并且在19:32有一些有趣的代码使用 this ,而事件作为函数的参数:
// code snippet 1
changeColor(event) {
this.setState({
color: event.target.value
});
}
// code snippet 2
<input value={this.state.color} onChange={this.changeColor.bind(this)}/>
所以我想我会在vanilla JavaScript中使用 this 和 event 。
2)这有效:
//javascript
function myFunction1() {
document.getElementById("demo1").innerHTML = this.event.target.value;
//this works too: event.target.value;
}
//HTML
<button onclick="myFunction1()" value="blah1" >Click me1</button>
<p id="demo1"></p>
3)这有效:
//javascript
function myFunction2(objButton) {
document.getElementById("demo2").innerHTML = objButton.value;
}
//HTML
<button onclick="myFunction2(this)" value="blah2" >Click me2</button>
<p id="demo2"></p>
4)为什么这不起作用?
//javascript
function myFunction3() {
document.getElementById("demo3").innerHTML = this.value;
}
//HTML
<button onclick="myFunction3.bind(this)" value="blah3" >Click me3</button>
<p id="demo3"></p>
5)为什么这不起作用?
//javascript
function myFunction4(event) {
document.getElementById("demo4").innerHTML = event.target.value;
}
//HTML
<button onclick="myFunction4.bind(this)" value="blah4" >Click me4</button>
<p id="demo4"></p>
总结一下,为什么(4)和(5)不起作用?
答案 0 :(得分:4)
onclick="myFunction3.bind(this)"
bind
的返回值是新功能。 当调用该函数时,调用myFunction3
并将this
值指定为bind
的第一个参数。
你永远不会打电话给那个功能。
同样的理由适用于示例5.
如果您想调用此功能,请使用call
或apply
。 bind
用于设置新功能以便稍后调用(通常重复调用)。