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 相关文章推荐
基于jQuery+HttpHandler实现图片裁剪效果代码(适用于论坛, SNS)
Sep 02 Javascript
js操作table示例(个人心得)
Nov 29 Javascript
JavaScript数据结构和算法之图和图算法
Feb 11 Javascript
浅谈javascript事件取消和阻止冒泡
May 26 Javascript
网页从弹窗页面单选框传值至父页面代码分享
Sep 29 Javascript
JavaScript调用传递变量参数的相关问题及解决办法
Nov 01 Javascript
JavaScript中定时控制Throttle、Debounce和Immediate详解
Nov 17 Javascript
微信小程序之拖拽排序(代码分享)
Jan 21 Javascript
webpack 从指定入口文件中提取公共文件的方法
Nov 13 Javascript
vue-router命名视图的使用讲解
Jan 19 Javascript
VUE+Element环境搭建与安装的方法步骤
Jan 24 Javascript
说说Vuex的getters属性的具体用法
Apr 15 Javascript
给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
重置版宣传动画
2020/04/09 魔兽争霸
php中支持多种编码的中文字符串截取函数!
2007/03/20 PHP
几个实用的PHP内置函数使用指南
2014/11/27 PHP
Yii2框架配置文件(Application属性)与调试技巧实例分析
2019/05/27 PHP
jQuery 图像裁剪插件Jcrop的简单使用
2009/05/22 Javascript
js下利用控制器载入对应脚本
2010/07/17 Javascript
为jQuery.Treeview添加右键菜单的实现代码
2010/10/22 Javascript
使用js检测浏览器的实现代码
2013/05/14 Javascript
选择器中含有空格在使用示例及注意事项
2013/07/31 Javascript
jQuery控制的不同方向的滑动(向左、向右滑动等)
2014/07/18 Javascript
fckeditor粘贴Word时弹出窗口取消的方法
2014/10/30 Javascript
基于javascript代码检测访问网页的浏览器呈现引擎、平台、Windows操作系统、移动设备和游戏系统
2015/12/03 Javascript
jQuery height()、innerHeight()、outerHeight()函数的区别详解
2016/05/23 Javascript
js html5 css俄罗斯方块游戏再现
2016/10/17 Javascript
jquery操作ID带有变量的节点实例
2016/12/07 Javascript
JavaScript类的继承方法小结【组合继承分析】
2018/07/11 Javascript
Bootstrap4 gulp 配置详解
2019/01/06 Javascript
微信小程序实现bindtap等事件传参
2019/04/08 Javascript
一次让你了解全部JavaScript的作用域
2019/06/24 Javascript
关于vue利用postcss-pxtorem进行移动端适配的问题
2019/11/20 Javascript
基于Vue.js+Nuxt开发自定义弹出层组件
2020/10/09 Javascript
Python 专题二 条件语句和循环语句的基础知识
2017/03/19 Python
python实现微信自动回复功能
2018/04/11 Python
django2+uwsgi+nginx上线部署到服务器Ubuntu16.04
2018/06/26 Python
python MNIST手写识别数据调用API的方法
2018/08/08 Python
python 操作hive pyhs2方式
2019/12/21 Python
Pandas对每个分组应用apply函数的实现
2020/12/13 Python
幼儿园亲子活动方案
2014/01/29 职场文书
音乐节策划方案
2014/06/09 职场文书
分公司总经理岗位职责
2014/07/30 职场文书
班子四风对照检查材料
2014/08/21 职场文书
2014年纪委工作总结
2014/12/05 职场文书
公务员考察材料范文
2014/12/23 职场文书
市场部岗位职责
2015/02/12 职场文书
清洁工工作总结
2015/08/11 职场文书
生日寿星公答谢词
2015/09/29 职场文书