在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 相关文章推荐
鼠标移动到一张图片时变为另一张图片
Dec 05 Javascript
javascript通过navigator.userAgent识别各种浏览器
Oct 25 Javascript
百度移动版的url编码解码示例
Apr 29 Javascript
JavaScript实现广告的关闭与显示效果实例
Jul 02 Javascript
js点击列表文字对应该行显示背景颜色的实现代码
Aug 05 Javascript
基于jQuery实现仿搜狐辩论投票动画代码(附源码下载)
Feb 18 Javascript
AngularJS打开页面隐藏显示表达式用法示例
Dec 25 Javascript
详解vue-router 2.0 常用基础知识点之router-link
May 10 Javascript
基于JavaScript 性能优化技巧心得(分享)
Dec 11 Javascript
Ant Design Pro 之 ProTable使用操作
Oct 31 Javascript
JavaScript实现移动小精灵的案例代码
Dec 12 Javascript
Taro小程序自定义顶部导航栏功能的实现
Dec 17 Javascript
很全面的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命令行脚本接收传入参数的三种方式
2014/08/20 PHP
PHP curl伪造IP地址和header信息代码实例
2015/04/27 PHP
PHP版本常用的排序算法汇总
2015/12/20 PHP
Yii2使用自带的UploadedFile实现的文件上传
2016/06/20 PHP
CodeIgniter框架实现的整合Smarty引擎DEMO示例
2019/03/28 PHP
CSS心形加载的动画源码的实现
2021/03/09 HTML / CSS
Javascript - HTML的request类
2006/07/15 Javascript
jquery 锁定弹出层实现代码
2010/02/23 Javascript
javascript onmouseout 解决办法
2010/07/17 Javascript
JavaScript高级程序设计(第3版)学习笔记6 初识js对象
2012/10/11 Javascript
在JavaScript里嵌入大量字符串常量的实现方法
2013/07/07 Javascript
jQuery遍历之next()、nextAll()方法使用实例
2014/11/08 Javascript
javascript实现百度地图鼠标滑动事件显示、隐藏
2015/04/02 Javascript
JavaScript实现表格快速变色效果代码
2015/08/19 Javascript
jqGrid表格应用之新增与删除数据附源码下载
2015/12/02 Javascript
vue.js+Echarts开发图表放大缩小功能实例
2017/06/09 Javascript
详解vue 配合vue-resource调用接口获取数据
2017/06/22 Javascript
微信小程序 页面滑动事件的实例详解
2017/10/12 Javascript
vue使用ElementUI时导航栏默认展开功能的实现
2018/07/04 Javascript
使用canvas实现一个vue弹幕组件功能
2018/11/30 Javascript
js与jquery获取input输入框中的值实例讲解
2020/02/27 jQuery
JS造成内存泄漏的几种情况实例分析
2020/03/02 Javascript
[00:43]2016完美“圣”典风云人物:单车宣传片
2016/12/02 DOTA
Django基于ORM操作数据库的方法详解
2018/03/27 Python
django orm 通过related_name反向查询的方法
2018/12/15 Python
彻底解决pip下载pytorch慢的问题方法
2021/03/01 Python
前端制作动画的几种方式(css3,js)
2016/12/12 HTML / CSS
澳大利亚领先的在线礼品网站:Gifts Australia
2020/08/15 全球购物
营业员个人总结的自我评价
2013/10/25 职场文书
老公给老婆的道歉信
2014/01/10 职场文书
讲解员培训方案
2014/05/04 职场文书
节约粮食标语
2014/06/18 职场文书
纪念九一八事变演讲稿:勿忘国耻
2014/09/14 职场文书
2014医学院领导班子对照检查材料思想汇报
2014/09/19 职场文书
剧场版《转生恶役只好拔除破灭旗标》公开最新视觉图 2023年上映
2022/04/02 日漫
解决WINDOWS电脑开机后桌面没有任何图标
2022/04/09 数码科技