'this'与'bind。(this)'vs.将事件传递给事件处理程序,React JS与vanilla JavaScript

时间:2017-03-27 14:16:45

标签: javascript javascript-events this

我正在漫长的之旅中了解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)不起作用?

JS Bin:http://jsbin.com/cezidi/edit?html,js,output

1 个答案:

答案 0 :(得分:4)

onclick="myFunction3.bind(this)" 

bind的返回值是新功能调用该函数时,调用myFunction3并将this值指定为bind的第一个参数。

你永远不会打电话给那个功能。

同样的理由适用于示例5.

如果您想调用此功能,请使用callapplybind用于设置新功能以便稍后调用(通常重复调用)。