Javascript中的Call方法讨论

来源:互联网 发布:费玉清网络综艺节目 编辑:程序博客网 时间:2024/06/06 06:41

讨论一下Javascript中 Call的用法


call 方法(版本5.5以上)  :

文档中描述:

调用一个对象的一个方法,以另一个对象替换当前对象。

Call([thisObj[,arg1[, arg2[,  [,.argN]]]]])

thisObj

可选项。将被用作当前对象的对象。

arg1, arg2,  , argN

可选项。将被传递方法参数序列。


测试特性:

1. Person类对象转换(我觉得是种实例化对象后, 继承的形式)

[html] view plaincopy
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  5. <title>Test Call</title>  
  6. </head>  
  7. <body>  
  8. <script type="text/javascript">  
  9.   
  10. function Person(name){  
  11.     this.name = null;  
  12.     this.showName = function(){  
  13.         document.write(this.name);  
  14.     };  
  15.     this.Init = function(name){    
  16.         this.name = name;    
  17.     }    
  18.     this.Init(name);    
  19. };  
  20.   
  21. var jeremy = new Person("Jeremy");  
  22. jeremy.showName();  
  23.   
  24. document.write("<br>");  
  25.   
  26. var tom = new Object();  
  27. Person.call(tom); //Person class do call()  
  28. tom.name = "Tom";  
  29. tom.showName();  
  30.   
  31. </script>  
  32. </body>  

输出:


2. 用call方法替换this指针

在这段代码中, NameShowing 类中,showName() 方法,需要有this.name 参数,

所以用call方法,传入实例jeremy.name, 用新对象jeremy替代this指针

[html] view plaincopy
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  5. <title>Test Call</title>  
  6. </head>  
  7. <body>  
  8. <script type="text/javascript">  
  9.   
  10. function NameShowing(){  
  11.     this.showName = function(){  
  12.         document.write(this.name);  
  13.     }  
  14. }  
  15.   
  16. function Person(name){  
  17.     this.name = null;  
  18.     this.Init = function(name){    
  19.         this.name = name;    
  20.     }    
  21.     this.Init(name);    
  22. };  
  23.   
  24. var nameShowing = new NameShowing();  
  25. var jeremy = new Person("Jeremy")  
  26.   
  27. //replace the 'this' pointer by jeremy object  
  28. nameShowing.showName.call(jeremy);  
  29.   
  30. </script>  
  31. </body>  
  32. </html>  

输出:



3. 用call(obj),实例obj继承方法

jeremy做为一个Person的实例, 缺少showName()方法, 从NameShowing类中使用call , jeremy继承了showName() 方法

[html] view plaincopy
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  5. <title>Test Call</title>  
  6. </head>  
  7. <body>  
  8. <script type="text/javascript">  
  9.   
  10. function NameShowing(){  
  11.     this.showName = function(){  
  12.         document.write(this.name);  
  13.     }  
  14. }  
  15.   
  16. function Person(name){  
  17.     this.name = null;  
  18.     this.Init = function(name){    
  19.         this.name = name;    
  20.     }    
  21.     this.Init(name);    
  22. };  
  23.   
  24. var jeremy = new Person("Jeremy")  
  25. //pass showName() method to jeremy object  
  26. NameShowing.call(jeremy);  
  27. jeremy.showName();  
  28.   
  29. </script>  
  30. </body>  
  31. </html>  
  32. <strong>  
  33. </strong>  

输出:


4 call实现带有构造函数的参数 传入

[html] view plaincopy
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  5. <title>Test Call</title>  
  6. </head>  
  7. <body>  
  8. <script type="text/javascript">  
  9.   
  10. function Person(name, age){  
  11.     this.name = null;  
  12.     this.age = null;  
  13.     this.showPersonInfo = function(){  
  14.         document.write("Name: " + this.name + "<br>");  
  15.         document.write("Age: " + this.age + "<br>");  
  16.     };  
  17.     this.Init = function(){  
  18.         this.name = name;  
  19.         this.age = age;  
  20.     };  
  21.     this.Init();  
  22. }  
  23.   
  24. var jeremy = new Object();  
  25. Person.call(jeremy, "Jeremy", 20);  
  26. jeremy.showPersonInfo();  
  27.   
  28. </script>  
  29. </body>  
  30. </html>  

输出:



call函数原理分析:

从上面call方法使用中,发生了原先的this指针被新的对象替代的方法,而原先的参数也就赋给了新的对象

从网上资料看到,

直接说就是,使用apply实现了 新对象对this指针的替代

例如下面代码使用到了apply 方法:

[javascript] view plaincopy
  1. function A(a){  
  2.     document.write(a);  
  3. };  
  4.               
  5. function AA(a){  
  6.     A.apply(this, arguments);  
  7. }  
  8.               
  9. AA("output in AA");  

输出是:


source:http://blog.csdn.net/anialy/article/details/8299181

0 0