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 相关文章推荐
javascript之Partial Application学习
Jan 10 Javascript
js中indexof的用法详细解析
Dec 24 Javascript
jQuery中[attribute=value]选择器用法实例
Dec 31 Javascript
jQuery+css3动画属性制作猎豹浏览器宽屏banner焦点图
Mar 16 Javascript
浅谈Sizzle的“编译原理”
Apr 14 Javascript
AngularJS使用angular-formly进行表单验证
Dec 27 Javascript
详解原生JavaScript实现jQuery中AJAX处理的方法
May 10 Javascript
Angular.js去除页面中显示的空行方法示例
Mar 30 Javascript
vue2.0 兄弟组件(平级)通讯的实现代码
Jan 15 Javascript
Vue通过ref父子组件拿值方法
Sep 12 Javascript
纯javascript前端实现base64图片下载(兼容IE10+)
Sep 14 Javascript
vue-cli 3.0 版本与3.0以下版本在搭建项目时的区别详解
Dec 11 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/01/27 PHP
PHP $_FILES中error返回值详解
2014/01/30 PHP
codeigniter集成ucenter1.6双向通信的解决办法
2014/06/12 PHP
php实现过滤UBB代码的类
2015/03/12 PHP
如何实现php图片等比例缩放
2015/07/28 PHP
PHP魔术方法以及关于独立实例与相连实例的全面讲解
2016/10/18 PHP
Google Map API更新实现用户自定义标注坐标
2009/07/29 Javascript
70+漂亮且极具亲和力的导航菜单设计国外网站推荐
2011/09/20 Javascript
回车直接实现点击某按钮的效果即触发单击事件
2014/02/27 Javascript
js监听鼠标点击和键盘点击事件并自动跳转页面
2014/09/24 Javascript
javascript运动效果实例总结(放大缩小、滑动淡入、滚动)
2016/01/08 Javascript
基于javascript实现全国省市二级联动下拉选择菜单
2016/01/28 Javascript
详解JavaScript异步编程中jQuery的promise对象的作用
2016/05/03 Javascript
JS闭包、作用域链、垃圾回收、内存泄露相关知识小结
2016/05/16 Javascript
Vuejs第十一篇组件之slot内容分发实例详解
2016/09/09 Javascript
Jquery AJAX POST与GET之间的区别详细介绍
2016/10/17 Javascript
如何实现json数据可视化详解
2016/11/24 Javascript
Chrome浏览器的alert弹窗禁止再次弹出后恢复的方法
2016/12/30 Javascript
使用Node.js搭建静态资源服务详细教程
2017/08/02 Javascript
五步轻松实现zTree的使用
2017/11/01 Javascript
VueJs组件之父子通讯的方式
2018/05/06 Javascript
Javascript实现异步编程的过程
2018/06/18 Javascript
vue+vue-router转场动画的实例代码
2018/09/01 Javascript
Node.js之readline模块的使用详解
2019/03/25 Javascript
openlayers实现地图弹窗
2020/09/25 Javascript
代码块高亮可复制显示js插件highlight.js+clipboard.js整合
2021/02/15 Javascript
python从入门到精通(DAY 3)
2015/12/20 Python
基础的十进制按位运算总结与在Python中的计算示例
2016/06/28 Python
PyQt5重写QComboBox的鼠标点击事件方法
2019/06/25 Python
Python3批量移动指定文件到指定文件夹方法示例
2019/09/02 Python
Python 余弦相似度与皮尔逊相关系数 计算实例
2019/12/23 Python
jupyternotebook 撤销删除的操作方式
2020/04/17 Python
在数据文件自动增长时,自动增长是否会阻塞对文件的更新
2014/05/01 面试题
小学家长评语大全
2014/04/16 职场文书
狂人日记读书笔记
2015/06/30 职场文书
Mysql实现主从配置和多主多从配置
2021/06/02 MySQL