Question

我为我正在开发的项目编写了一个jQuery的快速自定义扩展。我很难理解我希望实现的自定义onChange方法中'this'的范围。如果省略我的代码中间我调用webservice，但如果你检查最后两个方法，你会看到我的问题所在。我想用所选的值更改调用updateDetails方法。但是，当在onchange事件中调用该方法时，我显然会失去“this”的范围，因为this.materialListResponse在此上下文中返回为undefined。任何帮助我理解这一点的帮助都将非常感激。

$.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)

   };

Answer 1

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

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

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

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

<强>资源

http://api.jquery.com/event.data/

Answer 2

退出扩展程序后，将稍后调用事件处理程序。它在元素的范围内调用，因此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);
        }
    }
}

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

Answer 3

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

了解更改事件中jQuery中'this'的范围

3 个答案: