0

我正在尝试提高我的 JS 技能，并且我已经将一堆代码重写为命名空间对象文字（我认为。）但是现在我遇到了一个与“this”相关的问题。帮我理解？

这是缩写代码。

var MYAPP = {

    init: function(){
        $(document).on("click",".showLove", MYAPP.showLove);
    },
    showLove: function(){
         var thisId = MYAPP.findId();
         $.post(//// do AJAXy stuff using thisId);
    },
    findId: function(){
        var thisClass = $(this).attr('class');
        var thisIdPos = thisClass.indexOf("id-")+3;
        var thisId = thisClass.substr(thisIdPos, 3);
        return thisId;
    }
}

所以我相信你可能看到了这个问题。在 findId 函数中 $this 是未定义的，我得到一个错误。早些时候，我在 showLove 中有 findId 逻辑，一切正常。我将 findId 逻辑移到它自己的方法中，因为它在几个不同的地方使用。

所以让我问这个 -> 为什么 $(this) 指向 'showLove' 中的正确元素 .. 但不在 'findId' 中？由于从“showLove”内部调用“findId”，它不应该访问相同的变量，包括$（this）吗？这是我的第一个“自我=这个”情况吗？

我知道这是一个基本问题，但如果有人可以帮助我理解，我会......呃......'showLove'。

4

4 回答 4

1

如果你想保留这个，你需要做

MYAPP.findId.call(this);
于 2013-01-09T14:47:44.237 回答
1

this在 showLove 来自它的实例化$(document).on("click",".showLove", MYAPP.showLove);

var thisId = MYAPP.findId(this);// 传递给函数

findId: function(thisPassed){并以该名称引用它

至少是一种方法。

于 2013-01-09T14:48:39.420 回答
1

您正在传递MYAPP.showLove给 jQuery 并说“将此函数作为单击处理程序附加到文档”。

当您执行此操作时，会MYAPP.showLove 忘记它已附加到MYAPP，因为您只传递了function，而没有引用命名空间。

因此，当showLove作为点击处理程序执行时，this不再是MYAPP. 通常，当你从一个对象中分离一个函数时，this就会变成要么window或undefined（ES5）。但是，jQuery 决定this应该是.showLove被点击的元素，使用call()或apply()。

但是，当您调用MYAPP.findId()时showLove，this仍设置为MYAPP; 因为那findId是附加的（您正在调用方法） MYAPP。

要解决这个问题（没有双关语），您可以将值传递this给findId（首选，IMO），或使用call()/ apply()。

var MYAPP = {

    init: function(){
        $(document).on("click",".showLove", MYAPP.showLove);
    },
    showLove: function(){
         var thisId = MYAPP.findId(this);
         $.post(//// do AJAXy stuff using thisId);
    },
    findId: function(which){
        var thisClass = $(which).attr('class');
        var thisIdPos = thisClass.indexOf("id-")+3;
        var thisId = thisClass.substr(thisIdPos, 3);
        return thisId;
    }
}

或者：

var MYAPP = {

    init: function(){
        $(document).on("click",".showLove", MYAPP.showLove);
    },
    showLove: function(){
         var thisId = MYAPP.findId().call(this);
         $.post(//// do AJAXy stuff using thisId);
    },
    findId: function(){
        var thisClass = $(this).attr('class');
        var thisIdPos = thisClass.indexOf("id-")+3;
        var thisId = thisClass.substr(thisIdPos, 3);
        return thisId;
    }
}
于 2013-01-09T14:48:41.973 回答
1

我认为问题在于您如何调用findId函数。每当你这样做：

MYAPP.findId()

您正在静态引用该函数，该函数将在没有对象上下文的情况下执行。如果要保留该上下文，则需要像这样调用它：

MYAPP.findId.call(this)

通过这样做，您在 findId 中的this变量将绑定到您作为参数传递给调用函数的任何对象（在这种情况下，当前的this，因此您保留该引用）

另一方面：我建议你看看 underscore.js 的绑定函数，它是一个非常有用的助手！

于 2013-01-09T14:52:53.050 回答