Question

您好我开始使用单例javascript设计模式，但我有一些范围问题。在这里，我只是尝试一个小的ajax，检索和存储单例。在单例函数中我调用另一个函数（this.ready，当ajax检索并存储数据时调用）但似乎“this”不是指单例，而是指“ Object #XMLHttpRequest “根据chrome调试器，firefox只是说它未定义。

            var mag = {
                magObj: [], // object to store the retrieved json data

                getData: function(){
                    request = getHTTPObject(), // defined externally
                    request.onreadystatechange = this.setData;
                    request.open("POST", "be.php", true);
                    request.send(null);
                },

                setData: function(){  
                    if (request.readyState == 4)
                    {
                        this.magObj = JSON.parse(request.responseText);
                        this.ready(); // this line yields the error, seems "this" does not refer to the singleton

                    }
                    else if (request.readyState == 1)
                    {

                    }
                },

                ready: function() {
                    console.log('ready');
                },

                construct: function(){
                    this.getData();
                },  
            }

此外，如果我尝试将getHTTPObject（）声明为顶部的单例变量，而不是使用全局变量，则会出现错误无法读取未定义的属性“readyState”。再次它是“this”getHTTPObject似乎未定义，即使我将它设置在顶部：

        var mag = {
            magObj: [],
            request: getHTTPObject(),

            getData: function(){

                this.request.onreadystatechange = this.setData;
                this.request.open("POST", "be.php", true);
                this.request.send(null);
            },

            setData: function(){  
                if (this.request.readyState == 4) // debugger says this.request is undefined
                {
                    this.magObj = JSON.parse(this.request.responseText);

                }
                else if (this.request.readyState == 1)
                {

                }
            },

            construct: function(){
                this.getData();
            },  
        }

Answer 1

<强>＃1
setData是XMLHttpRequest对象的回调函数。因此它运行在XMLHttpRequest对象的范围内。使用mag代替this。

<强>＃2
与#1相同：this是指XMLHttpRequest，而不是mag变量。

Answer 2

如果是单身，你可以试试

           var mag = {
            magObj: [], // object to store the retrieved json data

            getData: function(){
                request = getHTTPObject(), // defined externally
                request.onreadystatechange = this.setData;
                request.open("POST", "be.php", true);
                request.send(null);
            },

            setData: function(){  
                if (request.readyState == 4)
                {
                    this.magObj = JSON.parse(request.responseText);
                    mag.ready(); // this line yields the error, seems "this" does not refer to the singleton

                }
                else if (request.readyState == 1)
                {

                }
            },

            ready: function() {
                console.log('ready');
            },

            construct: function(){
                this.getData();
            },  
        }

Answer 3

要解决范围问题，您需要在javascript中使用闭包的概念。基本上是一个范围，其中函数可以访问创建该函数的上下文中的属性和方法..可以更清楚地解释..尝试将mag对象初始化为函数..

var mag = function(){
    var magObj = [];
    var getData = function(){
        //here you'll have access to the magObj collection
    };
}

上一个是javascript闭包的经典示例.. 当然，您只需将mag对象实例化为函数调用 mag（）;

希望这有帮助。

javascript单例范围问题“这个”

3 个答案: