Question

为什么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();

demo

非常感谢

Answer 1

事件处理程序方法中的.this引用被单击的对象。使用var self = myObject;之类的内容，然后使用self代替this。

Answer 2

您需要将this绑定到对象的正确上下文。我通常的方法是将本地this的引用分配给init函数中的另一个变量：

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

Answer 3

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

如果要绑定当前的this值，请使用this.clickHandler.bind(this)。 bind返回的函数也会收到“错误的”this值，但会使用绑定的正确clickHandler值调用this。

Answer 4

首先使用'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);
}

我问了一个相关问题，其中哪些选项更受欢迎：When should a JavaScript reference object be used versus .bind()?

javascript引用中的对象，但不是在使用事件监听器时

使用Javascript：

4 个答案: