在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 相关文章推荐
jquery实现鼠标拖动图片效果示例代码
Jan 09 Javascript
Javascript日期格式化format函数的使用方法
Aug 30 Javascript
Bootstrap基本组件学习笔记之导航(10)
Dec 07 Javascript
JS小数转换为整数的方法分析
Jan 07 Javascript
layui分页效果实现代码
May 19 Javascript
jQuery实现简单的回到顶部totop功能示例
Oct 16 jQuery
JavaScript实现简单轮播图效果
Dec 01 Javascript
JS数组扁平化(flat)方法总结详解
Jun 24 Javascript
element-ui中按需引入的实现
Dec 25 Javascript
JS实现“全选”和"全不选"功能代码实例
Feb 06 Javascript
Vue+tracking.js 实现前端人脸检测功能
Apr 16 Javascript
小程序选项卡以及swiper套用(跨页面)
Jun 19 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
Body是什么,该怎么喝出咖啡里的口感
2021/03/03 咖啡文化
php面向对象全攻略 (六)__set() __get() __isset() __unset()的用法
2009/09/30 PHP
如何使用FireFox插件FirePHP调试PHP
2013/07/23 PHP
使用php检测用户当前使用的浏览器是否为IE浏览器
2013/12/03 PHP
php基于curl实现的股票信息查询类实例
2016/11/11 PHP
php 运算符与表达式详细介绍
2016/11/30 PHP
yii2.0整合阿里云oss上传单个文件的示例
2017/09/19 PHP
JS控制表格隔行变色
2006/06/26 Javascript
JavaScript 继承详解(四)
2009/07/13 Javascript
js控制再次点击按钮之间的间隔时间可防止重复提交
2014/08/01 Javascript
JavaScript indexOf方法入门实例(计算指定字符在字符串中首次出现的位置)
2014/10/17 Javascript
JavaScript中消除闭包的一般方法介绍
2015/03/16 Javascript
浅谈Vue的基本应用
2016/12/27 Javascript
ie下js不执行的几种可能
2017/02/28 Javascript
详解数组Array.sort()排序的方法
2020/05/09 Javascript
Vue+Jwt+SpringBoot+Ldap完成登录认证的示例代码
2018/05/21 Javascript
tweenjs缓动算法的使用实例分析
2019/08/26 Javascript
JS回调函数深入理解
2019/10/16 Javascript
[02:10]探秘浦东源深体育馆 DOTA2 Supermajor不见不散
2018/05/17 DOTA
树莓派中python获取GY-85九轴模块信息示例
2013/12/05 Python
Python中Django框架利用url来控制登录的方法
2015/07/25 Python
Python 迭代器工具包【推荐】
2016/05/06 Python
Python 3.8中实现functools.cached_property功能
2019/05/29 Python
对PyQt5的输入对话框使用(QInputDialog)详解
2019/06/25 Python
Python实现仿射密码的思路详解
2020/04/23 Python
CSS3属性 line-clamp控制文本行数的使用
2020/03/19 HTML / CSS
星空联盟C# .net笔试题
2014/12/05 面试题
司法建议书范文
2014/05/13 职场文书
学雷锋标语
2014/06/25 职场文书
电子专业自荐信
2014/07/01 职场文书
司机岗位职责说明书
2014/07/29 职场文书
2015毕业寄语大全
2015/02/26 职场文书
如何让vue长列表快速加载
2021/03/29 Vue.js
Python NumPy灰度图像的压缩原理讲解
2021/08/04 Python
python运行脚本文件的三种方法实例
2022/06/25 Python
maven 解包依赖项中的文件的解决方法
2022/07/15 Java/Android