Question

在查看了有关此主题的几个不同问题之后，我仍然难以理解如何从对象中访问另一个函数。

window.Think = {
    initialize: function(){
        this.currentNumber = 0;
    },
    updateNumber: function(){
        this.currentNumber += 1;
    },
    listener: function(){
        document.getElementById('foo').addEventListener('click', function(){
        this.parent.updateNumber(); //this is where I want to call the prev function
    }
}

我得到的错误是Cannot call method 'updateNumber' of undefined

如何在Think.updateNumber()内致电listener()？

Answer 1

回调函数经常会丢失上下文（上下文是this的值）。所以你必须保存this的值。到与回调函数共享的局部变量。一个常见的约定是var self = this。

listener: function(){
    var self = this;
    document.getElementById('foo').addEventListener('click', function(){
        self.updateNumber();
    }
}

Answer 2

this将反弹到function的范围。解决方案是创建另一个变量，您可以将this引用到：

listener: function(){
    var that = this;
    document.getElementById('foo').addEventListener('click', function(){
        that.updateNumber();
    });
}

根据您定位的浏览器bind可能也是一种解决方案：

listener: function(){
    document.getElementById('foo').addEventListener('click', function(){
        this.updateNumber();
    }.bind(this));
}

Answer 3

问题在于关键字“this”代表什么。

listener: function(){//We call this is function one.
        document.getElementById('foo').addEventListener('click', function(){//function two
        this.parent.updateNumber(); //this is where I want to call the prev function
    }

在函数一中，“this”表示对象Think.In函数二，“this”表示元素foo。所以，如果你想调用方法updateNumber，你应该得到对象Think.We的引用将函数one的“this”保存在变量中，如下所示：

listener: function(){//We call this is function one.
        var outerThis=this;//save Think here.
        document.getElementById('foo').addEventListener('click', function(){//function two
        outerThis.updateNumber();//use Think.updateNumber here.
    }

现在我们完成了工作。因为在javascript中，函数可以访问它的外部函数的变量，所以我们可以在函数二中使用outerThis。

调用对象中的另一个函数

3 个答案: