Проблема с областью Javascript

Question

У меня проблемы с областью видимости в javascript. Я использую плагин jquery для написания класса, который является оберткой для наших выпадающих элементов управления.

проблема в функции loadJsonList, вызов this.addOption(s.itemValue, s.itemText); не работает, так как метод не существует. Я знаю, что у JS странная область видимости, но я понятия не имею, как я могу запустить эту функцию в этой области ??

jQuery.Class.extend("DDL",
{
    id: '',
    isTelerik: false
},
{
    init: function (newid) {
        this.Class.id = newid;

    },
    getValue: function () {
        return $('#' + this.Class.id).val();
    },
    getText: function () {
        return $('#' + this.Class.id + ' :selected').text();
    },
    setValue: function (newValue) {
        try {
            $('#' + this.Class.id).val(newValue);
        } catch (err) {
            alert(err);
        }
    },
    setText: function (newText) {
        try {
            $('#' + this.Class.id + ' :selected').text(newText);
        } catch (err) {
            alert(err);
        }
    },
    loadJsonList: function (list, param1, param2, param3) {
        this.clearItems();

        //init the service
        var j = new JsonRPC();

        // get the cut down data table
        var dt = j.getDropDownData(list, param1, param2, param3);

        // parse the datatable and load it into the telerik combo box
        jQuery.each(dt, function (i, s) {
            this.addOption(s.itemValue, s.itemText);
        });
    },
    addOption: function (value, text) {
        $('#' + this.Class.id).append('<option value="' + value + '">' + text + '</option>');
    },
    removeOption: function (value) {
        $('#' + this.Class.id + ' option[value="' + value + '"]').remove();
    },
    clearItems: function () {
        $('#' + this.Class.id + ' option').remove();
    }
});

Answer 1

Простой. JavaScript использует определение уровня функции, поэтому вы сохраняете ссылку на переменную this под другим именем:

loadJsonList: function (list, param1, param2, param3) {
        // save a reference for use in the each function later
        var self = this; 
        this.clearItems();

        //init the service
        var j = new JsonRPC();

        // get the cut down data table
        var dt = j.getDropDownData(list, param1, param2, param3);

        // parse the datatable and load it into the telerik combo box
        jQuery.each(dt, function (i, s) {
            // use self instead of this!
            self.addOption(s.itemValue, s.itemText);
        });
    },

Answer 2

this в области действия этой функции не совпадает с this вашего объекта, вам необходимо присвоить ему переменную псевдонима в окружающей области для доступа к ней внутри внутренней функции:

var self = this;     
jQuery.each(dt, function (i, s) {
     self.addOption(s.itemValue, s.itemText);
});

Answer 3

Что вы ищете, так это прокси-метод jQuery (http://api.jquery.com/jQuery.proxy):

// Description: Takes a function and returns a new one that will always have a particular context.
jQuery.proxy( function, context )

Итак, в приведенном выше примере вы бы использовали его следующим образом:

loadJsonList: function (list, param1, param2, param3) {

   // ...

   jQuery.each(dt, jQuery.proxy(function (i, s) {
       this.addOption(s.itemValue, s.itemText);
   }, this));
},