实例分析javascript中的call()和apply()方法


Posted in Javascript onNovember 28, 2014

1、方法定义

call方法:
语法:call([thisObj[,arg1[, arg2[,   [,.argN]]]]])
定义:调用一个对象的一个方法,以另一个对象替换当前对象。
说明:
call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。
如果没有提供 thisObj 参数,那么 Global 对象被用作 thisObj。

apply方法:
语法:apply([thisObj[,argArray]])
定义:应用某一对象的一个方法,用另一个对象替换当前对象。
说明:
如果 argArray 不是一个有效的数组或者不是 arguments 对象,那么将导致一个 TypeError。
如果没有提供 argArray 和 thisObj 任何一个参数,那么 Global 对象将被用作 thisObj, 并且无法被传递任何参数。

2、常用实例

a、

function add(a,b)

{

    alert(a+b);

}

function sub(a,b)

{

    alert(a-b);

}
add.call(sub,3,1);

这个例子中的意思就是用 add 来替换 sub,add.call(sub,3,1) == add(3,1) ,所以运行结果为:alert(4); // 注意:js 中的函数其实是对象,函数名是对 Function 对象的引用。

b、

function Animal(){  

    this.name = "Animal";  

    this.showName = function(){  

        alert(this.name);  

    }  

}  

function Cat(){  

    this.name = "Cat";  

}  

var animal = new Animal();  

var cat = new Cat();  

//通过call或apply方法,将原本属于Animal对象的showName()方法交给对象cat来使用了。  

//输入结果为"Cat"  

animal.showName.call(cat,",");  

//animal.showName.apply(cat,[]);

 call 的意思是把 animal 的方法放到cat上执行,原来cat是没有showName() 方法,现在是把animal 的showName()方法放到 cat上来执行,所以this.name 应该是 Cat

c、实现继承

 function Animal(name){    

     this.name = name;    

     this.showName = function(){    

         alert(this.name);    

     }    

 }    

 function Cat(name){  

     Animal.call(this, name);  

 }    

 var cat = new Cat("Black Cat");   

 cat.showName();

Animal.call(this) 的意思就是使用 Animal对象代替this对象,那么 Cat中不就有Animal的所有属性和方法了吗,Cat对象就能够直接调用Animal的方法以及属性了.

d、多重继承

function Class10()

{

    this.showSub = function(a,b)

    {

        alert(a-b);

    }

}

function Class11()

{

    this.showAdd = function(a,b)

    {

        alert(a+b);

    }

}

function Class2()

{

    Class10.call(this);

    Class11.call(this);

}

很简单,使用两个 call 就实现多重继承了
当然,js的继承还有其他方法,例如使用原型链,这个不属于本文的范畴,只是在此说明call 的用法。说了call ,当然还有 apply,这两个方法基本上是一个意思,区别在于 call 的第二个参数可以是任意类型,而apply的第二个参数必须是数组,也可以是arguments
还有 callee,caller..

总结:

简单的说:相同点:两个方法产生的作用是完全一样的

不同点:方法传递的参数不同

Javascript 相关文章推荐
jquery对ajax的支持介绍
Dec 10 Javascript
JavaScript插件化开发教程 (三)
Jan 27 Javascript
Javascript动态创建div的方法
Feb 09 Javascript
javascript制作游戏开发碰撞检测的封装代码
Mar 31 Javascript
原生JS实现的多个彩色小球跟随鼠标移动动画效果示例
Feb 01 Javascript
AngularJS下$http服务Post方法传递json参数的实例
Mar 29 Javascript
在vue使用clipboard.js进行一键复制文本的实现示例
Jan 15 Javascript
JS实现的杨辉三角【帕斯卡三角形】算法示例
Feb 26 Javascript
vue实现PC端录音功能的实例代码
Jun 05 Javascript
VUE 实现element upload上传图片到阿里云
Aug 12 Javascript
使用Vant完成DatetimePicker 日期的选择器操作
Nov 12 Javascript
Vue中插槽slot的使用方法与应用场景详析
Jun 08 Vue.js
深入理解javascript严格模式(Strict Mode)
Nov 28 #Javascript
jquery+php实现搜索框自动提示
Nov 28 #Javascript
Javascript前端UI框架Kit使用指南之kitjs事件管理
Nov 28 #Javascript
Javascript前端UI框架Kit使用指南之kitjs的对话框组件
Nov 28 #Javascript
Javascript前端UI框架Kit使用指南之Kitjs简介
Nov 28 #Javascript
非jQuery实现照片散落桌子上,单击放大的LightBox效果
Nov 28 #Javascript
开源的javascript项目Kissy介绍
Nov 28 #Javascript
You might like
php变量作用域的深入解析
2013/06/03 PHP
PHP中函数gzuncompress无法使用的解决方法
2017/03/02 PHP
PHP/ThinkPHP实现批量打包下载文件的方法示例
2017/07/31 PHP
Javascript 学习笔记 错误处理
2009/07/30 Javascript
jquery缓动swing liner控制动画过程不同时刻的速度
2014/05/29 Javascript
使用jquery实现放大镜效果
2014/09/02 Javascript
jQuery中ajax的get()方法用法实例
2014/12/26 Javascript
JavaScript通过prototype给对象定义属性用法实例
2015/03/23 Javascript
Angularjs全局变量被作用域监听的正确姿势
2016/02/06 Javascript
基于Node.js的JavaScript项目构建工具gulp的使用教程
2016/05/20 Javascript
微信js-sdk上传与下载图片接口用法示例
2016/10/12 Javascript
js原生实现FastClick事件的实例
2016/11/20 Javascript
浅析使用BootStrap TreeView插件实现灵活配置快递模板
2016/11/28 Javascript
微信小程序中时间戳和日期的相互转换问题
2018/07/09 Javascript
详解vuex状态管理模式
2018/11/01 Javascript
vue基础之事件简写、事件对象、冒泡、默认行为、键盘事件实例分析
2019/03/11 Javascript
浅析Vue下的components模板使用及应用
2019/11/27 Javascript
js将日期格式转换为YYYY-MM-DD HH:MM:SS
2020/09/18 Javascript
paramiko模块安装和使用(远程登录服务器)
2014/01/27 Python
Python实现遍历windows所有窗口并输出窗口标题的方法
2015/03/13 Python
浅谈python中scipy.misc.logsumexp函数的运用场景
2016/06/23 Python
python清理子进程机制剖析
2017/11/23 Python
Python中将dataframe转换为字典的实例
2018/04/13 Python
python调用摄像头显示图像的实例
2018/08/03 Python
Django 用户认证组件使用详解
2019/07/23 Python
详解解决Python memory error的问题(四种解决方案)
2019/08/08 Python
用python生成与调用cntk模型代码演示方法
2019/08/26 Python
中软Java笔试题
2012/11/11 面试题
工作自我评价分享
2013/12/01 职场文书
服务之星事迹材料
2014/05/03 职场文书
服务理念口号
2014/06/11 职场文书
土建技术员岗位职责
2015/04/11 职场文书
英语演讲开场白
2015/05/29 职场文书
四年级语文教学反思
2016/03/03 职场文书
Python机器学习之逻辑回归
2021/05/11 Python
Python实现生成bmp图像的方法
2021/06/13 Python