全面了解构造函数继承关键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 相关文章推荐
[原创]js与自动伸缩图片 自动缩小图片的多浏览器兼容的方法总结
Mar 12 Javascript
比较详细的关于javascript 解析json的代码
Dec 16 Javascript
js constructor的实际作用分析
Nov 15 Javascript
基于jQuery实现的图片切换焦点图整理
Dec 07 Javascript
javaScript中的原型解析【推荐】
May 05 Javascript
逻辑表达式中与或非的用法详解
Jun 06 Javascript
Bootstrap里的文件分别代表什么意思及其引用方法
May 01 Javascript
JS使用贪心算法解决找零问题示例
Nov 27 Javascript
Angular4学习笔记router的简单使用
Mar 30 Javascript
详解如何用typescript开发koa2的二三事
Nov 13 Javascript
Vee-validate 父组件获取子组件表单校验结果的实例代码
May 20 Javascript
jQuery实现动态向上滚动
Dec 21 jQuery
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
PHP字符串 ==比较运算符的副作用
2009/10/21 PHP
php获取post中的json数据的实现方法
2011/06/08 PHP
使用PHP遍历文件夹与子目录的函数代码
2011/09/26 PHP
ThinkPHP Where 条件中常用表达式示例(详解)
2017/03/31 PHP
一些mootools的学习资源
2010/02/07 Javascript
判断对象是否Window的实现代码
2012/01/10 Javascript
javascript面向对象快速入门实例
2015/01/13 Javascript
JS+CSS实现美化的下拉列表框效果
2015/08/11 Javascript
分享使用AngularJS创建应用的5个框架
2015/12/05 Javascript
JS 拼凑字符串的简单实例
2016/09/02 Javascript
js中作用域的实例解析
2017/03/16 Javascript
文本溢出插件jquery.dotdotdot.js使用方法详解
2017/06/22 jQuery
vue component组件使用方法详解
2017/07/14 Javascript
JS+WCF实现进度条实时监测数据加载量的方法详解
2017/12/19 Javascript
node(koa2) web应用模块介绍详解
2019/03/29 Javascript
一些手写JavaScript常用的函数汇总
2019/04/16 Javascript
vue 返回上一页,页面样式错乱的解决
2019/11/14 Javascript
微信小程序tabBar设置实例解析
2019/11/14 Javascript
[01:12]快闪回顾DOTA2亚洲邀请赛(DAC) 静候2018新征程开启
2018/03/11 DOTA
[04:59]DOTA2-DPC中国联赛 正赛 Ehome vs iG 选手采访
2021/03/11 DOTA
200行自定义python异步非阻塞Web框架
2017/03/15 Python
Python基于PyGraphics包实现图片截取功能的方法
2017/12/21 Python
Python中判断输入是否为数字的实现代码
2018/05/26 Python
Python图像处理之直线和曲线的拟合与绘制【curve_fit()应用】
2018/12/26 Python
django fernet fields字段加密实践详解
2019/08/12 Python
解决jupyter notebook 前面书写后面内容消失的问题
2020/04/13 Python
python同时遍历两个list用法说明
2020/05/02 Python
html5使用canvas绘制太阳系效果
2014/12/15 HTML / CSS
Melissa香港官网:MDreams
2016/07/01 全球购物
旅游管理毕业生自荐信
2013/11/05 职场文书
感恩父母的演讲稿
2014/05/06 职场文书
大学生毕业求职信
2014/06/12 职场文书
单位法人授权委托书范本
2014/10/09 职场文书
分析ZooKeeper分布式锁的实现
2021/06/30 Java/Android
关于CSS自定义属性与前端页面的主题切换问题
2022/03/21 HTML / CSS
Linux中文件的基本属性介绍
2022/06/01 Servers