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

Question

I wrote a quick custom extension for jQuery for a project I am working on. I am having a hard time understanding the scope of 'this' in a custom onChange method I would like implement. If left out the middle of my code where I am calling the webservice but if you checkout the last two methods, you will see where my problem is. I want to call the updateDetails method with the selected value changes. However, when that method is called within the onchange event, I obviously lose the scope of "this" as this.materialListResponse comes back as undefined in this context. Any help on helping me understand this would be greatly appreciated.

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

pass the object this as data to the event:

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

and then you can access that in the scope of the event callback

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

RESOURCES

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

Answer 2

The event handler will be called later, when you have exited the extension. It's called in the scope of the element, so this will be the element that has changed.

Copy the reference to the list to a local variable, and use that in the event handler:

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);
        }
    }
}

By using the local variable in the function, the variable will be part of the closure for the function, so it will survive the scope of the extension method where it is declared.

Answer 3

When a method is called in JavaScript as a callback it behaves as a function. In this case "this" refers to the owner of this function, usually the Window object in a Web browser.