js继承call()和apply()方法总结


Posted in Javascript onDecember 08, 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全部源代码
May 04 Javascript
javascript 用记忆函数快速计算递归函数
Mar 15 Javascript
非主流的textarea自增长实现js代码
Dec 20 Javascript
jquery中的on方法使用介绍
Dec 29 Javascript
快速解决jquery.touchSwipe左右滑动和垂直滚动条冲突
Apr 15 Javascript
JS自定义混合Mixin函数示例
Nov 26 Javascript
微信小程序出现wx.navigateTo页面不跳转问题的解决方法
Dec 26 Javascript
JS实现中英文混合文字溢出友好截取功能
Aug 06 Javascript
使用jquery模拟a标签的click事件无法实现跳转的解决
Dec 04 jQuery
通过图带你深入了解vue的响应式原理
Jun 21 Javascript
JavaScript变量Dom对象的所有属性
Apr 30 Javascript
Javascript新手入门之字符串拼接与变量的应用
Dec 03 Javascript
ANGULARJS中用NG-BIND指令实现单向绑定的例子
Dec 08 #Javascript
详解Javascript动态操作CSS
Dec 08 #Javascript
jquery.ajax之beforeSend方法使用介绍
Dec 08 #Javascript
实例讲解JQuery中this和$(this)区别
Dec 08 #Javascript
Jquery实现由下向上展开效果的例子
Dec 08 #Javascript
Javascript常用字符串判断函数代码分享
Dec 08 #Javascript
jQuery/CSS3图片特效插件整理推荐
Dec 07 #Javascript
You might like
世界上第一台立体声收音机
2021/03/01 无线电
php 字符串压缩方法比较示例
2014/01/23 PHP
php+xml实现在线英文词典查询的方法
2015/01/23 PHP
php数据访问之增删改查操作
2016/05/09 PHP
利用laravel搭建一个迷你博客实战教程
2017/08/13 PHP
php微信公众号开发之现金红包
2018/04/16 PHP
JS定时关闭窗口的实例
2013/05/22 Javascript
快速掌握WordPress中加载JavaScript脚本的方法
2015/12/17 Javascript
Web前端开发工具——bower依赖包管理工具
2016/03/29 Javascript
学习Javascript闭包(Closure)知识
2016/08/07 Javascript
详解从Node.js的child_process模块来学习父子进程之间的通信
2017/03/27 Javascript
详解angularjs利用ui-route异步加载组件
2017/05/21 Javascript
使用vue实现grid-layout功能实例代码
2018/01/05 Javascript
Vue页面切换和a链接的本质区别详解
2019/11/12 Javascript
JS中的继承操作实例总结
2020/06/06 Javascript
three.js着色器材质的内置变量示例详解
2020/08/16 Javascript
搭建vscode+vue环境的详细教程
2020/08/31 Javascript
vue将文件/图片批量打包下载zip的教程
2020/10/21 Javascript
[02:20]DOTA2英雄基础教程 黑暗贤者
2013/12/19 DOTA
python导出hive数据表的schema实例代码
2018/01/22 Python
元组列表字典(莫烦python基础)
2019/04/03 Python
python 批量解压压缩文件的实例代码
2019/06/27 Python
python实现PID算法及测试的例子
2019/08/08 Python
pip install python 快速安装模块的教程图解
2019/10/08 Python
python爬虫之遍历单个域名
2019/11/20 Python
Python基础之变量基本用法与进阶详解
2020/01/03 Python
Python实现加密接口测试方法步骤详解
2020/06/05 Python
JAVA及PYTHON质数计算代码对比解析
2020/06/10 Python
浅析Python 序列化与反序列化
2020/08/05 Python
一款超酷的js+css3实现的3D标签云特效兼容ie7/8/9
2013/11/18 HTML / CSS
利用纯CSS3实现tab选项卡切换示例代码
2016/09/21 HTML / CSS
说说在weblogic中开发消息Bean时的persistent与non-persisten的差别
2013/04/07 面试题
2015年教务工作总结
2015/05/23 职场文书
幼儿园科学课教学反思
2016/03/03 职场文书
Elasticsearch Recovery 详细介绍
2022/04/19 Java/Android
JavaScript中reduce()的用法
2022/05/11 Javascript