简单对比分析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 相关文章推荐
脚本吧 - 幻宇工作室用到js,超强推荐base.js
Dec 23 Javascript
JavaScript 加号(+)运算符号
Dec 06 Javascript
JQuery扩展插件Validate 5添加自定义验证方法
Sep 05 Javascript
jquery Validation表单验证使用详解
Sep 12 Javascript
jQuery实现类似淘宝网图片放大效果的方法
Jul 08 Javascript
常用javascript表单验证汇总
Jul 20 Javascript
纯JS前端实现分页代码
Jun 21 Javascript
vue 实现 tomato timer(蕃茄钟)实例讲解
Jul 24 Javascript
AngularJS中控制器函数的定义与使用方法示例
Oct 10 Javascript
详解Vue CLI3 多页应用实践和源码设计
Aug 30 Javascript
小程序获取周围IBeacon设备的方法
Oct 31 Javascript
浅谈vue在html中出现{{}}的原因及解决方式
Nov 16 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采用自定义函数实现遍历目录下所有文件的方法
2014/08/19 PHP
支持中文、字母、数字的PHP验证码
2015/05/04 PHP
PHP实现图片上传并压缩
2015/12/22 PHP
JS执行删除前的判断代码
2014/02/18 Javascript
使用js dom和jquery分别实现简单增删改
2014/09/11 Javascript
Node.js 的异步 IO 性能探讨
2014/10/08 Javascript
Javascript实现单张图片浏览
2014/12/18 Javascript
JavaScript中使用Object.create()创建对象介绍
2014/12/30 Javascript
详解jquery事件delegate()的使用方法
2016/01/25 Javascript
asp.net+jquery.form实现图片异步上传的方法(附jquery.form.js下载)
2016/05/05 Javascript
jquery.masonry瀑布流效果
2017/05/25 jQuery
如何编写一个完整的Angular4 FormText 组件
2017/11/18 Javascript
three.js欧拉角和四元数的使用方法
2020/07/26 Javascript
js实现3D旋转效果
2020/08/18 Javascript
原生js实现表格循环滚动
2020/11/24 Javascript
[01:07:21]NAVI vs VG Supermajor 败者组 BO3 第二场 6.5
2018/06/06 DOTA
Python3实现抓取javascript动态生成的html网页功能示例
2017/08/22 Python
python-django中的APPEND_SLASH实现方法
2019/06/21 Python
Python使用sklearn库实现的各种分类算法简单应用小结
2019/07/04 Python
Python-copy()与deepcopy()区别详解
2019/07/12 Python
django框架面向对象ORM模型继承用法实例分析
2019/07/29 Python
常用的四种CSS透明属性介绍
2014/04/12 HTML / CSS
纯css3制作网站后台管理面板
2014/12/30 HTML / CSS
html5指南-2.如何操作document metadata
2013/01/07 HTML / CSS
HTML5 视频播放(video),JavaScript控制视频的实例代码
2018/10/08 HTML / CSS
天巡全球:Skyscanner Global
2017/06/20 全球购物
迪卡侬印度官网:购买所有体育用品
2017/06/24 全球购物
微软加拿大官方网站:Microsoft Canada
2019/04/28 全球购物
彪马荷兰官网:PUMA荷兰
2019/05/08 全球购物
微软马来西亚官方网站:Microsoft马来西亚
2019/11/22 全球购物
美国眼镜网站:LensCrafters
2020/01/19 全球购物
酒店员工管理制度
2015/08/05 职场文书
企业年会祝酒词
2015/08/11 职场文书
2016年五四青年节校园广播稿
2015/12/17 职场文书
如何写一份具有法律效力的借款协议书?
2019/07/02 职场文书
世界十大评分最高的动漫,CLANNAD上榜,第八赚足人们眼泪
2022/03/18 日漫