深入理解js中的call及apply方法

原创 tiangr  2016-12-09 11:54  阅读 168 次

在JS设计模式中,我们经常会使用call和apply方法来进行面向对象式编程(oop)。

call 和 apply 都是为了改变某个函数运行时的 context 即上下文而存在的,换句话说,就是为了改变函数体内部 this 的指向。因为 JavaScript 的函数存在「定义时上下文」和「运行时上下文」以及「上下文是可以改变的」这样的概念。

  1. function cat(){
  2. }
  3. cat.prototype={
  4. food:"fish",
  5. say: function(){
  6. alert("I love "+this.food);
  7. }
  8. }
  9. var blackCat = new cat;
  10. blackCat.say();

如果我们有一个对象whiteDog = {food:"bone"},我们不想对它重新定义say方法,那么我们可以通过call或apply用blackCat的say方法:blackCat.say.call(whiteDog);

所以,可以看出call和apply是为了动态改变this而出现的,当一个object没有某个方法,但是其他的有,我们可以借助call或apply用其它对象的方法来操作。

call和apply方法的作用完全一样,只是接受参数的方式不太一样。例如,有一个函数 func1 定义如下:

  1. var func1 = function(arg1, arg2) {};

就可以通过 func1.call(this, arg1, arg2); 或者 func1.apply(this, [arg1, arg2]); 来调用。其中 this 是你想指定的上下文,他可以任何一个 JavaScript 对象(JavaScript 中一切皆对象),call 需要把参数按顺序传递进去,而 apply 则是把参数放在数组里。JavaScript 中,某个函数的参数数量是不固定的,因此要说适用条件的话,当你的参数是明确知道数量时,用 call,而不确定的时候,用 apply,然后把参数 push 进数组传递进去。当参数数量不确定时,函数内部也可以通过 arguments 这个数组来便利所有的参数。

通过一个操作DOM的例子来理解。

  1. function changeStyle(attr, value){
  2.     this.style[attr] = value;
  3. }
  4. var box = document.getElementById('box');
  5. window.changeStyle.call(box, "height""200px");

call中的第一个参数用于指定将要调用此函数的对象,在这里,changeStyle函数将被box对象调用,this指向了box对象,如果不用call的话,程序报错,因为window对象中没有style属性。
apply的用法:

  1. window.changeStyle.apply(box, ['height', '200px'])

如果call或apply的第一参数是null的话, this指向window

特别提示:本站资源全部免费下载,因服务器需经费维护,文中部分外链点击后会进入广告,请耐心等待5秒即可跳过广告进入目标页面。如遇页面外链打不开或下载地址失效,您可以在评论中指出错误,或扫描页面底部二维码。
本文地址:http://www.tiangr.com/shen-ru-li-jie-js-zhong-de-call-ji-apply-fang-fa.html
版权声明:本文为原创文章,版权归 tiangr 所有,欢迎分享本文,转载请保留出处!

发表评论


表情