全面了解构造函数继承关键apply call


Posted in Javascript onJuly 26, 2016

主要我是要解决一下几个问题:

 1.  apply和call的区别在哪里

 2.  apply的其他巧妙用法(一般在什么情况下可以使用apply)

我首先从网上查到关于apply和call的定义,然后用示例来解释这两个方法的意思和如何去用.

apply:方法能劫持另外一个对象的方法,继承另外一个对象的属性.

Function.apply(obj,args)方法能接收两个参数

obj:这个对象将代替Function类里this对象

args:这个是数组,它将作为参数传给Function(args-->arguments)

call:和apply的意思一样,只不过是参数列表不一样.

Function.call(obj,param1,param2,…,paramN)

obj:这个对象将代替Function类里this对象

params:这个是一个参数列表

apply示例:

<script type="text/javascript">
/*定义一个人类*/
function Person(name,age) {
  this.name=name; this.age=age;
}
 /*定义一个学生类*/
functionStudent(name,age,grade) {
  Person.apply(this,arguments); this.grade=grade;
}
//创建一个学生类
var student=new Student("qian",21,"一年级");
//测试
alert("name:"+student.name+"\n"+"age:"+student.age+"\n"+"grade:"+student.grade);
//大家可以看到测试结果name:qian age:21 grade:一年级
//学生类里面我没有给name和age属性赋值啊,为什么又存在这两个属性的值呢,这个就是apply的神奇之处.
</script>

分析: Person.apply(this,arguments);

this:在创建对象在这个时候代表的是student

arguments:是一个数组,也就是[“qian”,”21”,”一年级”];

也就是通俗一点讲就是:用student去执行Person这个类里面的内容,在Person这个类里面存在this.name等之类的语句,这样就将属性创建到了student对象里面

 call示例

在Studen函数里面可以将apply中修改成如下:

Person.call(this,name,age);

区别

在给对象参数的情况下,如果参数的形式是数组的时候,比如apply示例里面传递了参数arguments,这个参数是数组类型,并且在调用Person的时候参数的列表是对应一致的(也就是Person和Student的参数列表前两位是一致的) 就可以采用 apply , 如果我的Person的参数列表是这样的(age,name),而Student的参数列表是(name,age,grade),这样就可以用call来实现了,也就是直接指定参数列表对应值的位置(Person.call(this,age,name,grade));

apply的一些其他巧妙用法

细心的人可能已经察觉到,在我调用apply方法的时候,第一个参数是对象(this), 第二个参数是一个数组集合,

在调用Person的时候,他需要的不是一个数组,但是为什么他给我一个数组我仍然可以将数组解析为一个一个的参数,

这个就是apply的一个巧妙的用处,可以将一个数组默认的转换为一个参数列表([param1,param2,param3] 转换为 param1,param2,param3) 这个如果让我们用程序来实现将数组的每一个项,来装换为参数的列表,可能都得费一会功夫,借助apply的这点特性,所以就有了以下高效率的方法:

a)  Math.max 可以实现得到数组中最大的一项

因为Math.max 参数里面不支持Math.max([param1,param2]) 也就是数组

但是它支持Math.max(param1,param2,param3…),所以可以根据刚才apply的那个特点来解决 var max=Math.max.apply(null,array),这样轻易的可以得到一个数组中最大的一项

(apply会将一个数组装换为一个参数接一个参数的传递给方法)

这块在调用的时候第一个参数给了一个null,这个是因为没有对象去调用这个方法,我只需要用这个方法帮我运算,得到返回的结果就行,.所以直接传递了一个null过去

b)  Math.min  可以实现得到数组中最小的一项

同样和 max是一个思想

var min=Math.min.apply(null,array);

c)   Array.prototype.push 可以实现两个数组合并

同样push方法没有提供push一个数组,但是它提供了push(param1,param,…paramN) 所以同样也可以通过apply来装换一下这个数组,即:

vararr1=new Array("1","2","3");
 vararr2=new Array("4","5","6");
Array.prototype.push.apply(arr1,arr2);

也可以这样理解,arr1调用了push方法,参数是通过apply将数组装换为参数列表的集合.

以上就是小编为大家带来的全面了解构造函数继承关键apply call全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
Riot.js 快速的JavaScript单元测试框架
Nov 09 Javascript
jQuery图片预加载 等比缩放实现代码
Oct 04 Javascript
IE下写xml文件的两种方式(fso/saveAs)
Aug 05 Javascript
javascript陷阱 一不小心你就中招了(字符运算)
Nov 10 Javascript
javascript中attachEvent用法实例分析
May 14 Javascript
JavaScript实现Iterator模式实例分析
Jun 09 Javascript
js实现文本框支持加减运算的方法
Aug 19 Javascript
详解JavaScript函数
Dec 01 Javascript
JS+HTML5 FileReader对象用法示例
Apr 07 Javascript
Vue.js实现文章评论和回复评论功能
May 30 Javascript
express 项目分层实践详解
Dec 10 Javascript
layui监听单元格编辑前后交互的例子
Sep 16 Javascript
JS面试题---关于算法台阶的问题
Jul 26 #Javascript
对Js OOP编程 创建对象的一些全面理解
Jul 26 #Javascript
jQuery仿京东商城楼梯式导航定位菜单
Jul 25 #Javascript
又一枚精彩的弹幕效果jQuery实现
Jul 25 #Javascript
EasyUI加载完Html内容样式渲染完成后显示
Jul 25 #Javascript
前端微信支付js代码
Jul 25 #Javascript
javascript与jquery动态创建html元素示例
Jul 25 #Javascript
You might like
分页显示Oracle数据库记录的类之二
2006/10/09 PHP
PHP编程中八种常见的文件操作方式
2006/11/19 PHP
php使用多个进程同时控制文件读写示例
2014/02/28 PHP
javascript globalStorage类代码
2009/06/04 Javascript
关于flash遮盖div浮动层的解决方法
2010/07/17 Javascript
关于js日期转化为毫秒数“节省20%的效率和和节省9个字符“问题
2012/03/01 Javascript
jquery触发a标签跳转事件示例代码
2013/07/21 Javascript
Extjs改变树节点的勾选状态点击按钮将复选框去掉
2013/11/14 Javascript
基于jquery异步传输json数据格式实例代码
2013/11/23 Javascript
javascript写的异步加载js文件函数(支持数组传参)
2014/06/07 Javascript
浅析AngularJS中的生命周期和延迟处理
2015/06/18 Javascript
Js制作点击输入框时默认文字消失的效果
2015/09/05 Javascript
安装使用Mongoose配合Node.js操作MongoDB的基础教程
2016/03/01 Javascript
深入理解js中this的用法
2016/05/28 Javascript
JavaScript兼容性总结之获取非行间样式案例
2016/08/07 Javascript
ES6深入理解之“let”能替代”var“吗?
2017/06/28 Javascript
JavaScript中创建原子的方法总结
2018/08/26 Javascript
Javascript执行流程细节原理解析
2020/05/14 Javascript
关于JavaScript数组去重的一些理解汇总
2020/09/10 Javascript
js调用网络摄像头的方法
2020/12/05 Javascript
JavaScript实现滑块验证解锁
2021/01/07 Javascript
Python实现的单向循环链表功能示例
2017/11/10 Python
python监控文件并且发送告警邮件
2018/06/21 Python
Python实用库 PrettyTable 学习笔记
2019/08/06 Python
Html5移动端div固定到底部实现底部导航条的几种方式
2021/03/09 HTML / CSS
用C语言实现文件读写操作
2013/10/27 面试题
单位在职证明范本
2014/01/09 职场文书
职工运动会邀请函
2014/01/19 职场文书
《商鞅南门立木》教学反思
2014/02/16 职场文书
电子银行营销方案
2014/02/22 职场文书
销售类求职信
2014/06/13 职场文书
银行求职自荐书
2014/06/25 职场文书
中国梦演讲稿5分钟
2014/08/19 职场文书
银行求职信模板
2015/03/20 职场文书
2015年教研室工作总结范文
2015/05/23 职场文书
springcloud之Feign超时问题的解决
2021/06/24 Java/Android