实例分析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 相关文章推荐
JavaScript中的对象化编程
Jan 16 Javascript
基于jQuery的投票系统显示结果插件
Aug 12 Javascript
两种方法实现文本框输入内容提示消失
Mar 17 Javascript
jquery动态增加text元素以及删除文本内容实例代码
Jul 01 Javascript
jquery ui bootstrap 实现自定义风格
Nov 14 Javascript
jQuery中:header选择器用法实例
Dec 29 Javascript
JavaScript检测弹出窗口是否已经关闭的方法
Mar 24 Javascript
javascript图片预加载实例分析
Jul 16 Javascript
基于jQuery对象和DOM对象和字符串之间的转化实例
Aug 08 jQuery
Angular 4中如何显示内容的CSS样式示例代码
Nov 06 Javascript
js实现购物车功能
Jun 12 Javascript
javascript实现左右缓动动画函数
Nov 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语法(4)
2006/10/09 PHP
php MYSQL 数据备份类
2009/06/19 PHP
php 短链接算法收集与分析
2011/12/30 PHP
调试PHP程序的多种方法介绍
2014/11/06 PHP
Zend Framework教程之Zend_Config_Ini用法分析
2016/03/23 PHP
php版微信小店调用api示例代码
2016/11/12 PHP
php制作基于xml的RSS订阅源功能示例
2017/02/08 PHP
Laravel框架中Blade模板的用法示例
2017/08/30 PHP
php数值计算num类简单操作示例
2020/05/15 PHP
锋利的jQuery 第三章章节总结的例子
2010/03/23 Javascript
JS面向对象编程之对象使用分析
2010/08/19 Javascript
JS操作数据库的实例代码
2013/10/17 Javascript
浅谈node.js中async异步编程
2015/10/22 Javascript
JavaScript+html5 canvas制作的百花齐放效果完整实例
2016/01/26 Javascript
JS触发服务器控件的单击事件(详解)
2016/08/06 Javascript
vue.js框架实现表单排序和分页效果
2017/08/09 Javascript
轻松学习JavaScript函数中的 Rest 参数
2019/05/30 Javascript
Vue中util的工具函数实例详解
2019/07/08 Javascript
Vue 使用计时器实现跑马灯效果的实例代码
2019/07/11 Javascript
vue的keep-alive用法技巧
2019/08/15 Javascript
微信小程序实现音频文件播放进度的实例代码
2020/03/02 Javascript
Python3 加密(hashlib和hmac)模块的实现
2017/11/23 Python
Python Opencv实现图像轮廓识别功能
2020/03/23 Python
浅谈python 中类属性共享的问题
2019/07/02 Python
pytorch 共享参数的示例
2019/08/17 Python
Python小程序之在图片上加入数字的代码
2019/11/26 Python
努比亚手机官网:nubia
2016/10/06 全球购物
Boden澳大利亚官网:英国在线服装公司
2018/08/05 全球购物
J2EE面试题集锦(附答案)
2013/08/16 面试题
自考毕业生自我鉴定
2013/11/04 职场文书
播音主持女孩的自我评价分享
2013/11/20 职场文书
幸福家庭事迹材料
2014/02/03 职场文书
企业办公室主任岗位职责
2014/02/19 职场文书
老人祝寿主持词
2014/03/28 职场文书
公务员个人年终总结
2015/02/12 职场文书
《玩出了名堂》教学反思
2016/02/17 职场文书