4

我为我正在处理的项目编写了一个快速的 jQuery 自定义扩展。我很难理解我想要实现的自定义 onChange 方法中“this”的范围。如果在我调用 web 服务的代码中间省略了，但是如果您检查最后两种方法，您将看到我的问题出在哪里。我想用所选值更改调用 updateDetails 方法。但是，当在 onchange 事件中调用该方法时，我显然失去了“this”的范围，因为 this.materialListResponse 在此上下文中返回为未定义。任何帮助我理解这一点的帮助将不胜感激。

$.fn.appendMaterials = function (options) {

       this.options = options;

       //Set Default Options

       this.defaults = {

           typeID: '66E1320D-51F9-4900-BE84-6D5B571F9B80'

       };

       this.options = $.extend({}, this.defaults, options);

       //
       Code here to call web service and generate response XML
       //

       this.materialListResponse = $.xml2json(

       $.parseXML($(this.materialListWebservice()).find("GetMaterialTreeResponse").text())).Materials.Material;

       this.appendOptionString = function () {
           var i = 0;
           this.optionString = '<option>'
           for (i = 0; i < this.materialListResponse.length; i++) {
               this.optionString += '<option>' + this.materialListResponse[i].MaterialCode + '</option>';
           };

           this.append(this.optionString);

           return this;
       };

       this.appendOptionString();

       this.updateDetails = function () {
           for (i = 0; i < this.materialListResponse.length; i++) {

               if (this.materialListResponse[i].MaterialCode === this.val()) {

                   $('#table1 #MaterialDescription').val(this.materialListResponse[i].Description);

               }
           }
       }

       this.change(this.updateDetails)

   };
4

3 回答 3

5

将对象this作为数据传递给事件：

this.change({that: this}, this.updateDetails)

然后就可以that在事件回调的范围内访问

this.updateDetails = function(event) {
    var that = event.data.that;
    ...
}

资源

于 2012-08-31T19:27:15.670 回答
1

当您退出扩展时，稍后将调用事件处理程序。它在元素的范围内被调用，因此this将被更改的元素。

将对列表的引用复制到一个局部变量，并在事件处理程序中使用它：

var list = this.materialListResponse;
this.updateDetails = function() {
    for (i = 0; i < list.length; i++) {
        if (list[i].MaterialCode === this.val()) {
            $('#table1 #MaterialDescription').val(list[i].Description);
        }
    }
}

通过在函数中使用局部变量，该变量将成为函数闭包的一部分，因此它将在声明它的扩展方法的范围内存活。

于 2012-08-31T19:23:45.377 回答
1

当一个方法在 JavaScript 中作为回调调用时，它的行为就像一个函数。在这种情况下，“this”指的是这个函数的所有者，通常是 Web 浏览器中的 Window 对象。

于 2012-08-31T19:38:42.753 回答