详解js中call与apply关键字的作用


Posted in Javascript onNovember 21, 2016

javascript call与apply关键字的作用

apply接受两个参数。第一个参数指定函数体内this对象的指向,第二个参数为一个带下标的集合。

call则是apply的语法糖,如果参数数量固定,则可以不用带下标的集合传第二个参数。

var func = function(a,b,c)
{
 alert(a + b + c);
}
func.apply(null,[1,2,3]);//弹出6
func.call(null,1,2,3);//弹出6

当apply与call传入的第一个参数为null时,函数体内的this会指向window。

当apply与call传入的第一个参数为null时,函数体内的this会指向window。

call与apply的用途

1、改变this的指向

var obj1 = {
 name = '刘备'
}
 
var obj2 = {
 name = '曹操'
}
var getName = function(){
 alert(this.name);
}
 
window.name = '三国';
getName();//弹出"三国"
getName.call(obj1);//弹出"刘备"
getName.call(obj2);//弹出"曹操"

所以,当在一些情况下this被莫名改变指向之后,可以使用call或apply来进行修正this的指向。

document.getElementById('div1').onclick = function(){
 alert(this.id);//div1
 var fun1 = function(){
  alert(this.id);//window.id 即undefined
 }
 fun1();//普通函数的方式调用,this指代window,相当于window.id 即 undefined
}

由于是普通函数的方式调用,所以上面的例子中,this已经变成了window。下面看看如何使用call进行修正。

document.getElementById('div1').onclick = function(){
 alert(this.id);
 var fun1 = function(){
  alert(this.id);
 }
 fun1.call(this);//强制函数内的this为外层的this,
}

2、调用其他对象的函数

示例1:

var obj1 = {
 a:1,
 b:2,
 add:function()
 {
  return this.a + this.b;
 }
}
var obj2 = {
 a:1,
 b:2,
}
var result = obj1.add.call(obj2);//用obj1的函数来计算obj2的两个属性的和
alert(result);//输出3

示例2:借用构造函数实现类似继承的效果

var A = function(name)
{
 this.name = name;
};
var B = function(){
 A.apply(this,arguments)
}
B.prototype.getName = function(){
 return this.name;
}
var b = new B('刘备');
alert(b.getName());

以上就是本文的内容,有问题可以和小编联系,谢谢对三水点靠木的支持!

Javascript 相关文章推荐
jQuery选择头像并实时显示的代码
Jun 27 Javascript
jquery 使用点滴函数代码
May 20 Javascript
jquery插件jTimer(jquery定时器)使用方法
Dec 23 Javascript
JQuery解析HTML、JSON和XML实例详解
Mar 29 Javascript
JQuery对表单元素的基本操作使用总结
Jul 18 Javascript
javascript学习笔记(八)正则表达式
Oct 08 Javascript
JavaScript使表单中的内容显示在屏幕上的方法
Jun 29 Javascript
深入浅析同源策略和跨域访问
Nov 26 Javascript
常见的javascript跨域通信方法
Dec 31 Javascript
Bootstrap3.0学习教程之JS折叠插件
May 27 Javascript
Bootstrap 模态对话框只加载一次 remote 数据的完美解决办法
Jul 09 Javascript
javascript设计模式 ? 代理模式原理与用法实例分析
Apr 16 Javascript
微信小程序购物商城系统开发系列-目录结构介绍
Nov 21 #Javascript
微信小程序购物商城系统开发系列-工具篇的介绍
Nov 21 #Javascript
全面解析node 表单的图片上传
Nov 21 #Javascript
利用fecha进行JS日期处理
Nov 21 #Javascript
Bootstrap Modal遮罩弹出层(完整版)
Nov 21 #Javascript
Bootstrap Modal遮罩弹出层代码分享
Nov 21 #Javascript
jQuery事件绑定方法学习总结(推荐)
Nov 21 #Javascript
You might like
PHP初学者头疼问题总结
2006/10/09 PHP
IIS环境下快速安装、配置和调试PHP5.2.0
2006/12/17 PHP
推荐Discuz!5的PHP代码高亮显示与实现可运行代码
2007/03/15 PHP
php出现内存位置访问无效错误问题解决方法
2014/08/16 PHP
在Linux系统下一键重新安装WordPress的脚本示例
2015/06/30 PHP
PHP实现类似于C语言的文件读取及解析功能
2017/09/01 PHP
Javascript 判断函数类型完美解决方案
2009/09/02 Javascript
JQuery 插件制作实践 xMarquee插件V1.0
2010/04/02 Javascript
jQuery实现在下拉列表选择时获取json数据的方法
2015/04/16 Javascript
jquery插件Jplayer使用方法简析
2016/04/22 Javascript
使用纯JS代码判断字符串中有多少汉字的实现方法(超简单实用)
2016/11/12 Javascript
jquery Form轻松实现文件上传
2017/05/24 jQuery
纯js实现图片匀速淡入淡出效果
2017/08/22 Javascript
vue语法之拼接字符串的示例代码
2017/10/25 Javascript
ionic grid(栅格)九宫格制作详解
2018/06/30 Javascript
react中实现搜索结果中关键词高亮显示
2018/07/31 Javascript
vue style width a href动态拼接问题的解决
2020/08/07 Javascript
windows下python安装paramiko模块和pycrypto模块(简单三步)
2017/07/06 Python
Python中使用__new__实现单例模式并解析
2019/06/25 Python
解决Django提交表单报错:CSRF token missing or incorrect的问题
2020/03/13 Python
pycharm激活方法到2099年(激活流程)
2020/09/22 Python
利用HTML5绘制点线面组成的3D图形的示例
2015/05/12 HTML / CSS
详解HTML5 data-* 自定义属性
2018/01/24 HTML / CSS
Servlet面试题库
2015/07/18 面试题
计算机专业毕业生推荐信
2013/11/25 职场文书
不忘国耻振兴中华演讲稿
2014/05/14 职场文书
找工作求职信
2014/07/07 职场文书
党的群众路线教育实践活动通讯稿
2014/09/10 职场文书
全国法制宣传日活动总结2014
2014/11/01 职场文书
健康状况证明书
2014/11/26 职场文书
财务部会计岗位职责
2015/02/03 职场文书
质量保证书格式
2015/02/27 职场文书
爸爸的三轮车观后感
2015/06/16 职场文书
个人工作失误的保证书怎么写?
2019/06/21 职场文书
详解PHP Swoole与TCP三次握手
2021/05/27 PHP
HTML+CSS 实现顶部导航栏菜单制作
2021/06/03 HTML / CSS