实例分析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 问答知识整理
Feb 11 Javascript
javascript 判断数组是否已包含了某个元素的函数
May 30 Javascript
jquery创建一个新的节点对象(自定义结构/内容)的好方法
Jan 21 Javascript
javascript里绝对用的上的字符分割函数总结
Jul 31 Javascript
在JavaScript中处理字符串之link()方法的使用
Jun 08 Javascript
js实现的彩色方块飞舞奇幻效果
Jan 27 Javascript
解决低版本的浏览器不支持es6的import问题
Mar 09 Javascript
原生javascript实现连连看游戏
Jan 03 Javascript
vue组件化中slot的基本使用方法
May 01 Javascript
微信小程序事件对象中e.target和e.currentTarget的区别详解
May 08 Javascript
js实现带有动画的返回顶部
Aug 09 Javascript
js实现头像上传并且可预览提交
Dec 25 Javascript
深入理解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+MySQL5.0中文乱码解决方法
2006/11/20 PHP
关于使用coreseek并为其做分页的介绍
2013/06/21 PHP
phpmyadmin打开很慢的解决方法
2014/04/21 PHP
PHP中变量引用与变量销毁机制分析
2014/11/15 PHP
php实现按指定大小等比缩放生成上传图片缩略图的方法
2014/12/15 PHP
php将字符串全部转换成大写或者小写的方法
2015/03/17 PHP
学习thinkphp5.0验证类使用方法
2017/11/16 PHP
linux mint下安装phpstorm2020包括JDK部分的教程详解
2020/09/17 PHP
JavaScript Array扩展实现代码
2009/10/14 Javascript
基于jQuery的日期选择控件
2009/10/27 Javascript
监控 url fragment变化的js代码
2010/04/19 Javascript
使用jQuery实现dropdownlist的联动效果(sharepoint 2007)
2011/03/30 Javascript
深入理解JavaScript系列(26):设计模式之构造函数模式详解
2015/03/03 Javascript
js带缩略图的图片轮播效果代码分享
2015/09/14 Javascript
$.browser.msie 为空或不是对象问题的多种解决方法
2017/03/19 Javascript
详解angularJS动态生成的页面中ng-click无效解决办法
2017/06/19 Javascript
vue源码入口文件分析(推荐)
2018/01/30 Javascript
Node.js搭建WEB服务器的示例代码
2018/08/15 Javascript
一篇文章带你浅入webpack的DLL优化打包
2020/02/20 Javascript
python的dict,set,list,tuple应用详解
2014/07/24 Python
python读写ini配置文件方法实例分析
2015/06/30 Python
tensorflow实现简单的卷积神经网络
2018/05/24 Python
Python定义二叉树及4种遍历方法实例详解
2018/07/05 Python
python pandas消除空值和空格以及 Nan数据替换方法
2018/10/30 Python
python爬虫添加请求头代码实例
2019/12/28 Python
python打开文件的方式有哪些
2020/06/29 Python
详解如何修改jupyter notebook的默认目录和默认浏览器
2021/01/24 Python
美国学校用品、教室和教学商店:Discount School Supply
2018/04/04 全球购物
马来西亚网上花店:FlowerAdvisor马来西亚
2020/01/03 全球购物
机电一体化大学生求职信
2013/11/08 职场文书
学校就业推荐信范文
2014/05/19 职场文书
琅琊山导游词
2015/02/05 职场文书
幼儿园教师工作总结2015
2015/04/02 职场文书
成绩单家长意见
2015/06/03 职场文书
2016高三毕业赠言寄语
2015/12/04 职场文书
2016年度继续教育学习心得体会
2016/01/19 职场文书