码迷，mamicode.com
首页 > 移动开发 > 详细

JS-call和apply（一）

时间：2015-02-13 11:17:13      阅读：281      评论：0      收藏：0      [点我收藏+]

标签：

JS-call和apply（一）

博客分类：
callapplythis
作者：zccst

2014-6-10
昨天对Array.prototype.slice.call(arguments);还是不太理解，不知道为什么slice调用时，可以将arguments切为数组。

今天理解call(this, args);中的this是一个对象。而不是一个函数function(){}。
Js代码  技术分享
  1. var test1 = {  
  2.     age : 10,  
  3.     sum : function(){  
  4.         return this.age;  
  5.     }  
  6. }  
  7. console.log(Array.prototype.slice.call(test1));//打印[]  
  8.   
  9.   
  10. function test2(){  
  11.     this.age = 10;  
  12.     this.sum =function(){  
  13.         return this.age;  
  14.     }  
  15. }  
  16. console.log(Array.prototype.slice.call(test2));//打印[]  
  17.   
  18.   
  19. var test3 = {  
  20.     0 : 10,  
  21.     1 : function(){  
  22.         return this[0];  
  23.     },  
  24.     length:2  
  25. }  
  26. console.log(Array.prototype.slice.call(test3));//将类数组对象转换成真正的数组  
  27.   
  28.   
  29. /**/  
  30. function Product(name, price) {  
  31.   this.name = name;  
  32.   this.price = price;  
  33.   
  34.   if (price < 0)  
  35.     throw RangeError(‘Cannot create product "‘ + name + ‘" with a negative price‘);  
  36.   return this;  
  37. }  
  38.   
  39. function Food(name, price) {  
  40.   console.log(this);//打印？  
  41.   Product.call(this, name, price);  
  42.   this.category = ‘food‘;  
  43. }  
  44. Food.prototype = Object.create(Product.prototype);  
  45.   
  46. function Toy(name, price) {  
  47.   console.log(this);//打印？  
  48.   Product.call(this, name, price);  
  49.   this.category = ‘toy‘;  
  50. }  
  51. Toy.prototype = Object.create(Product.prototype);  
  52.   
  53. var cheese = new Food(‘feta‘, 5);  
  54. var fun = new Toy(‘robot‘, 40);  
  55. //console.log(cheese);  
  56. //console.log(fun);  





2014-6-9
重新看以前call的文章，觉得call应该就是指定某一个函数在某一个作用域中执行。
比如：Array.prototype.slice.call(arguments);
jquery的proxy的实现
Js代码  技术分享
  1. proxy: function( fn, context ) {  
  2.         var tmp, args, proxy;  
  3.   
  4.         if ( typeof context === "string" ) {  
  5.             tmp = fn[ context ];  
  6.             context = fn;  
  7.             fn = tmp;  
  8.         }  
  9.   
  10.         // Quick check to determine if target is callable, in the spec  
  11.         // this throws a TypeError, but we will just return undefined.  
  12.         if ( !jQuery.isFunction( fn ) ) {  
  13.             return undefined;  
  14.         }  
  15.   
  16.         // Simulated bind  
  17.         args = core_slice.call( arguments, 2 );  
  18.         proxy = function() {  
  19.             return fn.apply( context || this, args.concat( core_slice.call( arguments ) ) );  
  20.         };  
  21.   
  22.         // Set the guid of unique handler to the same of original handler, so it can be removed  
  23.         proxy.guid = fn.guid = fn.guid || jQuery.guid++;  
  24.   
  25.         return proxy;  
  26.     }  







2013-8-21
call和apply，它们的作用都是将函数绑定到另外一个对象上去运行
两者的格式和参数定义：
call( thisArg [，arg1，arg2，… ] );       // 参数列表，arg1，arg2，...
apply(thisArg [，argArray] );                 // 参数数组，argArray
上面两个函数内部的this指针，都会被赋值为thisArg，这可实现将函数作为另外一个对象的方法运行的目的

一、call 的简单用法
首先，我们先看个简单的例子（call）：
Html代码  技术分享
  1. <!doctype html>  
  2. <html>  
  3.     <head>  
  4.         <title> call-apply </title>  
  5.     </head>  
  6.   
  7.     <body>  
  8.         <input type="text" id="idTxt" value="input text">  
  9.           
  10.         <script type="text/javascript">  
  11.             var value = "global var";  
  12.               
  13.             function mFunc()  
  14.             {  
  15.                 this.value = "member var";  
  16.             }  
  17.               
  18.             function gFunc()  
  19.             {  
  20.                 alert(this.value);  
  21.             }         
  22.                                                       
  23.             window.gFunc();                                 // show gFunc, global var  
  24.             gFunc.call(window);                             // show gFunc, global var  
  25.             gFunc.call(new mFunc());                        // show mFunc, member var  
  26.             gFunc.call(document.getElementById(‘idTxt‘));   // show element, input text  
  27.         </script>  
  28.           
  29.         <script language="javascript">  
  30.             var func = new function()  
  31.             {  
  32.                 this.a = "func";  
  33.             }  
  34.               
  35.             var func2 = function(x)  
  36.             {  
  37.                 var a = "func2";  
  38.                 alert(this.a);                
  39.                 alert(x);  
  40.             }  
  41.               
  42.             func2.call(func, "func2");                      // show func and func2  
  43.         </script>  
  44.     </body>  
  45. </html>  

然后，运行结果如下：
global var
global var
member var
input text
func
func2
测试环境：Google Chrome 10.0.648.45
最后，分析结果
1、全局对象window调用函数gFunc，this指向window对象，因此this.value为global var
2、函数gFunc调用call方法，this默认指向第一个参数window对象，因此this.value也为global var
3、函数gFunc调用call方法，this默认指向第一个参数new mFunc()，即mFunc的对象，因此this.value为mFunc的成员变量member var
4、函数gFunc调用call方法，this默认指向第一个参数input text控件，即id=‘idTxt’的控件，因此this.value为input控件的value值input text
5、函数func2调用call方法，this默认指向第一个参数func函数对象，因此this.value为this.a，即func
6、函数func2调用call方法，第二个参数属于函数对象func2的参数，因此alert(x)为第二个参数func2

二、call 继承用法与改进
js使用call模拟继承
测试代码：
Html代码  技术分享
  1. <!doctype html>  
  2. <html>  
  3.     <head>  
  4.         <title> call - apply for inherit </title>  
  5.     </head>  
  6.       
  7.     <body>  
  8.         <script type="text/javascript">  
  9.             function baseA()        // base Class A  
  10.             {  
  11.                 this.member = "baseA member";  
  12.                 this.showSelfA = function()  
  13.                 {  
  14.                     window.alert(this.member);  
  15.                 }  
  16.             }  
  17.               
  18.             function baseB()        // base Class B  
  19.             {  
  20.                 this.member = "baseB member";  
  21.                 this.showSelfB = function()  
  22.                 {  
  23.                     window.alert(this.member);  
  24.                 }  
  25.             }  
  26.               
  27.             function extendAB()     // Inherit Class from A and B  
  28.             {  
  29.                 baseA.call(this);   // call for A  
  30.                 baseB.call(this);   // call for B  
  31.             }  
  32.               
  33.             window.onload = function()  
  34.             {  
  35.                 var extend = new extendAB();      
  36.                 extend.showSelfA();     // show A  
  37.                 extend.showSelfB();     // show B  
  38.             }  
  39.         </script>  
  40.     </body>  
  41. </html>  

运行结果如下：
baseB member
baseB member
测试环境：Google Chrome 10.0.648.45
结果分析：
预期的结果，应该是输出 baseA member 和 baseB member，但实际输出却是 baseB member 和 baseB member
（已在IE9、8、6，Maxthon、Chrome、FF、Opera、Safari、360等浏览器测试过，结果都是后者：baseB member）
至此，机器是不会错的，这就需要我们深入分析
我们可能会很容易想到是this引起的，this两次都指向了baseB对象，但是推测真是这样吗？
为了探究实质，我们借助chrome浏览器的调试工具，下断点，进行调试，结果发现：

当调用extend.showSelfA();时，此时的this指向extendAB（并不是我们推测的两次都指向baseB对象）
真实原因是extendAB对象的成员变量member在被baseB.call(this);实例化时，被baseB的成员member覆盖了，即extendAB的成员member由baseA member赋值成了baseB member
当然，我们也可以对上面baseA代码稍作修改，来验证我们调试分析的正确性：
Js代码  技术分享
  1. function baseA()        // base Class A  
  2. {  
  3.     this.memberA = "baseA member";   // member改成memberA，以区分baseB中的member  
  4.     this.showSelfA = function()  
  5.     {  
  6.         window.alert(this.memberA);    // 显示memberA  
  7.     }  
  8. }  

再次运行chrome等浏览器，结果如下：
baseA  member
baseB member
结果和我们的预期相同，同时chrome调试信息也验证了我们的正确性：



继承改进（prototype）
以上模拟继承方法，仔细分析不是最好的。
因为每次在函数（类）中定义了成员方法，都会导致实例有副本，因此可以借助prototype原型，进行改进
改进举例如下：
Html代码  技术分享
  1. <!doctype html>  
  2. <html>  
  3.     <head>  
  4.         <title> call - apply for prototype </title>  
  5.     </head>  
  6.       
  7.     <body>  
  8.         <script type="text/javascript">  
  9.             var Class = {  
  10.                 create: function()              // create Function  
  11.                 {  
  12.                     return function()  
  13.                     {  
  14.                         this.initialize.apply(this, arguments);  
  15.                     }  
  16.                 }  
  17.             };  
  18.               
  19.             var Person = Class.create();        // Create Class Person  
  20.             /*相当于  
  21.             var Person = function(){  
  22.                 this.initialize.apply(this, arguments);  
  23.             }  
  24.             */  
  25.             Person.prototype = {                // prototype initialize  
  26.                 initialize: function(obj1, obj2)  
  27.                 {  
  28.                     this.obj1 = obj1;  
  29.                     this.obj2 = obj2;  
  30.                 },  
  31.                 showSelf: function()  
  32.                 {  
  33.                     alert("obj: " + this.obj1 + " and " + this.obj2);  
  34.                 }  
  35.             }  
  36.               
  37.             // instance Class  
  38.             var person = new Person("man", "women");    // two params  
  39.             person.showSelf();                          // show person  
  40.         </script>  
  41.     </body>  
  42. </html>  

运行结果如下：
obj: man and women

JS-call和apply（一）

标签：

原文地址：http://www.cnblogs.com/shsgl/p/4289866.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！