前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >JavaScript对象的呼叫转移

JavaScript对象的呼叫转移

作者头像
用户1608022
发布2018-04-11 11:22:52
8280
发布2018-04-11 11:22:52
举报

声明:此文以通俗易懂的模式讲解JavaScript语言中call、apply运行原理。 非业内人士或未成年人请点左上角按扭及时离开以避免走火入魔。

事实上类似于call和apply这样的功能完全是程序设计中的糟粕, 代码之中使用这两个函数的数量和代码难以理解的程序是成正比的。资深的前端狗们可以闭上眼睛回忆一下, 当读到别人写的代码之中有大量的call和apply调用时要寻找代码的逻辑方向是不是会费劲的多。但是, 假如是自己写代码, 又能灵活运行call和apply, 那用起来肯定能爽翻天。 因此,这两个方法就像香烟和酒, 虽然不是什么好东西, 但是在要场面上混的开必须是要接触的, 而且一旦学会就会上瘾, 戒都戒不掉。

先讲解一些背景知识作为了解这两个方法基础。 众所周知, JavaScript是一门动态型的语言,其中也有对类、象、方法这些大众的编程无素, 但又和传统的静态类型语言略有不同。 在静态类型编程语言中对象和方法是一个不可拆分的整体, 只要在类中声明好了方法,那么当实例化为对象以后, 对象中的方法就无法脱离对象而运行(反射除外), 换句话说, 如果孩子是方法, 老子是对象,那么在静态类型语言的国度, 法律是不允许他们脱离亲子关系的。

但是动态类型语言中对象和方法就不是老子和孩子的关系, 而是干爹和干女儿的关系,只在你愿意可以到处找干爹,法律允许找干爹也允许换干爹,但是频繁换干爹的危害是影响自己的名声的健康。这就是动态类型语言对象和方法的真实写照, 方法(函数)可以服务于不同对象。

但是找干爹得有方法和途径啊,总不能去大马路上看着谁就逮吧。call和apply就起到拉皮条的作用,将某个象的方法转移至其它对象上去执行, 而方法里的this关键字引用的目标也由原对象变为新的对象。

结果很清楚了, call方法可以让函数(方法)里的this关键字指向的目标改变。

还可以这么用,和上面的代码是一样的效果。

当然, call方法的参数不只有一个, 我们来改一下代码

从代码中可以看出, call方法的第二个参数的值会作为被调用函数的参数传入,在这里也就是func方法val参数。假如func有多个参数呢?function func(arg1,arg2,arg3,arg4) {}, 如这样的函数结构。很简单, 只要这样写就可以了, func.call(obj1,arg1,arg2,arg3,arg4), 这里两边的argx就是对应的参数。

apply的作用和call一样,只是调用的时候在传参数时会有所区别。上面的多参数函数结果如果使用apply来调用,写法如下:func.apply(obj1,[arg1,arg2,arg3,arg4]); 使用apply时,给函数(方法)传参数时可以使用数组,而不必像call一样需要把每个参数都写一遍。

注意:在这里我使用[arg1,arg2,arg3,arg4]这种写法看起来比call更加不方便, 然而这只是为了方便说明apply第二个参数是一个数组,你完全可以这样写:func.apply(obj1,arglist); 其中arglist就是一个数组 , 里面有多个值 , 调用时会被解构后分别传递给func函数, 可以说apply是call的一个封装的形态。

好了,call和apply的运行原理也讲的差不多, 但是在真正进行JavaScript程序设计时会用的上吗? 答案就是假如你不想用,那完全可以不用, 假如你为了图方便, 那这两个方法还是有很大的用武之地的, 但是频繁的使用它们会增加代码的理解难度。所以,不建议主动寻找使用它们的场景, 当碰到特殊问题恰好又有使用它们的场景时才可以勉为其难的使用一下。

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2017-02-15,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 带你撸出一手好代码 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档