js中呼叫与应用的用法小结

前天去面试，有个煤气发生炉煤气发生器问了一些射流研究…知识，其中有一道呼叫与应用用法的题目，尽管在365天前用过呼叫方法，但当时还是没能答上来，今天深入总结一下呼叫和应用，它们的作用都是将函数绑定到另外一个对象上去运行两者的格式和参数定义：call(thisArg [，arg1，arg2，…])；//参数列表，arg1，arg2，apply(thisArg [，ArgArray])；//参数数组，argArray上面两个函数内部的这指针，都会被赋值为这个参数，这可实现将函数作为另外一个对象的方法运行的目的一、呼叫的简单用法首先，我们先看个简单的例子（通话):复制代码代码如下：doctype html html head title call-apply/title/head dyinput type=' text ' id=' idTxt ' value=' input text ' script type=' text/JavaScript ' var value=' global var '；函数mFunc(){ this。值='成员var '；}函数gFunc(){ alert(this。值)；}窗口。gfunc()；//show gFunc，global vargFunc.call(窗口);//显示gFunc，全局vargfunc。call(新的mFunc())；//显示mFunc，成员vargfunc。调用(文档。getelementbyid(' idTxt ')；//显示元素，输入文本/script脚本语言=' JavaScript ' var func=new func(){ this。a=' func}var func2=函数(x){ var a=' func 2 '；警惕(这个。a)；警报；}func2.call(func，‘func 2’)；//显示功能和func 2/脚本/正文/html然后，运行结果如下：全局变量全局变量成员变量输入文本函数2测试环境：谷歌Chrome10.0.648.45最后，分析结果1、全局对象窗户调用函数gFunc，这个指向窗户对象，因此这个值为全球变化2、函数gFunc调用呼叫方法，这个默认指向第一个参数窗户对象，因此这个值也为全球变化3、函数gFunc调用呼叫方法，这个默认指向第一个参数新的mFunc()，即mFunc的对象，因此这个值为mFunc的成员变量成员var4，函数gFunc调用呼叫方法，这个默认指向第一个参数输入文本控件，即id='idTxt '的控件，因此这个值为投入控件的价值值输入文本5,函数功能2调用呼叫方法，这个默认指向第一个参数功能函数对象，因此这个值为这个。一个，即功能6,函数功能2调用呼叫方法，第二个参数属于函数对象功能2的参数，因此警报为第二个参数功能2二、呼叫继承用法与改进射流研究…使用呼叫模拟继承测试代码：复制代码代码如下：doctype htmlhtmlheadtitle调用-申请inherit/title/head dyscript type=' text/JavaScript '函数BaseA()//基类A { this.member=' baseA memberthis。showselfa=function(){ window。警惕(这个。成员)；} }函数baseB()//基类B { this.member=' baseB memberthis。showselfb=function(){ window。警惕(这个。成员)；} }函数extendAB()//从A和B继承类{ basea。叫(这个)；//调用abaseb。叫(这个)；//调用B }窗口。onload=function(){ var extend=new extend ab()；延伸。showselfa()；//显示Aextend。show self b()；//显示B }/脚本/正文/html运行结果如下：baseB成员baseB成员测试环境：谷歌Chrome10.0.648.45结果分析：预期的结果，应该是输出baseA成员和baseB成员，但实际输出却是baseB成员和baseB成员（已在IE9、8、6、Maxthon、Chrome、FF、Opera、Safari、360等浏览器测试过，结果都是后者：baseB成员)至此，机器是不会错的，这就需要我们深入分析我们可能会很容易想到是这引起的，这个两次都指向了baseB对象，但是推测真是这样吗？为了探究实质，我们借助铬浏览器的调试工具，下断点，进行调试，结果发现

当调用延伸。showselfa()；时，此时的这指向extendAB(并不是我们推测的两次都指向baseB对象)真实原因是extendAB对象的成员变量成员在被baseb。叫(这个)；实例化时，被baseB的成员成员覆盖了，即extendAB的成员成员由baseA成员赋值成了baseB成员当然，我们也可以对上面baseA代码稍作修改，来验证我们调试分析的正确性：复制代码代码如下：function baseA()//基类A{this.memberA='baseA '成员；//成员改成memberA，以区分baseB中的成员这个。showselfa=function(){ window。警惕(这个。membera)；//显示memberA}}再次运行铬等浏览器，结果如下：baseA memberbaseB成员结果和我们的预期相同，同时铬调试信息也验证了我们的正确性

继承改进（原型)以上模拟继承方法，仔细分析不是最好的。因为每次在函数（类)中定义了成员方法，都会导致实例有副本，因此可以借助原型原型，进行改进改进举例如下：复制代码代码如下：doctype htmlhtmlheadtitle调用-申请原型/title/head dyscript type=' text/JavaScript ' var Class={ create : Function()//create Function { return Function(){ this。初始化。应用(这个，参数)；}}};var Person=class。create()；//创建个人类。prototype={//prototype initialize 3360函数(obj1，obj 2){这个。obj 1=obj 1这个。obj 2=obj 2}，showself :函数(){ alert(' obj : ' this。obj 1 '和这个。obj 2)；} }//实例类var Person=new Person(' man '，' women ')；//两个情人。show self()；//显示人物/脚本/正文/html运行结果如下：obj:男子和妇女