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到底是啥?为何如此重要的一次次来费劲心思的来改变它的指向? 传送门:javascript技术难点(三)之this、new、apply和call详解(这里面说的很棒,绝对够你喝一壶)     (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中的对象。

最后再总结一下:

如果在javascript语言里没有通过new(包括对象字面量定义)、call和apply改变函数的this指针,函数的this指针都是指向window的。

ps:apply的其他巧妙用法:

大家会不会觉得既然apply和call的用法差不多,那么为什么还同时存在这两种方法呢?完全可以丢掉一个呀。后来才发现一篇文章中讲到apply因为它所传参数为数组这一特点还有许多其他的妙用。

a) Math.max 可以实现得到数组中最大的一项:

因为Math.max 参数里面不支持Math.max([param1,param2]) 也就是数组,但是它支持Math.max(param1,param2,param3…),所以可以根据apply的特点来解决 var max=Math.max.apply(null,array),这样轻易的可以得到一个数组中最大的一项。(apply会将一个数组转换为一个参数接一个参数的传递给方法)

这块在调用的时候第一个参数给了一个null,这个是因为没有对象去调用这个方法,只需要用这个方法帮助运算,得到返回的结果就行,所以直接传递了一个null过去。

b) Math.min  可以实现得到数组中最小的一项:

同样和 max是一个思想 var min=Math.min.apply(null,array)。

c) Array.prototype.push 可以实现两个数组合并:

同样push方法没有提供push一个数组,但是它提供了push(param1,param,…paramN) 所以同样也可以通过apply来转换一下这个数组,即:

var arr1=new Array("1","2","3");
var arr2=new Array("4","5","6");
Array.prototype.push.apply(arr1,arr2);

也可以这样理解,arr1调用了push方法,参数是通过apply将数组装换为参数列表的集合。

d) 小结:通常在什么情况下,可以使用apply类似Math.min等之类的特殊用法:

一般在目标函数只需要n个参数列表,而不接收一个数组的形式([param1[,param2[,…[,paramN]]]]),可以通过apply的方式巧妙地解决这个问题。

Javascript 相关文章推荐
JavaScript/Js脚本处理html元素的自定义属性解析(亲测兼容Firefox与IE)
Nov 25 Javascript
javascript实现页面内关键词高亮显示代码
Apr 03 Javascript
jQuery实现高亮显示的方法
Mar 10 Javascript
js实现Select列表内容自动滚动效果代码
Aug 20 Javascript
Javascript中常用的检测方法小结
Oct 08 Javascript
js实现hashtable的赋值、取值、遍历操作实例详解
Dec 25 Javascript
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
Oct 26 Javascript
如何在AngularJs中调用第三方插件库
May 21 Javascript
Vue2.0 多 Tab切换组件的封装实例
Jul 28 Javascript
node.js基于fs模块对系统文件及目录进行读写操作的方法详解
Nov 10 Javascript
浅析Vue项目中使用keep-Alive步骤
Jul 27 Javascript
jQuery实现日历效果
Sep 11 jQuery
给before和after伪元素设置js效果的方法
Dec 04 #Javascript
全面解析Bootstrap手风琴效果
Apr 17 #Javascript
简单对比分析JavaScript中的apply,call与this的使用
Dec 04 #Javascript
详解JavaScript的Date对象(制作简易钟表)
Apr 07 #Javascript
浅析2种JavaScript继承方式
Dec 04 #Javascript
详解jQuery移动页面开发中的ui-grid网格布局使用
Dec 03 #Javascript
浅析jQuery Mobile的初始化事件
Dec 03 #Javascript
You might like
php设计模式 Factory(工厂模式)
2011/06/26 PHP
thinkphp微信开发(消息加密解密)
2015/12/02 PHP
laravel框架使用阿里云短信发送消息操作示例
2020/02/15 PHP
jQuery中与toggleClass等价的程序段 以及未来学习的方向
2010/03/18 Javascript
javascript动画之圆形运动,环绕鼠标运动作小球
2010/07/20 Javascript
JQUERY实现左侧TIPS滑进滑出效果示例
2013/06/27 Javascript
jquery mobile changepage的三种传参方法介绍
2013/09/13 Javascript
js中for in的用法示例解析
2013/12/25 Javascript
javascript 获取HTML DOM父、子、临近节点
2014/06/16 Javascript
JavaScript获取网页表单action属性的方法
2015/04/02 Javascript
JS控制静态页面之间传递参数获取参数并应用的简单实例
2016/08/10 Javascript
jQuery EasyUI常用数据验证汇总
2016/09/18 Javascript
javascript 中的事件委托详解
2016/10/25 Javascript
AngularJS实现与Java Web服务器交互操作示例【附demo源码下载】
2016/11/02 Javascript
jQuery实现立体式数字滚动条增加效果
2016/12/21 Javascript
vue实现百度搜索下拉提示功能实例
2017/06/14 Javascript
vue-star评星组件开发实例
2018/03/01 Javascript
vue 注册组件的使用详解
2018/05/05 Javascript
一文快速了解JQuery中的AJAX
2019/05/31 jQuery
vue父组件给子组件的组件传值provide inject的方法
2019/10/23 Javascript
vue+axios全局添加请求头和参数操作
2020/07/24 Javascript
Python利用matplotlib生成图片背景及图例透明的效果
2017/04/27 Python
python TCP Socket的粘包和分包的处理详解
2018/02/09 Python
numpy找出array中的最大值,最小值实例
2018/04/03 Python
Python 3.7新功能之dataclass装饰器详解
2018/04/21 Python
对python中dict和json的区别详解
2018/12/18 Python
Python如何重新加载模块
2020/07/29 Python
各大浏览器 CSS3 和 HTML5 兼容速查表 图文
2010/04/01 HTML / CSS
Allsole美国/加拿大:英国一家专门出售品牌鞋子的网站
2018/10/21 全球购物
讲座主持词
2014/03/20 职场文书
鸟的天堂导游词
2015/01/31 职场文书
学校证明范文
2015/06/24 职场文书
陪护人员误工证明
2015/06/24 职场文书
五一放假通知怎么写
2015/08/18 职场文书
Java生成日期时间存入Mysql数据库的实现方法
2022/03/03 Java/Android
“鬼灭之刃”热度不减,其成功背后的原因是什么?
2022/03/22 日漫