全面了解构造函数继承关键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对象与JSON格式数据相互转换
Feb 20 Javascript
jquery实现select选中行、列合计示例
Apr 25 Javascript
JS扩展方法实例分析
Apr 15 Javascript
EasyUI中在表单提交之前进行验证
Jul 19 Javascript
Vue-Router实现页面正在加载特效方法示例
Feb 12 Javascript
vue.js实现条件渲染的实例代码
Jun 22 Javascript
jQuery选择器_动力节点Java学院整理
Jul 05 jQuery
ReactJS实现表单的单选多选和反选的示例
Oct 13 Javascript
angular2 组件之间通过service互相传递的实例
Sep 30 Javascript
Vue如何提升首屏加载速度实例解析
Jun 25 Javascript
解决vue net :ERR_CONNECTION_REFUSED报错问题
Aug 13 Javascript
微信小程序基于高德地图API实现天气组件(动态效果)
Oct 22 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
php中使用exec,system等函数调用系统命令的方法(不建议使用,可导致安全问题)
2012/09/07 PHP
分享微信扫码支付开发遇到问题及解决方案-附Ecshop微信支付插件
2015/08/23 PHP
利用php + Laravel如何实现部署自动化详解
2017/10/11 PHP
PHP检查端口是否可以被绑定的方法示例
2018/08/09 PHP
12款经典的白富美型—jquery图片轮播插件—前端开发必备
2013/01/08 Javascript
javascript之典型高阶函数应用介绍二
2013/01/10 Javascript
js获取php变量的实现代码
2013/08/10 Javascript
提高jQuery性能的十个诀窍
2013/11/14 Javascript
js+css实现tab菜单切换效果的方法
2015/01/20 Javascript
基于javascript实现右下角浮动广告效果
2016/01/08 Javascript
详解如何较好的使用js
2016/12/16 Javascript
javascript工厂模式和构造函数模式创建对象方法解析
2016/12/30 Javascript
基于jQuery实现数字滚动效果
2017/01/16 Javascript
判断滚动条滑到底部触发事件(实例讲解)
2017/11/15 Javascript
通过fastclick源码分析彻底解决tap“点透”
2017/12/24 Javascript
javascript中floor使用方法总结
2019/02/02 Javascript
浅谈vue.use()方法从源码到使用
2019/05/12 Javascript
微信小程序 checkbox使用实例解析
2019/09/09 Javascript
Elasticsearch实现复合查询高亮结果功能
2019/09/10 Javascript
[05:49]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS 选手采访
2021/03/11 DOTA
基于wxpython开发的简单gui计算器实例
2015/05/30 Python
Python实现Youku视频批量下载功能
2017/03/14 Python
python实现二维数组的对角线遍历
2019/03/02 Python
PyCharm导入python项目并配置虚拟环境的教程详解
2019/10/13 Python
使用Pyhton集合set()实现成果查漏的例子
2019/11/24 Python
Python Selenium实现无可视化界面过程解析
2020/08/25 Python
Python中免验证跳转到内容页的实例代码
2020/10/23 Python
基于canvas使用贝塞尔曲线平滑拟合折线段的方法
2018/01/10 HTML / CSS
BONIA波尼亚新加坡官网:皮革手袋,鞋类和配件
2016/08/25 全球购物
美国新兴城市生活方式零售商:VILLA
2017/12/06 全球购物
2015年银行员工工作总结
2015/04/24 职场文书
业务员管理制度范本
2015/08/06 职场文书
HTML速写之Emmet语法规则的实现
2021/04/07 HTML / CSS
详解TypeScript的基础类型
2022/02/18 Javascript
详解Spring Bean的配置方式与实例化
2022/06/10 Java/Android
nginx七层负载均衡配置详解
2022/07/15 Servers