如何理解和熟练运用js中的call及apply?

一个对象A的方法被另一个对象B【引用】的时候(请注意引用的意思,区分调用);
对象A方法内的this作用域就不指向对象A了,这个时候你再用this.XX项调用对象A的某个属性就会发生错误。

详情见下例:

  var aHello = {    
      name : "hello",   
      showName : function(){        
          console.log(this.name);        
          //console.log(this.tagName);    
      }
  };
  document.querySelector('a').onclick = aHello.showName;  // 为空

这个时候因为对象aHello的方法showName对象document.querySelector('a')引用,所以showName内的this就不指向aHello了,指向对象document.querySelector('a'),可以去掉注释进行验证。

但是我们的需求是,点击a的时候就显示aHello的名称。这个时候该怎么做呢?

  • 方法一:在onclick的时候改用匿名函数,匿名函数内再调用对象aHello的方法;
  document.querySelector('a').onclick = function(){    
      aHello.showName();
  };

ok!开心的解决了;
然而,是不是觉得太怂了。我们来衍生一下第二种方法,然后再说bind和call和apply的区别;

  • 方法二:因为引用, onclick改变了对象aHello "showName" 内this的指向。所以我们必须在【引用】的时候对showName方法进行重新绑定新的指向;
  document.querySelector('a').onclick = aHello.showName.bind(aHello);

恩!高大上,不用写太多代码。
接下来讲一下bind和apply、call的区别,首先这些方法多属于【原型prototype】的方法。

示例:
  var test = {    
      name : "hello",    
      setYourAge : function(name,age){        
          console.log(name);        
          console.log(age);    
      }
  };
  document.querySelector('a').onclick = test.setYourAge.call(test,'王佳欣',25);
  • 这个时候你可以看到打开页面,浏览器控制台就会马上输出 “王佳欣”,“25”;
  • 然后,你再点击的时候,根本不会,再输出的;ok,这就是 【调用】含义;
  • call和apply是调用对象方法的意思;也就是说下面的3句代码其实实现是一样的;
  test.setYourAge.call(test,'王佳欣1',25);
  test.setYourAge.apply(test,['王佳欣2',25]);
  test.setYourAge('王佳欣3',25);

既然可以直接调用干嘛还要call、apply方法呢,这里先说一下call、apply 和bind的区别吧~!

  document.querySelector('a').onclick = test.setYourAge.bind(test,'王佳欣4',25);
  • bind的作用是【引用】,这个时候你打开浏览器控制台不会有输出。你点击a 标签的后,才会有输出,点一次,输出一次。
  • 粗暴一点说,这就是区别马上【调用】和【引用】的区别。

上面我们说到,下面三局代码实现是一样的【代码详情见上】。那么call、apply有什么作用呢?

  • call、apply有什么作用大家开发中是不是有这样的需求(我总是喜欢用需求来作为入口)
  • 我们经常会在我们项目中做一些通用的对象,这些对象用来处理我们的一些通用的过程。
  • 比如:通用验证方法;(注:很多人喜欢用 继承的基础类 来作为例子.....我一时想不到好的继承例子,就用通用类的例子吧!)
  //通用验证对象
  var validator = {    
      validateName : function(){        
          console.log(this.name);    
      },   
      validateAge  : function(){        
          console.log(this.age)   
      }    
      //.....
  };
  • 这里可以看到我们的【通用对象validator】内,是没有定义属性(name、age)的。
  • 这个时候比如我们有两个对象需要验证;
  //对象kobe
  var kobe = {    
      name : 'kobe bryant',    
      age : -1
  };

  //对象allen
  var allen = {    
      name : 'allen iverson',    
      age  : 10
  };

  //那我们调用验证的时候就需要用到call或者apply了;例如:
  var isKobeAgeValid = validator.call(kobe);
  var isAllenAgeValid = validator.call(allen);

大致差不多就是这样了....

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 160,108评论 4 364
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,699评论 1 296
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 109,812评论 0 244
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,236评论 0 213
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,583评论 3 288
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,739评论 1 222
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,957评论 2 315
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,704评论 0 204
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,447评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,643评论 2 249
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,133评论 1 261
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,486评论 3 256
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,151评论 3 238
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,108评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,889评论 0 197
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,782评论 2 277
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,681评论 2 272

推荐阅读更多精彩内容