如何在一个函数中使用两个不同的作用域"this"？

因此，我需要通过Jquery事件获取给定元素的内部文本，然后将该文本设置为我的类的成员，例如

myClass = function ()
{
    this.index = 0;
    this.onNavElementClick = function ()
    {
        this.index = parseInt(this.text());
    }
    this.myMain = function ()
    {
        $("nav#wow-so-much-inspiration").on("click", "a", this.onNavElementClick);
    }
}
myObject = new myClass();
myObject.myMain();

HTML:

<nav id="wow-so-much-inspiration">
    <a href="#">1</a>
    <a href="#">2</a>
    <a href="#">3</a>
</nav>

但由于onNavElementClick()函数内部有两个不同的作用域，所以这将不起作用。。。我不喜欢做_this = this的想法，我很确定有一种正确的方法可以做到这一点，而不需要做MacGyver编码。

jQuery事件处理程序还将事件对象(包括触发事件的target(作为第一个参数。然后可以使用$.proxy将事件处理程序绑定到外部this。

类似这样的东西：

this.onNavElementClick = $.proxy(function (e)
{
    this.index = parseInt($(e.target).text());
}, this);

您可以使用bind方法，但我相信这已被证明对性能有轻微影响。

示例-这基本上就是$.proxy答案的作用。

var myClass = function ()
{
    this.index = 0;
    this.onNavElementClick = (function (event) {
        this.index = parseInt( $(event.target).text() );
    }).bind(this);
    this.myMain = function ()
    {
        $("nav#wow-so-much-inspiration").on("click", "a", this.onNavElementClick);
    };
}
var myObject = new myClass();
myObject.myMain();

另一种选择是使用带有简单包装器函数的call或apply。

var myClass = function ()
{
    this.index = 0;
    this.onNavElementClick = function (event)
    {
        this.index = parseInt( $(event.target).text() );
    };
    this.myMain = function ()
    {
        var self = this;
        $("nav#wow-so-much-inspiration").on("click", "a", function (event) {
            self.onNavElementClick.call(self, event);
        });
    };
}
var myObject = new myClass();
myObject.myMain();

在我的类构造函数中将onNavElementClick定义为var，并根据需要重用该函数。

var onNavElementClick = function(){...};

相关内容

最新更新

热门标签：