在JavaScript中call()与apply()区别


Posted in Javascript onJanuary 22, 2016

如果没接触过动态语言,以编译型语言的思维方式去理解javaScript将会有种神奇而怪异的感觉,因为意识上往往不可能的事偏偏就发生了,甚至觉得不可理喻.如果在学JavaScript这自由而变幻无穷的语言过程中遇到这种感觉,那么就从现在形始,请放下的您的”偏见”,因为这对您来说绝对是一片新大陆,让JavaScrip

好,言归正传,先理解JavaScrtipt动态变换运行时上下文特性,这种特性主要就体现在apply, call两个方法的运用上.

一、方法的定义

call方法:

语法:call(thisObj,Object)

定义:调用一个对象的一个方法,以另一个对象替换当前对象。

说明:

call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。
如果没有提供 thisObj 参数,那么 Global 对象被用作 thisObj。

apply方法:

语法:apply(thisObj,[argArray])

定义:应用某一对象的一个方法,用另一个对象替换当前对象。

说明:

如果 argArray 不是一个有效的数组或者不是 arguments 对象,那么将导致一个 TypeError。

如果没有提供 argArray 和 thisObj 任何一个参数,那么 Global 对象将被用作 thisObj, 并且无法被传递任何参数。

--------------------------------------------------------------------------------

注意:call和apply方法完全一致,只是apply在传参的方式上,它以数组方式来传参。

代码示例:

function Animal(name) {
this.name = name;
this.showName = function() {
console.log(this.name);
};
}
function Cat(name) {
Animal.call(this, name);
}
Cat.prototype = new Animal();
function Dog(name) {
Animal.apply(this, name);
}
Dog.prototype = new Animal();
var cat = new Cat("Black Cat"); //call必须是object
var dog = new Dog(["Black Dog"]); //apply必须是array
cat.showName();
dog.showName();
console.log(cat instanceof Animal);
console.log(dog instanceof Animal);

-------------------------------------------------------------------------------

模拟call, apply的this替换

function Animal(name) {
this.name = name;
this.showName = function() {
alert(this.name);
};
};
function Cat(name) {
this.superClass = Animal;
this.superClass(name);
delete superClass;
}
var cat = new Cat("Black Cat");
cat.showName();

总结:

它们各自的定义:

apply:应用某一对象的一个方法,用另一个对象替换当前对象。

call:调用一个对象的一个方法,以另一个对象替换当前对象。

它们的共同之处:

都“可以用来代替另一个对象调用一个方法,将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。”——摘自JScript5.5 .chm

它们的不同之处:

apply:最多只能有两个参数——新this对象和一个数组 argArray。如果给该方法传递多个参数,则把参数都写进这个数组里面,当然,即使只有一个参数,也要写进数组里面。如果 argArray 不是一个有效的数组或者不是 arguments 对象,那么将导致一个 TypeError。如果没有提供 argArray 和 thisObj 任何一个参数,那么 Global 对象将被用作 thisObj, 并且无法被传递任何参数。

call:则是直接的参数列表,主要用在js对象各方法互相调用的时候,使当前this实例指针保持一致,或在特殊情况下需要改变this指针。如果没有提供 thisObj 参数,那么 Global 对象被用作 thisObj。

更简单地说,apply和call功能一样,只是传入的参数列表形式不同:如 func.call(func1,var1,var2,var3)对应的apply写法为:func.apply(func1,[var1,var2,var3])

Javascript 相关文章推荐
JavaScript中this关键词的使用技巧、工作原理以及注意事项
May 20 Javascript
JavaScript对象之深度克隆介绍
Dec 08 Javascript
javascript使用输出语句实现网页特效代码
Aug 06 Javascript
如何判断Javascript对象是否存在的简单实例
May 18 Javascript
javascript事件模型介绍
May 31 Javascript
JavaScript实现省市县三级级联特效
May 16 Javascript
解决angularJS中input标签的ng-change事件无效问题
Sep 13 Javascript
解决一个微信号同时支持多个环境网页授权问题
Aug 07 Javascript
vue实现数据控制视图的原理解析
Jan 07 Javascript
详解React 元素渲染
Jul 07 Javascript
Vue中的nextTick作用和几个简单的使用场景
Jan 25 Vue.js
详解Vue的七种传值方式
Feb 08 Vue.js
很全面的JavaScript常用功能汇总集合
Jan 22 #Javascript
JavaScript实现仿淘宝商品购买数量的增减效果
Jan 22 #Javascript
jQuery头像裁剪工具jcrop用法实例(附演示与demo源码下载)
Jan 22 #Javascript
JavaScript学习笔记整理之引用类型
Jan 22 #Javascript
jQuery弹层插件jquery.fancybox.js用法实例
Jan 22 #Javascript
基于JS实现新闻列表无缝向上滚动实例代码
Jan 22 #Javascript
jQuery validate插件实现ajax验证重复的2种方法
Jan 22 #Javascript
You might like
一贴学会PHP 新手入门教程
2009/08/03 PHP
php截取中文字符串不乱码的方法
2013/12/25 PHP
PHP copy函数使用案例代码解析
2020/09/01 PHP
关于IE、Firefox、Opera页面呈现异同 写脚本很痛苦
2009/08/28 Javascript
优化Jquery,提升网页加载速度
2013/11/14 Javascript
jquery获得option的值和对option进行操作
2013/12/13 Javascript
JavaScript基本的输出和嵌入式写法教程
2015/10/20 Javascript
基于JavaScript如何实现私有成员的语法特征及私有成员的实现方式
2015/10/28 Javascript
JS动态创建元素的两种方法
2016/04/20 Javascript
VC调用javascript的几种方法(推荐)
2016/08/09 Javascript
JS实现的找零张数最小问题示例
2017/11/28 Javascript
基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果
2018/01/09 Javascript
浅谈layui数据表格判断问题(加入表单元素),设置单元格样式
2019/10/26 Javascript
如何在Vue.JS中使用图标组件
2020/08/04 Javascript
[51:26]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第二局
2016/03/03 DOTA
[55:32]2018DOTA2亚洲邀请赛 4.4 淘汰赛 EG vs LGD 第二场
2018/04/05 DOTA
Python中的map()函数和reduce()函数的用法
2015/04/27 Python
Python中 Lambda表达式全面解析
2016/11/28 Python
Python编写一个优美的下载器
2018/04/15 Python
python3第三方爬虫库BeautifulSoup4安装教程
2018/06/19 Python
Django多数据库的实现过程详解
2019/08/01 Python
Python读取pdf表格写入excel的方法
2021/01/22 Python
用css3实现转换过渡和动画效果
2020/03/13 HTML / CSS
原生 JS+CSS+HTML 实现时序图的方法
2019/07/31 HTML / CSS
ALEX AND ANI:手镯,项链,耳环和更多
2017/04/20 全球购物
水上运动奥特莱斯:Wasterports Outlet
2018/08/08 全球购物
TripAdvisor日本:全球领先的旅游网站
2019/02/14 全球购物
毕业生的自我评价分享
2013/12/18 职场文书
运动会致辞稿50字
2014/02/04 职场文书
我们的节日端午节活动方案
2014/03/02 职场文书
国贸专业毕业求职信
2014/06/11 职场文书
经营目标管理责任书
2014/07/25 职场文书
端午节活动总结
2014/08/26 职场文书
入党积极分子学习党的纲领思想汇报
2014/09/13 职场文书
2016年教师节贺卡寄语
2015/12/04 职场文书
Java界面编程实现界面跳转
2022/06/16 Java/Android