在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 相关文章推荐
Js中的onblur和onfocus事件应用介绍
Aug 27 Javascript
让jQuery与其他JavaScript库并存避免冲突的方法
Dec 23 Javascript
flash遮住div问题的正确解决方法
Feb 27 Javascript
JS烟花背景效果实现方法
Mar 03 Javascript
JS实现兼容性好,带缓冲的动感网页右键菜单效果
Sep 18 Javascript
js正则表达式注册页面表单验证
Oct 11 Javascript
jQuery插件实现可输入和自动匹配的下拉框
Oct 24 Javascript
JavaScript评论点赞功能的实现方法
Mar 13 Javascript
angular.JS实现网页禁用调试、复制和剪切
Mar 31 Javascript
egg.js的基本使用和调用数据库的方法示例
May 18 Javascript
如何使用proxy实现一个简单完整的MVVM库的示例代码
Sep 17 Javascript
Webpack5正式发布,有哪些新特性
Oct 12 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入门的学习方法
2007/01/02 PHP
php遍历目录viewDir函数
2009/12/15 PHP
Netbeans 8.2与PHP相关的新特性介绍
2016/10/08 PHP
PHP实践教程之过滤、验证、转义与密码详解
2017/07/24 PHP
laravel框架与其他框架的详细对比
2019/10/23 PHP
基于jQuery实现的当离开页面时出现提示的实现代码
2011/06/27 Javascript
JavaScript 反科里化 this [译]
2012/09/20 Javascript
JS对象转换为Jquery对象示例
2014/01/26 Javascript
javascript圆盘抽奖程序实现原理和完整代码例子
2014/06/03 Javascript
JQuery判断radio(单选框)是否选中和获取选中值方法总结
2015/04/15 Javascript
基于JavaScript实现图片剪切效果
2017/03/07 Javascript
详解如何使用webpack在vue项目中写jsx语法
2017/11/08 Javascript
vue.js动画中的js钩子函数的实现
2018/07/06 Javascript
vue+springboot实现项目的CORS跨域请求
2018/09/05 Javascript
js中的闭包实例展示
2018/11/01 Javascript
简单了解node npm cnpm的具体使用方法
2019/02/27 Javascript
微信小程序开发注意指南和优化实践(小结)
2019/06/21 Javascript
JS实现扫码枪扫描二维码功能
2020/01/03 Javascript
JS原型prototype和__proto__用法实例分析
2020/03/14 Javascript
[00:32]2018DOTA2亚洲邀请赛EG出场
2018/04/03 DOTA
如何使用python爬取csdn博客访问量
2016/02/14 Python
用python找出那些被“标记”的照片
2017/04/20 Python
Python-ElasticSearch搜索查询的讲解
2019/02/25 Python
Python合并同一个文件夹下所有PDF文件的方法
2019/03/11 Python
python打包exe开机自动启动的实例(windows)
2019/06/28 Python
Ubuntu18.04安装 PyCharm并使用 Anaconda 管理的Python环境
2020/04/08 Python
实现ECharts双Y轴左右刻度线一致的例子
2020/05/16 Python
会计电算化专业应届大学生求职信
2013/10/22 职场文书
大学毕业自我鉴定范文
2014/02/03 职场文书
能源工程专业应届生求职信
2014/03/01 职场文书
大学生个人求职信
2014/06/02 职场文书
水浒传读书笔记
2015/06/25 职场文书
任命书格式模板
2015/09/22 职场文书
新西兰:最新留学学习计划书写作指南
2019/07/15 职场文书
pandas DataFrame.shift()函数的具体使用
2021/05/24 Python
从原生JavaScript到React深入理解
2022/07/23 Javascript