试图在一些js代码中找出'this'

Question

<input type="button" value="Button 1" id="btn1"  />
<input type="button" value="Button 2" id="btn2"  />
<input type="button" value="Button 3" id="btn3"  onclick="buttonClicked();"/>


<script type="text/javascript">  

  function buttonClicked(){        
    var text = (this === window) ? 'window' : this.id;    
    console.log( text);        
  }

  var button1 = document.getElementById('btn1');  
  var button2 = document.getElementById('btn2');


  button1.onclick = buttonClicked;

  button2.onclick = function(){
    buttonClicked();
  };

</script>

题:

当点击button1,显示:btn1,点击button2和button3,显示:window,为什么不btn2,btn3？

Answer 1

button1.onclick = buttonClicked;

它显示是btn1因为 onclick （button1 的属性）现在指向buttonClicked，所以此调用的上下文是button1

button2.onclick = function(){
    buttonClicked();
  };

它显示，window因为 onclick （button2 的属性）现在指向一个匿名函数，并且在您调用的该函数内部buttonClicked();（类似于window.buttonClicked();），此调用的上下文是window

您的情况与按钮3：

<input type="button" value="Button 3" id="btn3"  onclick="buttonClicked();"/>

相当于：

btn3.onclick = function(){
    buttonClicked();
}

因为当您内联声明事件处理程序时，浏览器会自动将您的代码包装在匿名函数中。