Question

我的目标是建立“ this”作为对按钮对象的引用。我知道解决我的问题的方法是使用箭头函数，但是我很好奇，在创建按钮的新对象实例时是否重新定义了对“ this”的引用？还是初始点击方法没有继承“ this”引用开始？如果是后者，那么click方法的“ this”会成为初始按钮功能吗？

<button id=“test“> Click Me! </button>    
    <script>
        function Button( ) {     
            this.clicked = false;  
            this.click = function( ) { 
            this.clicked = true;              
            assert(button.clicked, “The button has been clicked“);             

                };         
      }
        var  button = new Button( ); 
        var  elem = document.getElementById(“test“); 
        elem.addEventListener(“click“, button.click);

事件监听器无法找到点击状态

Answer 1

如果您只是将button.click传递给addEventListener，那么您只是传递了该函数，并且该函数将在没有this上下文的情况下被调用。

因此，您已修复将函数绑定到对象的问题。

您可以编写以下内容，将click函数一次性地绑定到按钮对象：

elem.addEventListener('click, button.click.bind(button));

或者您可以通过在构造函数中编写以下代码来将click函数永久绑定到按钮对象：

this.click = this.click.bind(this);

或者您可以节省语法，并将它们组合在一起，如下所示：

this.click = function () {
  // ... your code here ...
}.bind(this);

function Button() {
  this.clicked = false;
  this.click = function () {
    console.log(this.secret);
  }.bind(this);
}
var button = new Button();
button.secret = 'It works';
var elem = document.getElementById('test');
elem.addEventListener('click', button.click);

<button id="test"> Click Me! </button>

我的新对象实例是否正在重新定义此参数？

1 个答案: