在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基础的动画教程,直观易懂
Jan 10 Javascript
Jquery公告滚动+AJAX后台得到数据
Apr 14 Javascript
JS关闭窗口与JS关闭页面的几种方法小结
Dec 17 Javascript
javascript文件中引用依赖的js文件的方法
Mar 17 Javascript
express的中间件basicAuth详解
Dec 04 Javascript
JS/Jquery判断对象为空的方法
Jun 11 Javascript
js实现拉幕效果的广告代码
Sep 02 Javascript
学习使用bootstrap3栅格系统
Apr 12 Javascript
动态创建Angular组件实现popup弹窗功能
Sep 15 Javascript
基于js的变量提升和函数提升(详解)
Sep 17 Javascript
jQuery实现为table表格动态添加或删除tr功能示例
Feb 19 jQuery
Angular中使用ng-zorro图标库部分图标不能正常显示问题
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目录操作函数之获取目录与文件的类型
2010/12/29 PHP
PHP中mysqli_affected_rows作用行数返回值分析
2014/12/26 PHP
默认让页面的第一个控件选中的javascript代码
2009/12/26 Javascript
jQuery 1.4 15个你应该知道的新特性(译)
2010/01/24 Javascript
jQuery中(function(){})()执行顺序的理解
2013/03/05 Javascript
Jquery绑定事件(bind和live的区别介绍)
2013/08/23 Javascript
浅谈javascript获取元素transform参数
2015/07/24 Javascript
基于JavaScript获取鼠标位置的各种方法
2015/12/16 Javascript
js密码强度检测
2016/01/07 Javascript
实例讲解使用原生JavaScript处理AJAX请求的方法
2016/05/10 Javascript
JS简单实现DIV相对于浏览器固定位置不变的方法
2016/06/17 Javascript
微信小程序实战之上拉(分页加载)效果(2)
2017/04/17 Javascript
webuploader分片上传的实现代码(前后端分离)
2018/09/10 Javascript
vue使用微信JS-SDK实现分享功能
2019/08/23 Javascript
JS常见面试试题总结【去重、遍历、闭包、继承等】
2019/08/27 Javascript
vscode调试node.js的实现方法
2020/03/22 Javascript
echarts实现获取datazoom的起始值(包括x轴和y轴)
2020/07/20 Javascript
NodeJS模块Buffer原理及使用方法解析
2020/11/11 NodeJs
详解python脚本自动生成需要文件实例代码
2017/02/04 Python
TensorFlow实现卷积神经网络CNN
2018/03/09 Python
Windows下将Python文件打包成.EXE可执行文件的方法
2018/08/03 Python
计算机二级python学习教程(1) 教大家如何学习python
2019/05/16 Python
Jupyter Notebook输出矢量图实例
2020/04/14 Python
使用keras实现densenet和Xception的模型融合
2020/05/23 Python
雅诗兰黛(Estee Lauder)英国官方网站:世界顶级化妆品牌
2016/12/29 全球购物
Pretty Little Thing爱尔兰:时尚女性服饰
2017/03/27 全球购物
达拉斯牛仔官方商店:Dallas Cowboys Pro Shop
2018/02/10 全球购物
大码女装:Ulla Popken
2019/08/06 全球购物
自我评价范文分享
2014/01/04 职场文书
优良学风班总结材料
2014/02/08 职场文书
大堂副理的岗位职责范文
2014/02/17 职场文书
计划生育标语
2014/06/23 职场文书
五月的鲜花活动方案
2014/08/21 职场文书
无财产离婚协议书范本
2014/10/28 职场文书
nginx配置文件使用环境变量的操作方法
2021/06/02 Servers
python编程简单几行代码实现视频转换Gif示例
2021/10/05 Python