用委托包装对象

时间:2014-10-01 02:30:55

标签: javascript

一个糟糕的标题,这可能不是我尝试做的最好的方式(仍在学习javascript),但我试图使用委托来包装对象。这种情况下的对象是XMLHttpRequest。

var wrapper = function() {
    this._delegate = /* get the delegate */
    this._delegate.onreadystatechange = function() {
        wrapper.readyState = this.readyState;

        /* stuff that synchronizes wrapper goes here */

        if(wrapper.onreadystatechange) {
            wrapper.onreadystatechange();
        }
    };
    return this;
}

以上是一个简化,但问题是当我向包装器对象添加onreadystatefunction时,如:

wrapper.onreadystatechange = function() {alert("hi)};

并且调用了wrapper._delegate.onreadystatechange函数,wrapper.onreadystatechange始终是未定义的,并且警报弹出窗口永远不会出现。我想我的范围错误,但我不确定如何解决这个问题。会欣赏其他建议,但我也想知道如何解决我做错的事情。谢谢!

修改

是的,这是一个不完整的例子。对于那个很抱歉。在尝试将其重写为一个完整的例子后,我意识到了我的问题。好像我没有外部" WRAP_FUNCTION"然后它会正常工作。我写过像

这样的东西
WRAP_FUNCTION = (function() {
    var originalXMLHttpRequest = window.XMLHttpRequest;
    var wrapper = function() {
        if(wrapper.wrapped) {
            this._delegate = new originalXMLHttpRequest;
        } else {
            this._delegate = new window.XMLHttpRequest
        }

        this._delegate.onreadystatechange = function() {
            wrapper.readyState = this.readyState;

            /* stuff that synchronizes wrapper goes here */

            if(wrapper.onreadystatechange) {
                wrapper.onreadystatechange();
            }
        };
        return this;
    };

    wrapper.prototype.open = function(method, url, async) {
        this._delegate.open(method, url, async);
    }

    wrapper.prototype.send = function() {
        this._delegate.send();
    }

    wrapper.wrapped = true;
    return wrapper;
}

window.XMLHttpRequest = WRAP_FUNCTION;

HTML code:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>

<script src="xmlhttp.js"></script>
<script type="text/javascript">
    (function() {
        var test = new XMLHttpRequest();
        test.open("GET", "xmlhttp.js", true);
        test.onreadystatechange=function()
        {
            if (test.readyState==4 && test.status==200)
            {
                alert("yay");
            }
        };
        test.send();
    })();
</script>
</body>
</html>

1 个答案:

答案 0 :(得分:-1)

试试这个。

var wrapper = function() {
    // in this time var wrapper not yet defined completly
    // if you want use wrapper on the finction
    // need to use this instead of wrapper
    var self= this;

    this._delegate = /* get the delegate */
    this._delegate.onreadystatechange = function() {

        //this means _delegate  is in this time
        //if you want to use this(wrapper)       
        //set the value out of function
        //like var self= this  

        //wrapper.readyState = this.readyState;
        self.readyState = this.readyState;

        /* stuff that synchronizes wrapper goes here */

        //if(wrapper.onreadystatechange) {
        //    wrapper.onreadystatechange();
        //}
        if(self.onreadystatechange) {
            self.onreadystatechange();
        }
    };
    return this;
}