对象在JavaScript中引用，但在使用事件侦听器时不引用

object in javascript reference by this but not when using event listener

本文关键字：引用 侦听器 事件 JavaScript 对象      更新时间：2023-09-26

为什么this没有引用对象，myObject？

当我这样做时console.log(this)返回undefined...为什么？

Javascript：

var myObject = {
                    
    product: document.getElementById('product'),
    
    button: document.getElementById('btn'),
    
    productView: function(){
        if (this.product.className === 'grid') {
            this.product.className = 'list';
        } else {
            this.product.className = 'grid';
        }
    },
    
    clickHandler: function(e) {
        var o = this;
        console.log(this);
        o.productView();
        e.preventDefault();
    },
    
    init: function (){
        this.button.addEventListener('click', this.clickHandler, false);
    }
};
myObject.init();​

演示

非常感谢

事件的处理程序方法中的.this是指正在单击的对象。使用类似 var self = myObject; 的东西，然后使用 self 而不是 this 。

您需要

将this绑定到对象的正确上下文。实现此目的的常见方法是将局部this的引用分配给 init 函数中的另一个变量：

init: function (){
    var that = this;
    this.button.addEventListener('click', function(e) {that.clickHandler(e)}, false);
}

调用this.clickHandler() 会将this设置为对象。但是，您只是将函数传递给addEventListener，浏览器将在调用函数时设置自定义this值。

如果要绑定当前this值，请使用 this.clickHandler.bind(this) 。bind返回的函数也将接收"错误"的this值，但它使用绑定的、正确的this值调用clickHandler。

首先，只需将"this"用于您的点击处理程序...

clickHandler: function(e) {
    console.log(this);
    this.productView();
    e.preventDefault();
}

然后你有几个选择。这里有两个...

选项 A：

init: function (){
    var o = this;
    this.button.addEventListener('click', function(e){
        o.clickHandler(e);
    }, false);
}

选项 B：

init: function (){
    this.button.addEventListener('click', this.clickHandler.bind(this), false);
}

我问了一个关于这些选项中哪一个是可取的相关问题：什么时候应该使用 JavaScript 引用对象而不是 .bind（）？

相关文章：