JavaScript   发布时间:2022-04-16  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了Javascript中call和apply函数的比较和使用实例大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

一些简单的Javascript操作中较少会用到call和apply函数,在另外一些较大型的操作中,如web应用开发,js框架开发中可能会经常遇到这两个函数。关于这两个函数的解释,网上的资料也很多,但是本人认为很多资料要么照本宣科,要么高度雷同,缺少接地气的解释。接下来我试图用更加清晰简单的思路来分析解释这两个函数。

代码如下:

先来分析一下call,这里有ECMAScript 3rd Edition对call函数的解释[2]:当call方法被一个function对象调用时(func.call(0)),需要传入一个必须的参数和若干个非必须的参数,它的执行过程是这样的: a,如果调用call的对象是不可运行的,抛出一个TypeError错误。 b,设置参数列表为空 c,如果被调用的方法传入不止一个参数,那么依次把arg1,arg2…插入到参数列表里 d,返回调用call的函数结果,把调用函数(func)中的this用传入的参数1替换,把传入的参数列表当作这个函数的参数。 实际上,call函数是function对象的原型,也就是说,当调用call的函数必须也是个函数,当调用这个call时,把调用call的函数中的this用传入的对象替换就行了。下面有个例子:

function C1(){ this.name='张三'; this.age='24'; this.sayname=function(){ console.log("这里是C1类,我的名字是:"+this.name+"我的年龄是"+this.age); } } function C2(){ this.name='李四'; this.age='25'; } var c1=new C1(); var c2=new C2(); c1.sayname(); c1.sayname.call(c2);

执行结果: 这里是C1类,我的名字是:张三我的年龄是24 这里是C1类,我的名字是:李四我的年龄是25 上面的代码中,声明了两个类,C1和C2,C1有两个属性,一个方法,C2也有两个和C1一样的属性,实例化之后,c1.sayname()打印出了实际属性,c1.sayname.call(c2)却打印除了c2的属性,为什么为这样?因为sayname()是个函数,并且函数体内有this,当call执行的之后,this就会被c2代替,所以,最终会打印出c2的属性。 apply和call的区别就在于可选参数的传递,apply的可选参数全部存放在一个数组当中,当成一个参数窜入而call是分成多个参数传入。 那么,apply和call函数有哪些应用呢?第一个是网络上比较经典的求数字数组中的最大元素,直接用Math.max.apply(null,array)即可,另外一个是可以用apply和call实现继承,如下:

function Human(name,sex){ this.name=name; this.sex=sex; this.walk=function(){ console.log('我在走路'); } } function Child(){ Human.call(this,"小明","男") this.paly=function(){ console.log('我很喜欢玩耍'); } this.intruduce=function(){ console.log('大家好,我是'+this.name); } } var jinp=new Human('Jack','男'); var xiaoping=new Child(); xiaoping.walk(); xiaoping.paly(); xiaoping.intruduce();

执行结果: 我在走路 我很喜欢玩耍 大家好,我是小明 与call()和apply()相似的函数是bind(),它是在ECMAScript 5中新增的方法,但在ECMAScript 3中可以轻易的模拟bind()。bind函数一样也是Javascript中Function.prototype的方法,这个方法的主要内容是将函数绑定至某个对象。当函数f()上绑定bind()方法并传入一个对象o作为参数,这个方法将返回一个新的函数当作o的方法来调用。传入新函数的任何实参都将传入原始函数。如下:

function introduce(country,hobby){ return "大家好,我叫"+this.name+",今年"+this.age+"岁,来自"+country+",喜欢"+hobby; } var xiaoming={name:"小明",age:20} var jieshao=introduce.bind(xiaoming); console.log(jieshao("中国","打球"));

执行结果: 大家好,我叫小明,今年20岁,来自中国,喜欢打球 上面的例子等效于:

function introduce(country,age:20} console.log(introduce.apply(xiaoming,["中国","打球"])); //或者下面这个 console.log(introduce.call(xiaoming,"中国","打球"));

需要注意的是:在ECMAScript 5的严格模式中,call()和apply()的第一个实参都会变成this的值,哪怕传入的实参是原始值甚至是null或者undefined。在ECMAScript 3和非严格模式中,传入的null和undefined都会被全局对戏那个代替,而其他原始值会被相应的包装对象所替代。

参考资料

[1],Javascript权威指南第6版,189页 [2], [3],

大佬总结

以上是大佬教程为你收集整理的Javascript中call和apply函数的比较和使用实例全部内容,希望文章能够帮你解决Javascript中call和apply函数的比较和使用实例所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签: