详解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判断字符输入个数(数字英文长度记为1,中文记为2,超过长度自动截取)
Oct 15 Javascript
javascript string字符串优化问题
Jul 31 Javascript
jquery 新建的元素事件绑定问题解决方案
Jun 12 Javascript
JS动态修改iframe内嵌网页地址的方法
Apr 01 Javascript
jQuery实现tab选项卡效果的方法
Jul 08 Javascript
js带闹铃功能的倒计时代码
Sep 29 Javascript
AngularJS动态绑定HTML的方法分析
Nov 07 Javascript
vue基于Element构建自定义树的示例代码
Sep 19 Javascript
Node.js连接Sql Server 2008及数据层封装详解
Aug 27 Javascript
JS前端知识点offset,scroll,client,冒泡,事件对象的应用整理总结
Jun 27 Javascript
vue遍历生成的输入框 绑定及修改值示例
Oct 30 Javascript
微信小程序实现天气预报功能(附源码)
Dec 10 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
DISCUZ 论坛管理员密码忘记的解决方法
2009/05/14 PHP
一个PHP并发访问实例代码
2012/09/06 PHP
使用PHP导出Redis数据到另一个Redis中的代码
2014/03/12 PHP
PHP常用正则表达式集锦
2014/08/17 PHP
PHP使用array_fill定义多维数组的方法
2015/03/18 PHP
PHP+AJAX 投票器功能
2017/11/11 PHP
Javascript 遍历页面text控件详解
2014/01/06 Javascript
js处理自己不能定义二维数组的方法详解
2014/03/03 Javascript
js unicode 编码解析关于数据转换为中文的两种方法
2014/04/21 Javascript
js实现遮罩层划出效果是生成div而不是显示
2014/07/29 Javascript
js实现网页多级级联菜单代码
2015/08/20 Javascript
JavaScript高级教程5.6之基本包装类型(详细)
2015/11/23 Javascript
jQuery获取及设置表单input各种类型值的方法小结
2016/05/24 Javascript
JS加载器如何动态加载外部js文件
2016/05/26 Javascript
Angular2 PrimeNG分页模块学习
2017/01/14 Javascript
phantomjs导出html到pdf的方法总结
2017/10/19 Javascript
Vue组件开发之LeanCloud带图形校验码的短信发送功能
2017/11/07 Javascript
layer插件select选中默认值的方法
2018/08/14 Javascript
vue中使用input[type="file"]实现文件上传功能
2018/09/10 Javascript
angular 用Observable实现异步调用的方法
2018/12/27 Javascript
JS实现获取当前所在周的周六、周日示例分析
2019/05/11 Javascript
JavaScript使用canvas绘制随机验证码
2020/02/17 Javascript
JS自定义滚动条效果
2020/03/13 Javascript
python编程开发之日期操作实例分析
2015/11/13 Python
django项目运行因中文而乱码报错的几种情况解决
2017/11/07 Python
python编程嵌套函数实例代码
2018/02/11 Python
Pycharm之快速定位到某行快捷键的方法
2019/01/20 Python
Python 获取指定文件夹下的目录和文件的实现
2019/08/30 Python
如何通过命令行进入python
2020/07/06 Python
python创建文本文件的简单方法
2020/08/30 Python
HTML5事件方法全部汇总
2016/05/12 HTML / CSS
思想汇报范文
2013/11/04 职场文书
秸秆管理实施方案
2014/03/15 职场文书
办公室主任岗位职责范本
2015/03/31 职场文书
庆七一晚会主持词
2015/06/30 职场文书
主婚人致辞精选
2015/07/28 职场文书