简单对比分析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 相关文章推荐
制作特殊字的脚本
Jun 26 Javascript
jQuery Ajax文件上传(php)
Jun 16 Javascript
js判断元素是否隐藏的方法
Jun 09 Javascript
jquery插件Jplayer使用方法简析
Apr 22 Javascript
bootstrap轮播图示例代码分享
May 17 Javascript
谈谈vue中mixin的一点理解
Dec 12 Javascript
浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法
Feb 21 Javascript
详解vue组件基础
May 04 Javascript
详解使用jQuery.i18n.properties实现js国际化
May 04 jQuery
JS判断两个数组或对象是否相同的方法示例
Feb 28 Javascript
VUE实现强制渲染,强制更新
Oct 29 Javascript
js中switch语句的学习笔记
Mar 25 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字符串截取中文截取2,单字节截取模式
2007/12/10 PHP
php 正则表达式小结
2009/08/31 PHP
php 伪造本地文件包含漏洞的代码
2011/11/03 PHP
PHP中file_exists与is_file,is_dir的区别介绍
2012/09/12 PHP
PHP设置进度条的方法
2015/07/08 PHP
PHP实现GIF图片验证码
2015/11/04 PHP
Ajax一统天下之Dojo整合篇
2007/03/24 Javascript
js关闭浏览器窗口及检查浏览器关闭事件
2013/09/03 Javascript
js实现的四级左侧网站分类菜单实例
2015/05/06 Javascript
jQuery下拉美化搜索表单效果代码分享
2015/08/25 Javascript
JS实现灵巧的下拉导航效果代码
2015/08/25 Javascript
jquery操作select元素和option的实例代码
2016/02/03 Javascript
js将滚动条滚动到指定位置的简单实现方法
2016/06/25 Javascript
详解js树形控件—zTree使用总结
2016/12/28 Javascript
javascript编程实现栈的方法详解【经典数据结构】
2017/04/11 Javascript
vue-resource 拦截器(interceptor)的使用详解
2017/07/04 Javascript
微信小程序引用公共js里的方法的实例详解
2017/08/17 Javascript
详解vue.js之绑定class和style的示例代码
2017/08/24 Javascript
详解在网页上通过JS实现文本的语音朗读
2019/03/28 Javascript
Angular.JS读取数据库数据调用完整实例
2019/07/02 Javascript
element form 校验数组每一项实例代码
2019/10/10 Javascript
简介JavaScript错误处理机制
2020/08/04 Javascript
[53:20]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 VG vs OG
2018/04/03 DOTA
Python实现拼接多张图片的方法
2014/12/01 Python
python统计cpu利用率的方法
2015/06/02 Python
python检测是文件还是目录的方法
2015/07/03 Python
使用paramiko远程执行命令、下发文件的实例
2017/10/01 Python
python实现报表自动化详解
2017/11/16 Python
python装饰器使用实例详解
2019/12/14 Python
vscode调试django项目的方法
2020/08/06 Python
pytorch学习教程之自定义数据集
2020/11/10 Python
新闻专业个人求职信
2013/12/19 职场文书
个人简历自我评价范文
2014/02/04 职场文书
教育系统干部作风整顿心得体会
2014/09/09 职场文书
捐款感谢信
2015/01/20 职场文书
用python删除文件夹中的重复图片(图片去重)
2021/05/12 Python