在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 相关文章推荐
Prototype Array对象 学习
Jul 19 Javascript
Confirmer JQuery确认对话框组件
Jun 09 Javascript
关于JAVASCRIPT urldecode URL解码的问题
Jan 08 Javascript
Blocksit插件实现瀑布流数据无限( 异步)加载
Jun 20 Javascript
基于JQuery制作可编辑的表格特效
Dec 23 Javascript
jQuery DOM删除节点操作指南
Mar 03 Javascript
Javascript中类式继承和原型式继承的实现方法和区别之处
Apr 25 Javascript
微信小程序实现点击按钮修改文字大小功能【附demo源码下载】
Dec 06 Javascript
vue3.0 CLI - 1 - npm 安装与初始化的入门教程
Sep 14 Javascript
浅谈在vue中使用mint-ui swipe遇到的问题
Sep 27 Javascript
layer弹出层倒计时关闭的实现方法
Sep 27 Javascript
react中useState使用:如何实现在当前表格直接更改数据
Aug 05 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,不用COM,生成excel文件
2006/10/09 PHP
深入PHP数据加密详解
2013/06/18 PHP
解析phpstorm + xdebug 远程断点调试
2013/06/20 PHP
PHP函数in_array()使用详解
2014/08/20 PHP
PHP实现登录搜狐广告获取广告联盟数据的方法【附demo源码】
2016/10/14 PHP
PHP-FPM的配置与优化讲解
2019/03/15 PHP
javascript实现的动态文字变换
2007/07/28 Javascript
基于JQuery的密码强度验证代码
2010/03/01 Javascript
js中巧用cssText属性批量操作样式
2011/03/13 Javascript
js控制的遮罩层实例介绍
2013/05/29 Javascript
document.write的几点使用心得
2014/05/14 Javascript
javascript删除一个html元素节点的方法
2014/12/20 Javascript
jQuery树形控件zTree使用小结
2016/08/02 Javascript
详解js实现线段交点的三种算法
2016/08/09 Javascript
AngularJS 2.0入门权威指南
2016/10/08 Javascript
jQuery html表格排序插件tablesorter使用方法详解
2017/02/10 Javascript
JS数组操作中的经典算法实例讲解
2017/07/26 Javascript
for循环 + setTimeout 结合一些示例(前端面试题)
2017/08/30 Javascript
js生成word中图片处理方法
2018/01/06 Javascript
详解Nodejs mongoose
2018/06/10 NodeJs
详解Vue2.0组件的继承与扩展
2018/11/23 Javascript
JS Array.from()将伪数组转换成数组的方法示例
2020/03/23 Javascript
Python 实现一行输入多个值的方法
2018/04/21 Python
Python 查看list中是否含有某元素的方法
2018/06/27 Python
Python使用itchat模块实现群聊转发,自动回复功能示例
2019/08/26 Python
Python交互环境下打印和输入函数的实例内容
2020/02/16 Python
Python xpath表达式如何实现数据处理
2020/06/13 Python
Python爬虫如何应对Cloudflare邮箱加密
2020/06/24 Python
django Model层常用验证器及自定义验证器详解
2020/07/15 Python
CSS3制作彩色进度条样式的代码示例分享
2016/06/23 HTML / CSS
SmartBuyGlasses美国官网:太阳眼镜和眼镜
2017/08/20 全球购物
Java编程面试题
2016/04/04 面试题
《钱学森》听课反思
2014/03/01 职场文书
责任书范本
2014/08/25 职场文书
开学季:喜迎新生,迎新标语少不了
2019/11/07 职场文书
PyQt5实现多张图片显示并滚动
2021/06/11 Python