如何在一個函數中使用兩個不同的范圍“this”？

Question

所以我需要通過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編碼。

Answer 1

jQuery事件處理程序還將事件對象（包括觸發事件的target ）作為第一個參數。 然后你可以使用$.proxy有你的事件處理程序綁定到外部this 。

像這樣的東西：

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

Answer 2

您可以使用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();

Answer 3

將onNavElementClick定義為my類構造函數中的var，並根據需要重用該函數。

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