论坛首页 Web前端技术论坛

遇到prototyte一个很怪异的问题,大家一起讨论一下(已解决,总结一下)

浏览 9863 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2007-04-02  
搜索到了,相当好的解决方法

原文见:
Prototype.AjaxRequest的调用堆栈重写问题

对于这个帖子讨论的代码,可以这样修改

先在prototype.js的基础上实现一个ClassUtils类,定义如下方法

var ClassUtils=Class.create();
ClassUtils.prototype={
        _ClassUtilsName:'ClassUtils',
        initialize:function(){
        },
        /**
         * 给类的每个方法注册一个对类对象的自我引用
         * @param reference 对类对象的引用
         */
        registerFuncSelfLink:function(reference){
                for (var n in reference) {
                var item = reference[n];                        
                if (item instanceof Function) 
                                item.$ = reference;
            }
        }
}


然后此帖中的程序原来的代码改为:

function Test(url) {  
    this.url = url;  
    this.str = "responseText";
	new ClassUtils().registerFuncSelfLink(this);
}
  
Test.prototype = new Object();  
  
Test.prototype.test = function (tobj) {  
    //alert(tobj.url);  
    //alert(tobj.str);
    var funcHolder=arguments.callee.$;
    var ajax = new Ajax.Request(   
        this.url,{     
            method: "post",   
            parameters: "time=" +  new Date().getTime(),   
            onComplete:function(req){
                alert(funcHolder.url);  
                alert(funcHolder.str);
                funcHolder.str=req.responseText;
            }
        }   
    ); 
};


就没有什么问题了,我已经测试过
0 请登录后投票
   发表时间:2007-04-02  
先谢谢了,其实我只是想把异步读取来的数据,和一些操作,都封装到一个类里来完成,可刚写了一点就遇到了这个问题
0 请登录后投票
   发表时间:2007-04-02  
7thbyte 写道
搜索到了,相当好的解决方法

原文见:
Prototype.AjaxRequest的调用堆栈重写问题

对于这个帖子讨论的代码,可以这样修改

先在prototype.js的基础上实现一个ClassUtils类,定义如下方法

var ClassUtils=Class.create();
ClassUtils.prototype={
        _ClassUtilsName:'ClassUtils',
        initialize:function(){
        },
        /**
         * 给类的每个方法注册一个对类对象的自我引用
         * @param reference 对类对象的引用
         */
        registerFuncSelfLink:function(reference){
                for (var n in reference) {
                var item = reference[n];                        
                if (item instanceof Function) 
                                item.$ = reference;
            }
        }
}


然后此帖中的程序原来的代码改为:

function Test(url) {  
    this.url = url;  
    this.str = "responseText";
	new ClassUtils().registerFuncSelfLink(this);
}
  
Test.prototype = new Object();  
  
Test.prototype.test = function (tobj) {  
    //alert(tobj.url);  
    //alert(tobj.str);
    var funcHolder=arguments.callee.$;
    var ajax = new Ajax.Request(   
        this.url,{     
            method: "post",   
            parameters: "time=" +  new Date().getTime(),   
            onComplete:function(req){
                alert(funcHolder.url);  
                alert(funcHolder.str);
                funcHolder.str=req.responseText;
            }
        }   
    ); 
};


就没有什么问题了,我已经测试过


这个方法还是挺不错的
0 请登录后投票
   发表时间:2007-04-03  
this 指针指向的对象不一样,在 Test 类里 this 指向 test 类的实例,而 onSuccess 则是用 prototype 的 bind 绑在 ajax.request 类的实例,变量的作用域不同,因此不能访问
0 请登录后投票
   发表时间:2007-06-21  
cozone_柯中 写道
7thbyte 写道
搜索到了,相当好的解决方法

原文见:
Prototype.AjaxRequest的调用堆栈重写问题

对于这个帖子讨论的代码,可以这样修改

先在prototype.js的基础上实现一个ClassUtils类,定义如下方法

var ClassUtils=Class.create();
ClassUtils.prototype={
        _ClassUtilsName:'ClassUtils',
        initialize:function(){
        },
        /**
         * 给类的每个方法注册一个对类对象的自我引用
         * @param reference 对类对象的引用
         */
        registerFuncSelfLink:function(reference){
                for (var n in reference) {
                var item = reference[n];                        
                if (item instanceof Function) 
                                item.$ = reference;
            }
        }
}


然后此帖中的程序原来的代码改为:

function Test(url) {  
    this.url = url;  
    this.str = "responseText";
	new ClassUtils().registerFuncSelfLink(this);
}
  
Test.prototype = new Object();  
  
Test.prototype.test = function (tobj) {  
    //alert(tobj.url);  
    //alert(tobj.str);
    var funcHolder=arguments.callee.$;
    var ajax = new Ajax.Request(   
        this.url,{     
            method: "post",   
            parameters: "time=" +  new Date().getTime(),   
            onComplete:function(req){
                alert(funcHolder.url);  
                alert(funcHolder.str);
                funcHolder.str=req.responseText;
            }
        }   
    ); 
};


就没有什么问题了,我已经测试过


这个方法还是挺不错的


很强了.赞一个先.
0 请登录后投票
   发表时间:2007-07-30  
function handler(req){  
    alert(this.url);     
    alert(this.str);     


function handler(req){  
    alert(req.url);     
    alert(req.str);     

可以吗?
0 请登录后投票
   发表时间:2007-07-31  
其实,最简单的办法,还是把回调函数提取出来,作为对象的一个实例方法,然后用Prototype提供的bind方法来把this指针绑定到需要的对象上,具体的可以参看我以前写过的一篇文章,注意看中间那一段提到的“ Prototype为Function对象扩展了一个bind方法和bindAsEventListener方法,可以很方便的将函数上下文(this)切换为别的对象……”

 AJAX表格分页模板:探讨基于Prototype框架的javascript面向对象设计(中)

这样不需要任何hack就能达到目的,何乐而不为呢?
0 请登录后投票
   发表时间:2007-07-31  
function Test(url) {   
    this.url = url;   
    this.str = "want to save responseText";   
}   
  
Test.prototype.test = function () {   
    alert(this.url); //可以访问到   
    alert(this.str); //可以访问到   
   new Ajax.Request(   
        this.url,{     
            method: "get",   
            parameters: "time=" +  new Date().getTime(),   
            onSuccess: function(req){   
                alert(this.url); //可以访问到   
                alert(this.str); //无法访问到   
                //this.str = responseText; //期待的操作无法执行   
            }.bind(this)
           );   
};   
  
Event.observe(window, "load", pageLoad, false);   
                       
var url = "a action url";   
  
function pageLoad(){   
         var t = new Test(url);   
    t.test();   
}   


ok 了可以访问了,干吗说的那么复杂,不理解
0 请登录后投票
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics