简单对比分析JavaScript中的apply,call与this的使用


Posted in Javascript onDecember 04, 2015

1.apply定义

apply:调用函数,并用指定对象替换函数的 this 值,同时用指定数组替换函数的参数。
语法:apply([thisObj[,argArray]])
thisObj
可选。要用作 this 对象的对象。

argArray
可选。要传递到函数的一组参数。

2.call定义

call:调用一个对象的方法,用另一个对象替换当前对象。
语法:call([thisObj[, arg1[, arg2[, [, argN]]]]])
thisObj
可选。将作为当前对象使用的对象。

arg1, arg2, , argN
可选。将被传递到该方法的参数列表。

3.二者区别

call 的第二个参数可以是任意类型,而apply的第二个参数必须是数组,也可以是arguments。
定义也是有差别的。

4.实例分析

(1)官方实例:

function callMe(arg1, arg2){
  var s = "";

  s += "this value: " + this;
  s += "<br />";
  for (i in callMe.arguments) {
    s += "arguments: " + callMe.arguments[i];
    s += "<br />";
  }
  return s;
}

document.write("Original function: <br/>");
document.write(callMe(1, 2));
document.write("<br/>");

document.write("Function called with apply: <br/>");
document.write(callMe.apply(3, [ 4, 5 ]));
document.write(callMe.call(3, 4, 5 ));
// Output: // Original function: // this value: [object Window] // arguments: 1 // arguments: 2 // Function called with apply: // this value: 3 // arguments: 4 // arguments: 5

第一个用apply的:定义:调用函数,并用指定对象替换函数的 this 值
调用函数callMe,使用指定的对象3替换callMe函数中的this,这时候这里的this就从之前的[object Window]变成了3。
第一个用call的:定义:调用一个对象的方法,用另一个对象替换当前对象。
调用对象callMe的方法,用另一个对象3替换callMe中的对象。
从这些结果分析中可以看出,这两者都是使用指定的对象中的对象或者指定的值改变了对象中的this。
也可以说:是一个函数中的对象(this)"劫持"了另一个要执行函数中的对象(this)。
其实这里引出了一个问题:this到底是啥?为何如此重要的一次次来费劲心思的来改变它的指向?

    (2)实例:

function zqz(a,b){
  return alert(a+b);
}
function zqz_1(a,b){
  zqz.apply(zqz_1,[a,b])
}
zqz_1(1,2)  //->3

分析:根据定义:调用函数,并用指定对象替换函数的 this 值,
这里调用函数zqz,并用指定的对象zqz_1替换zqz函数的this值。

要注意js中的函数名其实是对象,因为函数名是对Funtion对象的引用!

function add(a, b)
{
 alert(a + b);
}
function sub(a, b)
{
 alert(a - b);
}
add.call(sub, 3, 1); // 4

分析:根据定义:调用一个对象的方法,用另一个对象替换当前对象。
这里就是调用对象add的方法,并用add对象替换当前对象sub;

再来一个例子:

function zqz(a,b){
  this.name=a;
  this.age=b;
  alert(this.name+" "+this.age);
}
function zqz_1(a,b){
  zqz.apply(this,[a,b])   //我们亦可以这么写  zqz.apply(this,arguments) 
}
zqz_1("Nic",12)  //Nic 12

分析:根据定义:调用函数,并用指定对象替换函数的 this 值,
这里调用函数zqz,使用指定的对象this替换函数zqz的this。

再来一个例子:

<input type="text" id="myText"  value="input text">
function Obj(){
  this.value="对象!";
}
var value="global 变量";
function Fun1(){
  alert(this.value);
}
Fun1();  //global 变量
Fun1.call(window); //global 变量
Fun1.call(document.getElementById('myText')); //input text
Fun1.call(new Obj());  //对象!
Fun1(); //global 变量

分析:定义:调用一个对象的方法,用另一个对象替换当前对象。

调用Fun1对象的方法,用window对象替换当前Fun1中的对象。
调用Fun1对象的方法,用input中对象替换当前Fun1中的对象。
调用Fun1对象的方法,用新new出来的obj中的对象替换当前Fun1中的对象。

下面我们来看一个网友提出的问题:

call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。如果没有提供 thisObj 参数,那么 Global 对象被用作 thisObj。

然后自己动手了写了个案例,写的跟想象的有差别;如下代码

function parent()
 {
 alert(this.name);
 }
 function child()
 {
 var name = '张三';
 };
 
 parent.call(child);

他输出的是child  为什么不张三 根据上面那句话parent上下文已经变成了child

 而child 里面有name 值   应该输出的是张三啊 求大神解释

function parent()
 {
 alert(this.name);
 }
 function child()
 {
 this.name = '张三';
 };
 var p1 = new child();
 
 parent.call(p1);

这样可以输出 张三  为什么呢?

到底是怎么回事呢,我们来看

call和apply有个用处,就是可以用变量作为函数名称来调用。比如函数的回调函数。具体用法是:被执行函数.call(a,b,c...),其中a是在被执行函数中this需要指定的对象,可以为null,其他参数作为被执行函数的参数。apply用法类似,只不过第二个参数是数组。

举例说明:

function doPost(url,param,callback){
  //这里处理post请求
  var str = xhr.responseText;
  callback.apply(this,[str]);//相当于调用了callback(str);并把callback中的this设定为doPost对象
}
Javascript 相关文章推荐
基于jquery的时间段实现代码
Aug 02 Javascript
js Array操作的最简短最容易理解方法
Dec 09 Javascript
json的定义、标准格式及json字符串检验
May 11 Javascript
JS判断变量是否为空判断是否null
Jul 25 Javascript
js 实现一些跨浏览器的事件方法详解及实例
Oct 27 Javascript
JavaScript箭头(arrow)函数详解
Jun 04 Javascript
浅谈Vue.js路由管理器 Vue Router
Aug 16 Javascript
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
Jan 18 jQuery
微信小程序实现上传多个文件 超过10个
Mar 30 Javascript
《javascript设计模式》学习笔记四:Javascript面向对象程序设计链式调用实例分析
Apr 07 Javascript
vue实现移动端项目多行文本溢出省略
Jul 29 Javascript
基于vue的video播放器的实现示例
Feb 19 Vue.js
详解JavaScript的Date对象(制作简易钟表)
Apr 07 #Javascript
浅析2种JavaScript继承方式
Dec 04 #Javascript
详解jQuery移动页面开发中的ui-grid网格布局使用
Dec 03 #Javascript
浅析jQuery Mobile的初始化事件
Dec 03 #Javascript
jQuery+jsp实现省市县三级联动效果(附源码)
Dec 03 #Javascript
jQuery移动web开发中的页面初始化与加载事件
Dec 03 #Javascript
JQuery移动页面开发之屏幕方向改变与滚屏的实现
Dec 03 #Javascript
You might like
自制汽车收音机天线:收听广播的技巧和方法
2021/03/02 无线电
PHP和.net中des加解密的实现方法
2013/02/27 PHP
PHP与JavaScript针对Cookie的读写、交互操作方法详解
2017/08/07 PHP
CentOS7.0下安装PHP5.6.30服务的教程详解
2018/09/29 PHP
php 利用socket发送GET,POST请求的实例代码
2020/07/04 PHP
formvalidator验证插件中有关ajax验证问题
2013/01/04 Javascript
JavaScript实现表格排序方法
2013/06/14 Javascript
js 判断文件类型并控制表单提交示例代码
2013/11/14 Javascript
JavaScript获取并更改input标签name属性的方法
2015/07/02 Javascript
理解 JavaScript Scoping &amp; Hoisting(二)
2015/11/18 Javascript
浅谈JQuery+ajax+jsonp 跨域访问
2016/06/25 Javascript
Bootstrap模态框禁用空白处点击关闭
2016/10/20 Javascript
浅谈javascript中遇到的字符串对象处理
2016/11/18 Javascript
JavaScript实现汉字转换为拼音的库文件示例
2016/12/22 Javascript
对称加密与非对称加密优缺点详解
2017/02/06 Javascript
使用Taro实现小程序商城的购物车功能模块的实例代码
2020/06/05 Javascript
解决Vue-Router升级导致的Uncaught (in promise)问题
2020/08/07 Javascript
JavaScript常用工具函数库汇总
2020/09/17 Javascript
如何在JavaScript中等分数组的实现
2020/12/13 Javascript
python中set常用操作汇总
2016/06/30 Python
python 将字符串转换成字典dict的各种方式总结
2018/03/23 Python
用python处理图片实现图像中的像素访问
2018/05/04 Python
Python 创建新文件时避免覆盖已有的同名文件的解决方法
2018/11/16 Python
python调用java的jar包方法
2018/12/15 Python
Python+OpenCV实现实时眼动追踪的示例代码
2019/11/11 Python
在Windows上安装和配置 Jupyter Lab 作为桌面级应用程序教程
2020/04/22 Python
基于Python的Jenkins的二次开发操作
2020/05/12 Python
Kusmi茶美国官网:优质散叶茶和茶包
2019/10/13 全球购物
幼儿教师培训感言
2014/03/08 职场文书
抗洪抢险事迹材料
2014/05/06 职场文书
教师求职信
2014/06/17 职场文书
学生会竞选演讲稿怎么写
2014/08/26 职场文书
实验心得体会
2014/09/05 职场文书
祖国在我心中演讲稿600字
2014/09/23 职场文书
2015小学教师德育工作总结
2015/05/12 职场文书
Python中request的基本使用解决乱码问题
2022/04/12 Python