-1

所以今天我正在编写一个 AJAX 对象。

我创建了一个构造函数ajaxObj：

    function ajaxObj( arg1, arg2, wrapper ) {
             this.form = arg1;
             this.btn  = arg2;
             this.msg  = "Update successful";

             this.url  = "process.php";
             this.wrap = wrapper; // this is the div the callback uses

             this.serial = null; // serialized form for POSTing

             this.callback = function () {
                  var div = document.createElement("div");
                  div.innerHTML = this.msg;
                  div.setAttribute( "id", "desiredID" );
                  this.wrap.appendChild(div);

             }

             this.btn.onclick = initXHR;
    }

在给定页面上实例化了几个 ajaxObj 类型的对象。我想包含不会改变并且应该在原型上共享的功能：

ajaxObj.prototype = {
     constructor: ajaxObj,

     makeXHR: function () { 
               // cross browser XHR code returns XHR obj
     }

     makeSer: function () {
            this.serial = $(this.form).serialize();
     }

     initXHR: function () {
            // this is where shit gets weird!
            this.makeSer(); // makeSer function doesnt exit

            var http = this.makeXHR(); // makeXHR doesn't exist

            http.onreadystatechange = function () {
                     /* this function checked for 
                        http.status / http.readyState
                        and attempted to call this.callback() 
                        which of course didn't exist.

                        I also tried to change instance
                        properties here which did not work */
            }

            http.open( "POST", this.url, true ); /* this.url did not work
                                                     and had to be replaced
                                                     with "process.php"    */
            http.setRequestHeaders("Content-Type","application/x..."); // TL;DT
            http.send( this.serial ) // <--- this works just fine???
     }

在过去的一周里，我查看了许多类似的问题，并为此付出了很多时间和考虑。我的代码现在可以工作了，方法是从构造函数中取出回调，以及从原型中取出 makeXHR() 和 makeSer()并将它们全部放在全局范围内。

尽管我的代码可以正常工作，但令我懊恼的是，我仍然不明白为什么this.url在xhr.open()中不起作用，而 this.serial在xhr.send()中起作用

Bascally，为什么'this'在原型的某些地方有效（例如替换

ajaxObj.prototype = {
 .............
     initXHR: function () {
         makeSer();
      ....
      http.open( "POST", this.url, true );
      .... 
      http.send( this.serial );
      ....
}

和

ajaxObj.prototype = {
     .............
         initXHR: function () {
             this.serial = $(this.form).serialize();
             ....
             http.open( "POST", "process.php", true );
             .... 
             http.send(this.serial);
    }

....请不要让我迷惑。我的印象是我已经弄清楚了。当我使用 var 关键字时，在构造函数中设置 that=this 似乎不起作用，并且显然（对于 javascript，事情并不总是那么明显）删除等于值的 var 关键字集是用最新的对象实例实例化的。

4

2 回答 2

1

只需浏览您的代码，我就可以看到您的 initXHR 函数仅在触发目标按钮的 onclick 时被调用。如果您在 initXHR 中检查它，我相信您会发现它是您的按钮。

我认为根据您当前的课程设计，您将需要使用旧的

var self = this;

在您的构造函数中，并使您的 initXHR 成为特权函数（在您的构造函数中）以便访问它。我已经评论了下面的代码，以向您展示我添加到您的 ctor 中的内容。

function ajaxObj( arg1, arg2, wrapper ) {

     // Assign this -> self at the start of the func
     var self = this;

     this.form = arg1;
     this.btn  = arg2;
     this.msg  = "Update successful";

     this.url  = "process.php";
     this.wrap = wrapper;

     this.serial = null;

     this.callback = function () {
          var div = document.createElement("div");
          div.innerHTML = this.msg;
          div.setAttribute( "id", "desiredID" );
          this.wrap.appendChild(div);

     }

     // Make initXHR a privileged function, ie. one that has
     // access to private variables in ctor
     this.initXHR = function () {

         self.url // should be accessible here
     }

     this.btn.onclick = this.initXHR; // Assign it.
}
于 2013-02-23T23:58:45.327 回答
0

看看MDN 对this关键字的介绍。可能您将函数称为“错误”，即不在ajaxObj实例上。向我们展示那个调用。

this.serial有效而无效的原因this.url是您之前只是明确地分配了this.serial- 尽管它可能不是您期望的对象的属性。

于 2013-02-23T22:59:42.660 回答