我的新对象实例是否重新定义了我的 this 参数？

Question

我的目标是建立“this”作为对按钮对象的引用。我知道解决我的问题的方法是使用箭头函数，但我很好奇，在创建按钮的新对象实例时是否重新定义了对“this”的引用？还是初始点击方法没有继承“this”引用？如果是后者，那么点击方法的“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 上下文的情况下被调用。

所以你修复了你已经将函数绑定到对象。

您可以编写以下内容，将点击功能作为 one-off 绑定到按钮对象：

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

或者你可以通过在构造函数中写入以下内容来将点击功能永久绑定到按钮对象：

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>

我的新对象实例是否重新定义了我的 this 参数？

Is my new object instance redefining my this parameter?

javascript

function

arrow-functions