Javascript中call与apply的学习笔记


Posted in Javascript onSeptember 22, 2014

先看MDN中对于call的解释

call() 方法在使用一个指定的this值和若干个指定的参数值的前提下调用某个函数或方法.

注:该方法的作用和 apply() 方法类似,只有一个区别,就是call()方法接受的是若干个参数的列表,而apply()方法接受的是一个包含多个参数的数组。

语法

fun.call(thisArg[, arg1[, arg2[, ...]]])

参数
thisArg

在fun函数运行时指定的this值。需要注意的是,指定的this值并不一定是该函数执行时真正的this值,如果这个函数处于非严格模式下,则指定为null和undefined的this值会自动指向全局对象(浏览器中就是window对象),同时值为原始值(数字,字符串,布尔值)的this会指向该原始值的自动包装对象。

arg1, arg2, ...

指定的参数列表。

MDN上的例子一开始并不是很好理解,这里我贴出来,有兴趣可以自己去看看 call-Javascript

这里的thisArg解释为在fun运行时指定的this值,也就是说使用了call后,fun中的this指向了thisArg?看代码

var p="456"; 
 function f1(){ 
  this.p="123"; 
 } 
 function f2() { 
  console.log(this.p); 
 } 
 f2();       //456  f2.call(f1());  //123  f2.apply(f1());  //123

第一次输出是调用的全局变量,之后由于call和apply的使用,f2中的this指向了f1,因此,输出变成了123,其实也就是f1借用了f2的方法输出了自己的p

这时将f1()中的this.p删除,会输出三个456,也就证实了当this为null或者undefined时其实指向了全局变量

至于指向原始值是指向它的包装对象这里,由于我理解的包装对象都是临时的,而且测试时只输出了原始值的类型而不是object,这里如何证明如果有知道的朋友希望可以和我讨论下,谢谢!

既然call可以实现一个对象借用另一个对象,不就可以实现继承了么?看代码

function f1(){ 
  this.father="father"
 } 
 function f2() { 
  f1.call(this); 
  this.child="child"; 
 } var test=new f2(); 
console.log(test.father);  //father

test中是没有father的,由于f2()中的

 f1.call(this);

这里的this指向的就是f2,也就是f2借用了f1的方法,其实也就实现了继承

下面讲一下这里的参数,这里的参数是传递给fun的,看代码吧

function f1(){ 
  this.p="123"; 
 } 
 function f2(x) { 
  console.log(this.p); 
  console.log(x); 
 } 
 f2.call(f1(),456);   //123 
//456

先输出123是因为f1中的p,之后的456是传递给f2的参数,很容易理解

主要是注意call和apply中参数的区别

call是一个一个传入的,而apply是传入的一个数组

function f1(){ 
  this.p="测试call"; 
 } 
 function f2(x,y,z) { 
  console.log(this.p); 
  console.log(x); 
  console.log(y); 
  console.log(z); 
 } 
   function f3(){ 
  this.p="测试apply"; 
 } 
 f2.call(f1(),4,5,6);  
 f2.call(f1(),[4,5,6]);  
 f2.apply(f3(),[4,5,6]); 
 f2.apply(f3(),4,5,6);

这里可以看到结果

Javascript中call与apply的学习笔记

第一段测试call是正确输出

第二段测试call由于传入数组,所以先输出一个数组然后两个undefined

第三段测试apply正确输出

第四段由于参数格式错误直接报错

这里的区别应该很明显了

Javascript 相关文章推荐
两种WEB下的模态对话框 (asp.net或js的分别实现)
Dec 02 Javascript
js 处理URL实用技巧
Nov 23 Javascript
Js event事件在IE、FF兼容性问题
Jan 01 Javascript
全面理解面向对象的 JavaScript(来自ibm)
Nov 10 Javascript
JavaScript中setInterval的用法总结
Nov 20 Javascript
对new functionName()定义一个函数的理解
May 22 Javascript
使用AngularJS对路由进行安全性处理的方法
Jun 18 Javascript
基于jQuery实现拖拽图标到回收站并删除功能
Nov 25 Javascript
angularjs下拉框空白的解决办法
Jun 20 Javascript
详解JavaScript中的六种错误类型
Sep 21 Javascript
Angular实现下拉框模糊查询功能示例
Jan 03 Javascript
JavaScript实现简单图片切换
Apr 29 Javascript
Javascript中this的用法详解
Sep 22 #Javascript
JavaScript的作用域和块级作用域概念理解
Sep 21 #Javascript
JavaScript中双叹号!!作用示例介绍
Sep 21 #Javascript
原生JavaScript实现合并多个数组示例
Sep 21 #Javascript
仿淘宝TAB切换搜索框搜索切换的相关内容
Sep 21 #Javascript
将数字转换成大写的人民币表达式的js函数
Sep 21 #Javascript
判断window.onload是否多次使用的方法
Sep 21 #Javascript
You might like
php动态生成函数示例
2014/03/21 PHP
客户端静态页面玩分页
2006/06/26 Javascript
Javascript 强制类型转换函数
2009/05/17 Javascript
MooTools 1.2中的Drag.Move来实现拖放
2009/09/15 Javascript
javascript dom 基本操作小结
2010/04/11 Javascript
js中parseInt函数浅谈
2013/07/31 Javascript
jQuery照片伸缩效果不影响其他元素的布局
2014/05/09 Javascript
Node.js的特点和应用场景介绍
2014/11/04 Javascript
jquery单选框radio绑定click事件实现方法
2015/01/14 Javascript
JavaScript实现简单的数字倒计时
2015/05/15 Javascript
JS实现窗口加载时模拟鼠标移动的方法
2015/06/03 Javascript
javascript实现网页字符定位的方法
2015/07/14 Javascript
JavaScript实现复制文章自动添加版权
2016/08/02 Javascript
简单理解vue中实例属性vm.$els
2016/12/01 Javascript
微信小程序 支付功能开发错误总结
2017/02/21 Javascript
JS非空验证及邮箱验证的实例
2017/08/11 Javascript
vue-cli项目根据线上环境分别打出测试包和生产包
2018/05/23 Javascript
详解javascript 变量提升(Hoisting)
2019/03/12 Javascript
vue路由守卫+登录态管理实例分析
2019/05/21 Javascript
js实现图片无缝循环轮播
2019/10/28 Javascript
vue路由缓存的几种实现方式小结
2020/02/02 Javascript
手写Vue2.0 数据劫持的示例
2021/03/04 Vue.js
[06:40]2014DOTA2西雅图国际邀请赛 DK战队巡礼
2014/07/07 DOTA
[39:00]Optic vs VP 2018国际邀请赛淘汰赛BO3 第三场 8.24
2018/08/25 DOTA
python实现备份目录的方法
2015/08/03 Python
Python使用smtplib模块发送电子邮件的流程详解
2016/06/27 Python
Python 中的range(),以及列表切片方法
2018/07/02 Python
python实现简单井字棋小游戏
2020/03/05 Python
html5使用canvas实现弹幕功能示例
2017/09/11 HTML / CSS
中国领先的专业家电网购平台:国美在线
2016/12/25 全球购物
奥地利汽车配件店:Pkwteile.at
2017/03/10 全球购物
汽车运用工程系毕业生自荐信
2013/12/27 职场文书
1亿有多大教学反思
2014/05/01 职场文书
2014年项目工作总结
2014/11/24 职场文书
HR必备:超全面的薪酬待遇管理方案!
2019/07/12 职场文书
零基础学java之带参数以及返回值的方法
2022/04/10 Java/Android