全面了解构造函数继承关键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 相关文章推荐
jQuery获取字符串中出现最多的数
Feb 22 Javascript
Three.js学习之几何形状
Aug 01 Javascript
javascript淘宝主图放大镜功能
Oct 20 Javascript
js模糊查询实例分享
Dec 26 Javascript
JS表单验证方法实例小结【电话、身份证号、Email、中文、特殊字符、身份证号等】
Feb 14 Javascript
js实现拖拽上传图片功能
Aug 01 Javascript
JavaScript监听手机物理返回键的两种解决方法
Aug 14 Javascript
vue2.0使用swiper组件实现轮播效果
Nov 27 Javascript
swiper 解决动态加载数据滑动失效的问题
Feb 26 Javascript
JavaScript数组,JSON对象实现动态添加、修改、删除功能示例
May 26 Javascript
layui自定义插件citySelect实现省市区三级联动选择
Jul 26 Javascript
vue中配置scss全局变量的步骤
Dec 28 Vue.js
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+mysql保存和输出文件
2006/10/09 PHP
收集的二十一个实用便利的PHP函数代码
2010/04/22 PHP
2个比较经典的PHP加密解密函数分享
2014/07/01 PHP
CentOS安装php v8js教程
2015/02/26 PHP
Zend Framework常用校验器详解
2016/12/09 PHP
php框架CI(codeigniter)自动加载与自主创建对象操作实例分析
2020/06/06 PHP
动态加载js的几种方法
2006/10/23 Javascript
利用JS解决ie6不支持max-width,max-height问题的方法
2014/01/02 Javascript
javascript函数作用域学习示例(js作用域)
2014/01/13 Javascript
javascript对中文按照拼音排序代码
2014/08/20 Javascript
Javascript 拖拽雏形中的一些问题(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
javascript实现table选中的行以指定颜色高亮显示的方法
2015/05/13 Javascript
jquery遍历函数siblings()用法实例
2015/12/24 Javascript
微信小程序 UI布局常用技巧整理总结
2016/12/05 Javascript
jquery仿ps颜色拾取功能
2017/03/08 Javascript
Iscrool下拉刷新功能实现方法(推荐)
2017/06/26 Javascript
Express系列之multer上传的使用
2017/10/27 Javascript
Chart.js 轻量级HTML5图表绘制工具库(知识整理)
2018/05/22 Javascript
JS数组求和的常用方法总结【5种方法】
2019/01/14 Javascript
Vue父组件如何获取子组件中的变量
2019/07/24 Javascript
Vue-drag-resize 拖拽缩放插件的使用(简单示例)
2019/12/04 Javascript
JQuery复选框全选效果如何实现
2020/05/08 jQuery
微信小程序连续签到7天积分获得功能的示例代码
2020/08/20 Javascript
通过滑动翻页效果实现和移动端click事件问题
2021/01/26 Javascript
Python中的字典与成员运算符初步探究
2015/10/13 Python
使用python画个小猪佩奇的示例代码
2018/06/06 Python
python获取时间及时间格式转换问题实例代码详解
2018/12/06 Python
pyqt5实现俄罗斯方块游戏
2019/01/11 Python
Python饼状图的绘制实例
2019/01/15 Python
Python调用jar包方法实现过程解析
2020/08/11 Python
HTML5等待加载动画效果
2017/07/27 HTML / CSS
德国原装品牌香水、化妆品和手表网站:BRASTY.DE
2016/10/16 全球购物
3D空间设计学生找工作的自我评价
2013/10/28 职场文书
企业厂长岗位职责
2013/12/17 职场文书
一文搞懂MySQL索引页结构
2022/02/28 MySQL
SpringBoot2零基础到精通之异常处理与web原生组件注入
2022/03/22 Java/Android