Js apply方法具体解释
我在一開始看到javascript的函数apply和call时,很的模糊,看也看不懂,近期在网上看到一些文章对apply方法和call的一些演示样例,总算是看的有点眉目了,在这里我做例如以下笔记,希望和大家分享.. 如有什么不正确的或者说法不明白的地方希望读者多多提一些意见,以便共同提高..
主要我是要解决一下几个问题:
1. apply和call的差别在哪里
2. 什么情况下用apply,什么情况下用call
3. 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:这个是一个參数列表
1. 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("zhangsan",21,"一年级");
//測试
alert("name:"+student.name+"\n"+"age:"+student.age+"\n"+"grade:"+student.grade);
//大家能够看到測试结果name:zhangsan age:21 grade:一年级
//学生类里面我没有给name和age属性赋值啊,为什么又存在这两个属性的值呢,这个就是apply的奇妙之处.
</script>
分析: Person.apply(this,arguments);
this:在创建对象在这个时候代表的是student
arguments:是一个数组,也就是[“zhangsan”,”21”,”一年级”];
也就是通俗一点讲就是:用student去运行Person这个类里面的内容,在Person这个类里面存在this.name等之类的语句,这样就将属性创建到了student对象里面
2. call演示样例
在Studen函数里面能够将apply中改动成例如以下:
Person.call(this,name,age);
这样就ok了
3. 什么情况下用apply,什么情况下用call
在给对象參数的情况下,假设參数的形式是数组的时候,比方apply演示样例里面传递了參数arguments,这个參数是数组类型,而且在调用Person的时候參数的列表是相应一致的(也就是Person和Student的參数列表前两位是一致的) 就能够採用 apply , 假设我的Person的參数列表是这种(age,name),而Student的參数列表是(name,age,grade),这样就能够用call来实现了,也就是直接指定參数列表相应值的位置(Person.call(this,age,name,grade));
4. 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类似Math.min等之类的特殊使用方法:
一般在目标函数仅仅须要n个參数列表,而不接收一个数组的形式([param1[,param2[,…[,paramN]]]]),能够通过apply的方式巧妙地解决问题!
5. 总结:
一開始我对apply 很的不懂,最后多看了几遍,自己多敲了几遍代码,才明确了中间的道理,所以,无论做什么事情,仅仅要自己肯动脑子,肯动手写程序,这样一个技术就会掌握…
还有比方第四部分得内容,巧妙的攻克了实实在在存在的问题,这个肯定不是一个刚開始学习的人能想到的解决方式(这个也不是我自己想的),没有对编程有一定认识的不会想到这个的,还是一句话,多积累,多学习,提升自己的能力和对编程思想的理解能力才是最关键!
当中有大部分内容參考自:
http://www.cnblogs.com/xiaohongwu/archive/2011/06/15/2081237.html
中间是我对其的一些具体理解…
我也是一个js新生,假设博文哪里写的不是有问题或这不完好的地方,希望前辈们多多不吝赐教,谢谢
Js apply 方法 具体解释的更多相关文章
-
Js apply 方法 详解
Js apply方法详解 我在一开始看到JavaScript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文章对apply方法和call的一些示例,总算是看的有点眉目了,在这 ...
-
Js apply方法详解,及其apply()方法的妙用
Js apply方法详解 我在一开始看到javascript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文章对apply方法和call的一些示例,总算是看的有点眉目了,在这 ...
-
Js apply方法与call方法详解 附ES6新写法
我在一开始看到javascript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文章对apply方法和call的一些示例,总算是看的有点眉目了,在这里我做如下笔记,希望和大家 ...
-
Js apply方法详解
我在一开始看到javascript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文章对apply方法和call的一些示例,总算是看的有点眉目了,在这里我做如下笔记,希望和大家 ...
-
[荐]Js apply()和call()方法详解 - http://www.w3cfuns.com/article-5596443-1-1.html
本帖最后由 默默DE人生 于 2013-3-19 13:22 编辑 Js apply方法详解我在一开始看到javascript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文 ...
-
Js apply call方法详解
Js apply方法详解 我在一开始看到javascript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文章对apply方法和call的一些示例,总算是看的有点眉目了,在这 ...
-
Js apply() call()使用详解
Js apply方法详解我在一开始看到javascript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文章对apply方法和call的一些示例,总算是看的有点眉目了,在这里 ...
-
Js apply()使用详解
Js apply方法详解 我在一开始看到javascript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文章对apply方法和call的一些示例,总算是看的有点眉目了,在这 ...
-
js巧用apply方法实现数组最值以及合并
尽管js的apply方法在平常的使用中并不多见,但是在某些地方使用的还是很有帮助性的,这里就和大家说两个比较实用的例子:1.数组最大最小值 求数组中的最大最小值,js有相应的方法:Math.min() ...
随机推荐
-
RedHat7搭建Nginx+Apache+PHP
Nginx做为前端服务器(本机IP:192.168.136.104),将访问PHP页面的动态请求转发给Apache服务器(只监听本地回环地址172.0.0.1:80) 安装Apache# yum -y ...
-
移除list中null元素
查询结果为null, list.size()却是1 移除该null元素 totalList.removeAll(Collections.singleton(null));
-
linux系统上面使用tab补全命令
tab的模块脚本 [root@centos7 ~]# cat tab.py #!/usr/bin/python3.6 # python startup file import sys import r ...
-
jsPatch.qq.com呵呵
jsPach.qq.comhtml, body {overflow-x: initial !important;}html { font-size: 14px; } body { margin: 0p ...
-
Java如何暂停线程一段时间?
在Java编程中,如何暂停线程一段时间? 以下示例显示如何通过创建sleepThread()方法来暂停线程一段时间. package com.yiibai; public class Suspendi ...
-
Nginx设置网站维护页面
网站升级需要停服,可以在Nginx设置静态页面设置强制跳转 修改nginx配置文件nginx.conf http { sendfile on; keepalive_timeout 65; server ...
-
MVC 使用Quartz.Net组件实现定时计划任务
最近,项目中需要执行一个计划任务,组长就让我了解一下Quartz.net 这个组件,挺简单的一个组件,实现起来特别的方便,灵活,值得推荐给大家一起学习一下这个小工具.以前我有的时候是使用定时器Time ...
-
Vue学习笔记之Babel介绍
这个是解析我们es6的代码的,为什么要用它呢,因为对于一些ie浏览器,甚至FF浏览器,低版本的还不能识别我们的es6代码,那么vue里面好多还让我们去写es6的代码,这个时候我们就可以用babel这个 ...
-
iOS界面设计,12个优秀案例激发你的灵感
总所周知,iOS和Android是当今两大移动平台,前者采用Human Interface Design,后者采用Material Design.作为设计师,尤其是App设计师,总是会在这两者进行设计 ...
-
[APIO2007]风铃 --- 贪心
[APIO2007]风铃 题目描述 你准备给弟弟 Ike 买一件礼物,但是,Ike 挑选礼物的方式很特别:他只喜欢那些能被他排成有序形状的东西. 你准备给 Ike 买一个风铃.风铃是一种多层的装饰品, ...