博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js中call与apply用法
阅读量:7122 次
发布时间:2019-06-28

本文共 2659 字,大约阅读时间需要 8 分钟。

1 call和apply,它们的作用都是将函数绑定到另外一个对象上去运行  2 两者的格式和参数定义:  3 call( thisArg [,arg1,arg2,… ] );       // 参数列表,arg1,arg2,...  4 apply(thisArg [,argArray] );                 // 参数数组,argArray  5 上面两个函数内部的this指针,都会被赋值为thisArg,这可实现将函数作为另外一个对象的方法运行的目的  6   7 一、call 的简单用法  8 首先,我们先看个简单的例子(call):  9 [html] view plaincopyprint? 10    11    12    13        14          call-apply    15        16    17        18            19            20            38            39            54        55    56 然后,运行结果如下: 57 global var 58 global var 59 member var 60 input text 61 func 62 func2 63 测试环境:Google Chrome 10.0.648.45 64 最后,分析结果 65 1、全局对象window调用函数gFunc,this指向window对象,因此this.value为global var 66 2、函数gFunc调用call方法,this默认指向第一个参数window对象,因此this.value也为global var 67 3、函数gFunc调用call方法,this默认指向第一个参数new mFunc(),即mFunc的对象,因此this.value为mFunc的成员变量member var 68 4、函数gFunc调用call方法,this默认指向第一个参数input text控件,即id=‘idTxt’的控件,因此this.value为input控件的value值input text 69 5、函数func2调用call方法,this默认指向第一个参数func函数对象,因此this.value为this.a,即func 70 6、函数func2调用call方法,第二个参数属于函数对象func2的参数,因此alert(x)为第二个参数func2 71  72 二、call 继承用法与改进 73 js使用call模拟继承 74 测试代码: 75 [html] view plaincopyprint? 76    77    78    79        80          call - apply for inherit    81        82        83        84           116       117   118 运行结果如下:119 baseB member120 baseB member121 测试环境:Google Chrome 10.0.648.45122 结果分析:123 预期的结果,应该是输出 baseA member 和 baseB member,但实际输出却是 baseB member 和 baseB member124 (已在IE9、8、6,Maxthon、Chrome、FF、Opera、Safari、360等浏览器测试过,结果都是后者:baseB member)125 至此,机器是不会错的,这就需要我们深入分析126 我们可能会很容易想到是this引起的,this两次都指向了baseB对象,但是推测真是这样吗?127 为了探究实质,我们借助chrome浏览器的调试工具,下断点,进行调试,结果发现:128 129 当调用extend.showSelfA();时,此时的this指向extendAB(并不是我们推测的两次都指向baseB对象)130 真实原因是extendAB对象的成员变量member在被baseB.call(this);实例化时,被baseB的成员member覆盖了,即extendAB的成员member由baseA member赋值成了baseB member131 当然,我们也可以对上面baseA代码稍作修改,来验证我们调试分析的正确性:132             function baseA()        // base Class A133             {134                 this.memberA = "baseA member";   // member改成memberA,以区分baseB中的member135                 this.showSelfA = function()136                 {137                     window.alert(this.memberA);    // 显示memberA138                 }139             }140 再次运行chrome等浏览器,结果如下:141 baseA  member142 baseB member143 结果和我们的预期相同,同时chrome调试信息也验证了我们的正确性:144 145 146 147 继承改进(prototype)148 以上模拟继承方法,仔细分析不是最好的。149 因为每次在函数(类)中定义了成员方法,都会导致实例有副本,因此可以借助prototype原型,进行改进150 改进举例如下:151 [html] view plaincopyprint?152   153   154   155       156          call - apply for prototype   157       158       159       160           188       189   190 运行结果如下:191 obj: man and women

 

转载于:https://www.cnblogs.com/chris-oil/p/3504077.html

你可能感兴趣的文章
详解Spring MVC 4之ViewResolver视图解析器
查看>>
Java的集合框架(Java Collections Framework)
查看>>
解析和生成Excel报表方法汇总::.NET发现之旅(七)
查看>>
活动目录设计中需要遵循的七个原则
查看>>
【STM32 .Net MF开发板学习-04】TinyGUI位图显示
查看>>
NoSQL数据库简介
查看>>
Kevin Systrom和他的Instagram
查看>>
Android 实现真机远程调试并适应7寸屏大小
查看>>
Oracle优化:千万级大表逻辑判断的累赘
查看>>
研讨会记录|与Xamarin工作簿研讨会探索UrhoSharp 3D
查看>>
python join 和 split的常用使用方法
查看>>
Oracle数据库日常管理之数据备份,恢复及迁移 (第八讲 )
查看>>
一段Winrunner的样例脚本
查看>>
IPSec应用方案设计
查看>>
FOSCommentBundle功能包:创建您的评论类和线索类
查看>>
C++动态数组再总结
查看>>
如何通过sar快速定位制约系统性能的瓶颈
查看>>
Java 枚举用法详解
查看>>
走在网页游戏开发的路上(十一)
查看>>
oc58--Category注意事项
查看>>