在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中的变量作用域介绍
Dec 31 Javascript
基于jQuery实现网页进度显示插件
Mar 04 Javascript
jQuery源码分析之Callbacks详解
Mar 13 Javascript
关于JavaScript 原型链的一点个人理解
Jul 31 Javascript
浅析Javascript ES6中的原生Promise
Aug 25 Javascript
详解使用JS如何制作简单的ASCII图与单极图
Mar 31 Javascript
关于使用axios的一些心得技巧分享
Jul 02 Javascript
webpack构建vue项目的详细教程(配置篇)
Jul 17 Javascript
vue移动UI框架滑动加载数据的方法
Mar 12 Javascript
Vue源码之关于vm.$delete()/Vue.use()内部原理详解
May 01 Javascript
layui实现form表单同时提交数据和文件的代码
Oct 25 Javascript
javascript 原型与原型链的理解及实例分析
Nov 23 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 分页类 扩展代码
2009/06/11 PHP
超级简单的php+mysql留言本源码
2009/11/11 PHP
PHP exif扩展方法开启详解
2014/07/28 PHP
destoon首页调用求购供应信息的地区名称的方法
2014/08/21 PHP
PHP实现AES256加密算法实例
2014/09/22 PHP
php使用ob_start()实现图片存入变量的方法
2014/11/14 PHP
php+ajax 实现输入读取数据库显示匹配信息
2015/10/08 PHP
详解PHP中的序列化、反序列化操作
2017/03/21 PHP
PHP实现上传多图即时显示与即时删除的方法
2017/05/09 PHP
js 匿名调用实现代码
2009/06/19 Javascript
JavaScript 组件之旅(四):测试 JavaScript 组件
2009/10/28 Javascript
网页上的Javascript编辑器和代码格式化
2010/04/25 Javascript
jQuery中after的两种用法实例
2013/07/03 Javascript
jquery.messager.js插件导致页面抖动的解决方法
2013/07/14 Javascript
jQuery判断div随滚动条滚动到一定位置后停止
2014/04/02 Javascript
JavaScript-RegExp对象只能使用一次问题解决方法
2014/06/23 Javascript
JS面向对象基础讲解(工厂模式、构造函数模式、原型模式、混合模式、动态原型模式)
2014/08/16 Javascript
JavaScript中的console.trace()函数介绍
2014/12/29 Javascript
js中substr,substring,indexOf,lastIndexOf,split,replace的用法详解
2015/11/09 Javascript
js模拟微博发布消息
2017/02/23 Javascript
浅谈javascript的url参数parse和build函数
2017/03/04 Javascript
ztree简介_动力节点Java学院整理
2017/07/19 Javascript
JQuery 获取多个select标签option的text内容(实例)
2017/09/07 jQuery
解决使用Vue.js显示数据的时,页面闪现原始代码的问题
2018/02/11 Javascript
React中阻止事件冒泡的问题详析
2019/04/12 Javascript
JavaScript实现PC端横向轮播图
2020/02/07 Javascript
解决vant title-active-color与title-inactive-color不生效问题
2020/11/03 Javascript
Python使用chardet判断字符编码
2015/05/09 Python
python利用dir函数查看类中所有成员函数示例代码
2017/09/08 Python
解决PyCharm不运行脚本,而是运行单元测试的问题
2019/01/17 Python
CSS3不透明度实例讲解
2016/04/26 HTML / CSS
2013年大学生的自我鉴定
2013/10/24 职场文书
质检部岗位职责
2013/11/11 职场文书
《灰椋鸟》教学反思
2014/04/27 职场文书
民主生活会汇报材料
2014/12/15 职场文书
Nginx开启Brotli压缩算法实现过程详解
2021/03/31 Servers