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

Javascript范围问题

3 个答案: