在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技巧--转义符"\"的妙用
Jan 09 Javascript
Sample script that deletes a SQL Server database
Jun 16 Javascript
自用js开发框架小成 学习js的朋友可以看看
Nov 16 Javascript
javascript 获取模态窗口的滚动位置代码
Aug 06 Javascript
js中javascript:void(0) 真正含义
Nov 05 Javascript
JavaScript中通过提示框跳转页面的方法
Feb 14 Javascript
jquery中$.fn和图片滚动效果实现的必备知识总结
Apr 21 jQuery
CSS3+JavaScript实现翻页幻灯片效果
Jun 28 Javascript
JS+canvas实现的五子棋游戏【人机大战版】
Jul 19 Javascript
如何开发出更好的JavaScript模块
Dec 22 Javascript
微信小程序实现搜索历史功能
Mar 26 Javascript
javascript设计模式 ? 观察者模式原理与用法实例分析
Apr 22 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入门学习知识点二 PHP简单的分页过程与原理
2011/07/14 PHP
PHP实现的带超时功能get_headers函数
2015/02/10 PHP
PHP结合jQuery实现找回密码
2015/07/22 PHP
PHP用户验证和标签推荐的简单使用
2016/10/31 PHP
PHP如何读取由JavaScript设置的Cookie
2017/03/22 PHP
PHP实现负载均衡session共享redis缓存操作示例
2018/08/22 PHP
Laravel 数据库加密及数据库表前缀配置方法
2019/10/10 PHP
Javascript代码混淆综合解决方案-Javascript在线混淆器
2006/12/18 Javascript
js监听鼠标点击和键盘点击事件并自动跳转页面
2014/09/24 Javascript
浏览器缩放检测的js代码
2014/09/28 Javascript
jQuery中DOM树操作之使用反向插入方法实例分析
2015/01/23 Javascript
JavaScript判断图片是否已经加载完毕的方法汇总
2016/02/05 Javascript
Node.js的Express框架使用上手指南
2016/03/12 Javascript
[原创]javascript typeof id==='string'?document.getElementById(id):id解释
2016/11/02 Javascript
JQuery实现动态操作表格
2017/01/11 Javascript
js实现拖拽上传图片功能
2017/08/01 Javascript
vue-cli的eslint相关用法
2017/09/29 Javascript
利用jquery如何从json中读取数据追加到html中
2017/12/01 jQuery
解决vue处理axios post请求传参的问题
2018/03/05 Javascript
vue删除html内容的标签样式实例
2018/09/13 Javascript
微信小程序实现随机验证码功能
2018/12/20 Javascript
利用js-cookie实现前端设置缓存数据定时失效
2019/06/18 Javascript
浅谈一个webpack构建速度优化误区
2019/06/24 Javascript
JS操作字符串转数字的常见方法示例
2019/10/29 Javascript
Javascript基于OOP实实现探测器功能代码实例
2020/08/26 Javascript
在antd Table中插入可编辑的单元格实例
2020/10/28 Javascript
用Python脚本生成Android SALT扰码的方法
2013/09/18 Python
Python统计日志中每个IP出现次数的方法
2015/07/06 Python
windows上彻底删除jupyter notebook的实现
2020/04/13 Python
基于python 将列表作为参数传入函数时的测试与理解
2020/06/05 Python
html5借用repeating-linear-gradient实现一把刻度尺(ruler)
2019/09/09 HTML / CSS
审核会计岗位职责
2013/11/08 职场文书
幼儿园教研活动方案
2014/01/19 职场文书
《搭石》教学反思
2014/04/07 职场文书
银行党员批评与自我批评
2014/10/15 职场文书
深入解析NumPy中的Broadcasting广播机制
2021/05/30 Python