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

cavenaghi

浏览: 13983 次
性别:
来自: 辽宁抚顺

最近访客更多访客>>

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

Ajax prototype thread JavaScript 框架

function Test(url) {
	this.url = url;
	this.str = "want to save responseText";
}

Test.prototype.test = function () {
	alert(this.url); //可以访问到
	alert(this.str); //可以访问到
	var ajax = new Ajax.Request(
		this.url,{	
			method: "get",
			parameters: "time=" +  new Date().getTime(),
			onSuccess: function(req){
				alert(this.url); //可以访问到
				alert(this.str); //无法访问到
				//this.str = responseText; //期待的操作无法执行
			}
		}
	);
};

Event.observe(window, "load", pageLoad, false);
					
var url = "a action url";

function pageLoad(){
         var t = new Test(url);
	t.test();
}

在这里我创建一个页面,并导入了prototype,和上面这段代码.并注册页面的初始化事件
初始化事件只是创建一个我自定义的对象,并调用其中的一个方法

而当我调用这个方法的时候,

alert(this.url);
alert(this.str);
这些都可以正常访问

而在new Ajax.Request内部,却只能访问到this.url.无法访问this.str

===================================================================

上面是问题的阐述,在cozone_柯中和7thbyte的热心帮助下,终于找到了问题的解决方案

===================================================================

首先,在prototype中加入下列代码

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

接着写我新的Test类

function Test(url) {
	this.url = url;
	this.str = "want to save responseText";
	new ClassUtils().registerFuncSelfLink(this);
}

Test.prototype.test = function () {
	var funcHolder=arguments.callee.$;
	alert(this.url); //可以访问到
	alert(this.str); //可以访问到
	var ajax = new Ajax.Request(
		this.url,{	
			method: "get",
			parameters: "time=" +  new Date().getTime(),
			onSuccess: function(req){
				alert(funcHolder.url); //可以访问到
				alert(funcHolder.str); //可以访问到
				funcHolder.str = responseText; //期待的操作可执行
			}
		}
	);
};

Event.observe(window, "load", pageLoad, false);
					
var url = "a action url";
vat t = new Test(url);//这次把作用域扩大一下

function pageLoad(){
	t.test();//可以了
}
function getTest(){
	alert(t.str);//可以随时察看一下，确实改变了,呵呵
}

======================================================================

至此再次对cozone_柯中和7thbyte的热心帮助表示感谢

======================================================================

6月21号增加:

以上的解决方案太依赖于prototyte了,其实在平时的应用中this指针也是经常遇到的问题

现在将这部分独立出来,也可以解决了

<script language="javascript">
function registerSelf(reference){
                for (var n in reference) {
                var item = reference[n];                        
                if (item instanceof Function)
					item.$ = reference;
            }
        }

var Book = function(){
	this.name = "book";
}

Book.prototype = {
	main : function(){
		alert(9);
	}
}

var Car = function(name){
	this.name = name;
	registerSelf(this)
}
Car.prototype = {
	getName : function(){
		var book = new Book();
		book.main();
		var self = arguments.callee.$; 
		alert(self.name)
		book.main = function(){
			alert(self.name);
		}
		book.main();
	}
}

function main(){
	var car = new Car("boya");
	car.getName();
}
</script>

<a href="#" onClick="main();">do</a>

======================================================================

分享到：

用Applet实现表达式求值

2007-04-02 09:04
浏览 5227
评论(17)
论坛回复 / 浏览 (17 / 9949)
分类:Web前端
查看更多

17 楼 campaign 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 了可以访问了，干吗说的那么复杂，不理解

16 楼笨笨狗 2007-07-31

其实，最简单的办法，还是把回调函数提取出来，作为对象的一个实例方法，然后用Prototype提供的bind方法来把this指针绑定到需要的对象上，具体的可以参看我以前写过的一篇文章，注意看中间那一段提到的“ Prototype为Function对象扩展了一个bind方法和bindAsEventListener方法，可以很方便的将函数上下文（this）切换为别的对象……”<br/>
<br/>
<a href='http://scriptfans.iteye.com/blog/80298'> AJAX表格分页模板：探讨基于Prototype框架的javascript面向对象设计（中）</a><br/>
<br/>
这样不需要任何hack就能达到目的，何乐而不为呢？

15 楼 cdmar79 2007-07-30

function handler(req){
    alert(this.url);
    alert(this.str);
}
改
function handler(req){
    alert(req.url);
    alert(req.str);
}
可以吗?

14 楼 superwen 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;
            }
        }   
    ); 
};

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

这个方法还是挺不错的

很强了.赞一个先.

13 楼 hozaka 2007-04-03

this 指针指向的对象不一样，在 Test 类里 this 指向 test 类的实例，而 onSuccess 则是用 prototype 的 bind 绑在 ajax.request 类的实例，变量的作用域不同，因此不能访问

12 楼 cozone_柯中 2007-04-02

7thbyte 写道

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

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

这个方法还是挺不错的

11 楼 cavenaghi 2007-04-02

先谢谢了，其实我只是想把异步读取来的数据,和一些操作，都封装到一个类里来完成,可刚写了一点就遇到了这个问题

10 楼 7thbyte 2007-04-02

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

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

9 楼 7thbyte 2007-04-02

暂时想了一个不是很好的解决方法，应该能满足需求，不过写法不漂亮

给test方法给一个参数，而不是直接取this

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

使用test的时候像这样

	t.test(t);

简单分析了下
prototype.js里面的Ajax.Request类的options参数里的
onXXX系列在对象构造时的处理都是用它自定义的Function.bind()方法去绑定
过程中可能出现一些未知问题，所以this引用的指向有变化
所以原来的写法访问不到

8 楼 cavenaghi 2007-04-02

cozone_柯中写道

7thbyte 写道

刚才我弄错了,sorry

按我的理解楼主的代码就相当于

Test.prototype.test = function () {   
    alert(this.url);   
    alert(this.str);   
    var ajax = new Ajax.Request(   
        this.url,{     
            method: "post",   
            parameters: "time=" +  new Date().getTime(),   
            onComplete: handler
        }   
    );   
};

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

两个都访问不到应该是正常的

事实上就连url也访问不到
能alert出来是因为楼主的程序25行把url定义为全局变量了，两个变量名重复，假象

Ajax.Request 里面有个url属性.是可以正常访问到的

其实我的代码就是这样写的，我是想把读到的responseText保存到this.str里,但我发现在handler里读不到this.str,更谈不上赋值了!
大家帮我看看，怎么样能访问到this.str,并且将responseText的值赋给它

7 楼 7thbyte 2007-04-02

cozone_柯中写道

7thbyte 写道

刚才我弄错了,sorry

按我的理解楼主的代码就相当于

Test.prototype.test = function () {   
    alert(this.url);   
    alert(this.str);   
    var ajax = new Ajax.Request(   
        this.url,{     
            method: "post",   
            parameters: "time=" +  new Date().getTime(),   
            onComplete: handler
        }   
    );   
};

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

两个都访问不到应该是正常的

事实上就连url也访问不到
能alert出来是因为楼主的程序25行把url定义为全局变量了，两个变量名重复，假象

Ajax.Request 里面有个url属性.是可以正常访问到的

handler里面的此this.url并不是Ajax.Request里的url

实验一下，把

var url = "a action url";  
   
function pageLoad(){  
     var t = new Test(url);  
     t.test();  
}

全局变量去了，改成

function pageLoad(){  
     var t = new Test("a action url");  
     t.test();  
}

最后的两个alert结果都是undefined

6 楼 cozone_柯中 2007-04-02

7thbyte 写道

刚才我弄错了,sorry

按我的理解楼主的代码就相当于

Test.prototype.test = function () {   
    alert(this.url);   
    alert(this.str);   
    var ajax = new Ajax.Request(   
        this.url,{     
            method: "post",   
            parameters: "time=" +  new Date().getTime(),   
            onComplete: handler
        }   
    );   
};

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

两个都访问不到应该是正常的

事实上就连url也访问不到
能alert出来是因为楼主的程序25行把url定义为全局变量了，两个变量名重复，假象

Ajax.Request 里面有个url属性.是可以正常访问到的

5 楼 7thbyte 2007-04-02

刚才我弄错了,sorry

按我的理解楼主的代码就相当于

Test.prototype.test = function () {   
    alert(this.url);   
    alert(this.str);   
    var ajax = new Ajax.Request(   
        this.url,{     
            method: "post",   
            parameters: "time=" +  new Date().getTime(),   
            onComplete: handler
        }   
    );   
};

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

两个都访问不到应该是正常的

事实上就连url也访问不到
能alert出来是因为楼主的程序25行把url定义为全局变量了，两个变量名重复，假象

4 楼 shiweiwei97 2007-04-02

不太会用这个标签，不能嵌套吗？

Test.prototype.test = function () {  
    alert(this.url);  
    alert(this.str);
	var url = this.url;
	var str = this.str;
    var ajax = new Ajax.Request(  
        this.url,{    
            method: "post",  
            parameters: "time=" +  new Date().getTime(),  
            onSuccess: function(req){  
                alert(url);  
                alert(str);  
            }  
        }  
    );  
};

3 楼 shiweiwei97 2007-04-02

试试这样

Test.prototype.test = function () {  
    alert(this.url);  
    alert(this.str);
	[b]var url = this.url;
	var str = this.str;
[/b]    var ajax = new Ajax.Request(  
        this.url,{    
            method: "post",  
            parameters: "time=" +  new Date().getTime(),  
            onSuccess: function(req){  
 [b]               alert(url);  
                alert(str);  
[/b]            }  
        }  
    );  
};

2 楼 cavenaghi 2007-04-02

怎么样能访问到Test里的this.str?

1 楼 cozone_柯中 2007-04-02

引用

var ajax = new Ajax.Request(
        this.url,{
            method: "post",
            parameters: "time=" + new Date().getTime(),
            onSuccess: function(req){
                alert(this.url);
                alert(this.str);
            }
        }
    );

作用域的问题,你在里面访问的 this.url 是这个Ajax.Request对象的属性并不是 Test的

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论