详解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 相关文章推荐
jquer之ajaxQueue简单实现代码
Sep 15 Javascript
判断一个变量是数组Array类型的方法
Sep 16 Javascript
JavaScript脚本判断蜘蛛来源的方法
Sep 22 Javascript
javascript 闭包详解及简单实例应用
Dec 31 Javascript
详解vue.js之绑定class和style的示例代码
Aug 24 Javascript
vue中$set的使用(结合在实际应用中遇到的坑)
Jul 10 Javascript
浅谈vue父子组件怎么传值
Jul 21 Javascript
webpack4简单入门实例
Sep 06 Javascript
浅谈JavaScript 代码简洁之道
Jan 09 Javascript
微信小程序如何利用getCurrentPages进行页面传值
Jul 01 Javascript
react中props 的使用及进行限制的方法
Apr 28 Javascript
JavaScript异步操作中串行和并行
Nov 20 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实现下载功能的代码
2012/09/29 PHP
yii权限控制的方法(三种方法)
2015/12/28 PHP
php ajax异步读取rss文档数据
2016/03/29 PHP
PHP实现网页内容html标签补全和过滤的方法小结【2种方法】
2017/04/27 PHP
JavaScript中的16进制字符(改进)
2011/11/21 Javascript
js页面跳转的问题(跳转到父页面、最外层页面、本页面)
2013/08/14 Javascript
jquery 实现两Select 标签项互调示例代码
2014/09/25 Javascript
JQuery实现带排序功能的权限选择实例
2015/05/18 Javascript
js改变style样式和css样式的简单实例
2016/06/28 Javascript
JS+CSS3实现超炫的散列画廊特效
2016/07/16 Javascript
输入框点击时边框变色效果的实现方法
2016/12/26 Javascript
js中Number数字数值运算后值不对的解决方法
2017/02/28 Javascript
JavaScript关联数组用法分析【概念、定义、遍历】
2017/03/15 Javascript
vue中component组件的props使用详解
2017/09/04 Javascript
10 种最常见的 Javascript 错误(频率最高)
2018/02/08 Javascript
javascript、php关键字搜索函数的使用方法
2018/05/29 Javascript
ES6基础之默认参数值
2019/02/21 Javascript
基于node+websocket+html实现腾讯课堂聊天室聊天功能
2020/03/04 Javascript
原生JS实现拖拽功能
2020/12/16 Javascript
解决vue项目本地启动时无法携带cookie的问题
2021/02/06 Vue.js
通过数据库向Django模型添加字段的示例
2015/07/21 Python
Python使用迭代器捕获Generator返回值的方法
2017/04/05 Python
python利用paramiko连接远程服务器执行命令的方法
2017/10/16 Python
对Python中list的倒序索引和切片实例讲解
2018/11/15 Python
Python PIL图片添加字体的例子
2019/08/22 Python
Python存储读取HDF5文件代码解析
2020/11/25 Python
Python 实现集合Set的示例
2020/12/21 Python
EJB的激活机制
2013/10/25 面试题
小班秋游活动方案
2014/02/22 职场文书
《浅水洼里的小鱼》听课反思
2014/02/28 职场文书
机械系毕业生求职信
2014/05/28 职场文书
网络营销计划书
2015/01/17 职场文书
人才市场接收函
2015/01/30 职场文书
导游欢送词
2015/01/31 职场文书
学习雷锋精神倡议书
2015/04/27 职场文书
MySQL如何使用使用Xtrabackup进行备份和恢复
2021/06/21 MySQL