javascript的apply()和call()

作为业务的前端开发,有时候看一些代码的时候碰到apply和call方法会觉得很纳闷,好好的一个函数执行,非要写成这样,看了网上的一些事例代码还是没真正理解其不得不用的场景。直到最近自己碰到一个不得不用apply方法的场景,才真正理解了apply和call的作用。

直接看代码:

在这段代码里面,我达到的目的是:通过传递worker对象的make方法的方式来让boss选择生产出那种产品,boss的chooseWorker方法的参数是make方法。我本来期望传给chooseWorker方法的参数如果是foodWorker的make方法就生产food,如果是carWorker的make方法就生产carWorker。期望的结果是这样:

但是结果并不是这样,而是:

那为什么我传递的是指定对象的方法,里面的this.product确实“house”呢?

原因是JavaScript对象的函数本身并不包含对象的信息的信息,如果直接调用makeFunction,其调用方默认是window对象,也就是说this==window,所以this.product就是“house”了。要想达到预想的效果,就得用到apply方法了。比如这样:

其输出结果就打到预期了,对于一些设计模式和继承使用的时候,apply和call会常被使用到。主要是解决this对象的指向问题,当然也可以通过使用apply和call来替换方法的调用者。

apply和call的作用基本相同,唯一的区别是apply有两个参数,而call只有一个参数。

  • apply的第一个参数是函数的调用对象,第二个参数是函数的参数列表(参数数组),上面的代码就是个例子。当然如果函数没有参数,可以给apply方法传空数组([]);
  • call的参数只有一个,就是函数的调用对象。

apply包含了call的功能,所以一般用apply就行了。这是我目前的理解,抛砖引玉。

 

原创文章:javascript的apply()和call(),转载请注明:转载自戎码一生

Post Footer automatically generated by wp-posturl plugin for wordpress.