Question

我正在漫长的之旅中了解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

Answer 1

onclick="myFunction3.bind(this)"

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

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

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

如果您想调用此功能，请使用call或apply。 bind用于设置新功能以便稍后调用（通常重复调用）。

'this'与'bind。（this）'vs.将事件传递给事件处理程序，React JS与vanilla JavaScript

1 个答案: