在更改事件中了解 jQuery 中“this”的范围答案

【问题标题】：Understanding Scope of 'this' in jQuery on change event在更改事件中了解 jQuery 中“this”的范围
【发布时间】：2012-08-26 15:02:39
【问题描述】：

我为我正在从事的项目编写了一个快速的 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)

   };

【问题讨论】：

标签： javascript jquery scope

【解决方案1】：

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

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

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

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

资源

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

【讨论】：

你应该在事件处理程序中声明that变量，否则它将是全局的。
@Guffa：嗯。没看出来。删除我的答案。
@Guffa：已编辑。好地方，我习惯了coffeescript :)

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

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

【讨论】：