简单对比分析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 相关文章推荐
JQueryEasyUI datagrid框架的基本使用
Apr 08 Javascript
js实现数字每三位加逗号的方法
Feb 05 Javascript
javascript移动开发中touch触摸事件详解
Mar 18 Javascript
Angular.js实现多个checkbox只能选择一个的方法示例
Feb 24 Javascript
微信小程序 chooseImage选择图片或者拍照
Apr 07 Javascript
Bootstrap fileinput文件上传预览插件使用详解
May 16 Javascript
Vue自定义属性实例分析
Feb 23 Javascript
微信小程序登录数据解密及状态维持实例详解
May 06 Javascript
策略模式实现 Vue 动态表单验证的方法
Sep 16 Javascript
vue根据条件不同显示不同按钮的操作
Aug 04 Javascript
js实现石头剪刀布游戏
Oct 11 Javascript
javascript实现多边形碰撞检测
Oct 24 Javascript
详解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
解析php curl_setopt 函数的相关应用及介绍
2013/06/17 PHP
php 模拟POST提交的2种方法详解
2013/06/17 PHP
php header功能的使用
2013/10/28 PHP
php实现递归与无限分类的方法
2015/02/16 PHP
Windows2003下php5.4安装配置教程(IIS)
2016/06/30 PHP
PHP实现求连续子数组最大和问题2种解决方法
2017/12/26 PHP
PHP中rename()函数的妙用讲解
2019/02/28 PHP
JavaScript 垃圾回收机制分析
2013/10/10 Javascript
js实现数组去重、判断数组以及对象中的内容是否相同
2013/11/29 Javascript
js 获取元素下面所有li的两种方法
2014/04/14 Javascript
浏览器缩放检测的js代码
2014/09/28 Javascript
基于jquery实现select选择框内容左右移动添加删除代码分享
2015/08/25 Javascript
jQuery回到顶部的代码
2016/07/09 Javascript
详解JS几种变量交换方式以及性能分析对比
2016/11/25 Javascript
微信小程序 获取当前地理位置和经纬度实例代码
2016/12/05 Javascript
NPM 安装cordova时警告:npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to
2016/12/20 Javascript
windows下vue-cli导入bootstrap样式
2017/04/25 Javascript
javascript自定义事件功能与用法实例分析
2017/11/08 Javascript
vue中父子组件注意事项,传值及slot应用技巧
2018/05/09 Javascript
JavaScript多种滤镜算法实现代码实例
2019/12/10 Javascript
python获取网络图片方法及整理过程详解
2019/12/20 Python
Python3 获取文件属性的方式(时间、大小等)
2020/03/12 Python
基于python实现地址和经纬度转换
2020/05/19 Python
英国女士家居服网站:hush
2017/08/09 全球购物
新东方旗下远程教育网站:新东方在线
2020/03/19 全球购物
Tahari ASL官方网站:高级设计师女装
2021/03/15 全球购物
上海雨人软件技术开发有限公司测试题
2015/07/14 面试题
会计实习生工作总结的自我评价
2013/10/07 职场文书
英语专业毕业生自我鉴定
2013/11/09 职场文书
银行实习的自我鉴定
2013/12/10 职场文书
大学生演讲稿范文
2014/01/11 职场文书
基督教婚礼主持词
2014/03/14 职场文书
加多宝凉茶广告词
2014/03/18 职场文书
党组织领导班子整改方案
2014/10/25 职场文书
2015年结对帮扶工作总结
2015/05/04 职场文书
详解Mysql数据库平滑扩容解决高并发和大数据量问题
2022/05/25 MySQL