欢迎使用CSDN-markdown编辑器

来源：互联网发布：淘宝客qq机器人发单员编辑：程序博客网时间：2024/06/08 03:42

Js apply()使用详解

    <div class="article_manage clearfix">    <div class="article_l">        <span class="link_categories">        标签：          <a href="http://www.csdn.net/tag/function" target="_blank" onclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_tag']);">function</a><a href="http://www.csdn.net/tag/null" target="_blank" onclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_tag']);">null</a><a href="http://www.csdn.net/tag/javascript" target="_blank" onclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_tag']);">javascript</a><a href="http://www.csdn.net/tag/%e7%bc%96%e7%a8%8b" target="_blank" onclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_tag']);">编程</a><a href="http://www.csdn.net/tag/%e6%b5%8b%e8%af%95" target="_blank" onclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_tag']);">测试</a><a href="http://www.csdn.net/tag/c" target="_blank" onclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_tag']);">c</a>        </span>    </div>    <div class="article_r">        <span class="link_postdate">2012-09-20 16:16</span>        <span class="link_view" title="阅读次数">49364人阅读</span>        <span class="link_comments" title="评论次数"> <a href="#comments" onclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_pinglun'])">评论</a>(14)</span>        <span class="link_collect tracking-ad" data-mod="popu_171"> <a href="javascript:void(0);" onclick="javascript:collectArticle('Js+apply()%e4%bd%bf%e7%94%a8%e8%af%a6%e8%a7%a3','8000676');return false;" title="收藏" target="_blank">收藏</a></span>         <span class="link_report"> <a href="#report" onclick="javascript:report(8000676,2);return false;" title="举报">举报</a></span>    </div></div><div class="embody" style="display:none" id="embody">    <span class="embody_t">本文章已收录于：</span>    <div class="embody_c" id="lib" value="{&quot;err&quot;:0,&quot;msg&quot;:&quot;ok&quot;,&quot;data&quot;:[]}"></div></div><style type="text/css">                .embody{            padding:10px 10px 10px;            margin:0 -20px;            border-bottom:solid 1px #ededed;                        }        .embody_b{            margin:0 ;            padding:10px 0;        }        .embody .embody_t,.embody .embody_c{            display: inline-block;            margin-right:10px;        }        .embody_t{            font-size: 12px;            color:#999;        }        .embody_c{            font-size: 12px;        }        .embody_c img,.embody_c em{            display: inline-block;            vertical-align: middle;                       }         .embody_c img{                           width:30px;            height:30px;        }        .embody_c em{            margin: 0 20px 0 10px;            color:#333;            font-style: normal;        }</style><script type="text/javascript">    $(function () {        try        {            var lib = eval("("+$("#lib").attr("value")+")");            var html = "";            if (lib.err == 0) {                $.each(lib.data, function (i) {                    var obj = lib.data[i];                    //html += '<img src="' + obj.logo + '"/>' + obj.name + "&nbsp;&nbsp;";                    html += ' <a href="' + obj.url + '" target="_blank">';                    html += ' <img src="' + obj.logo + '">';                    html += ' <em><b>' + obj.name + '</b></em>';                    html += ' </a>';                });                if (html != "") {                    setTimeout(function () {                        $("#lib").html(html);                                              $("#embody").show();                    }, 100);                }            }              } catch (err)        { }    });</script>  <div class="category clearfix">    <div class="category_l">       <img src="http://static.blog.csdn.net/images/category_icon.jpg">        <span>分类：</span>    </div>    <div class="category_r">                <label onclick="GetCategoryArticles('1226052','business122','top','8000676');">                    <span onclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_fenlei']);">JS<em>（66）</em></span>                  <img class="arrow-down" src="http://static.blog.csdn.net/images/arrow_triangle _down.jpg" style="display:inline;">                  <img class="arrow-up" src="http://static.blog.csdn.net/images/arrow_triangle_up.jpg" style="display:none;">                    <div class="subItem">                        <div class="subItem_t"><a href="http://blog.csdn.net/business122/article/category/1226052" target="_blank">作者同类文章</a><i class="J_close">X</i></div>                        <ul class="subItem_l" id="top_1226052">                                                    </ul>                    </div>                </label>                        </div></div>

[javascript] view plain copy

print?

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(“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对象里面
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 非常的不懂,最后多看了几遍,自己多敲了几遍代码,才明白了中间的道理,所以,不管做什么事情,只要自己肯动脑子,肯动手敲代码,这样一个技术就会掌握…
还有比如第四部分得内容,巧妙的解决了实实在在存在的问题,这个肯定不是一个初学者能想到的解决方案(这个也不是我自己想的),没有对编程有一定认识的不会想到这个的,还是一句话,多积累,多学习,提升自己的能力和对编程思想的理解能力才是最关键!

Js apply方法详解我在一开始看到javascript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文章对apply方法和call的一些示例,总算是看的有点眉目了,在这里我做如下笔记,希望和大家分享..  如有什么不对的或者说法不明确的地方希望读者多多提一些意见,以便共同提高..主要我是要解决一下几个问题:1.apply和call的区别在哪里2.什么情况下用apply,什么情况下用call3.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("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:在创建对象在这个时候代表的是studentarguments:是一个数组,也就是[“qian”,”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 非常的不懂,最后多看了几遍,自己多敲了几遍代码,才明白了中间的道理,所以,不管做什么事情,只要自己肯动脑子,肯动手敲代码,这样一个技术就会掌握…   还有比如第四部分得内容,巧妙的解决了实实在在存在的问题,这个肯定不是一个初学者能想到的解决方案(这个也不是我自己想的),没有对编程有一定认识的不会想到这个的,还是一句话,多积累,多学习,提升自己的能力和对编程思想的理解能力才是最关键!

document.getElementById("bdshell_js").src = "http://bdimg.share.baidu.com/static/js/shell_v2.js?cdnversion=" + Math.ceil(new Date()/3600000)

    <div id="digg" articleid="8000676">        <dl id="btnDigg" class="digg digg_enable" onclick="btndigga();">             <dt>顶</dt>            <dd>12</dd>        </dl>        <dl id="btnBury" class="digg digg_enable" onclick="btnburya();">              <dt>踩</dt>            <dd>2</dd>                       </dl>    </div> <div class="tracking-ad" data-mod="popu_222"><a href="javascript:void(0);" target="_blank">&nbsp;</a>   </div><div class="tracking-ad" data-mod="popu_223"> <a href="javascript:void(0);" target="_blank">&nbsp;</a></div><script type="text/javascript">            function btndigga() {                $(".tracking-ad[data-mod='popu_222'] a").click();            }            function btnburya() {                $(".tracking-ad[data-mod='popu_223'] a").click();            }        </script>

上一篇用 Function.apply() 的参数数组化来提高 JavaScript程序性能
下一篇JS中的instanceof和typeof

<div style="clear:both; height:10px;"></div>        <div class="similar_article">                <h4></h4>                <div class="similar_c" style="margin:20px 0px 0px 0px">                    <div class="similar_c_t">                      &nbsp;&nbsp;相关文章推荐                    </div>                    <div class="similar_wrap tracking-ad" data-mod="popu_36" style="max-height:195px;">                                               <ul class="similar_list fl">                                   <li>                                   <em>•</em>                                   <a href="http://blog.csdn.net/u013078295/article/details/59483338" title="Js apply() 与call() 使用详解" strategy="" target="_blank" style="width: 290px;">Js apply() 与call() 使用详解</a>                               </li>                               <li>                                   <em>•</em>                                   <a href="http://blog.csdn.net/soapcoder92/article/details/50716796" title="Js apply()使用详解" strategy="" target="_blank" style="width: 290px;">Js apply()使用详解</a>                               </li>                               <li>                                   <em>•</em>                                   <a href="http://blog.csdn.net/Bazingaea/article/details/52194837" title="Js中apply()与call()使用详解" strategy="" target="_blank" style="width: 290px;">Js中apply()与call()使用详解</a>                               </li>                               <li>                                   <em>•</em>                                   <a href="http://blog.csdn.net/swqwer/article/details/43487681" title="Js apply方法详解" strategy="" target="_blank" style="width: 290px;">Js apply方法详解</a>                               </li>                               <li>                                   <em>•</em>                                   <a href="http://blog.csdn.net/leiyong0326/article/details/46004957" title="Js apply()使用详解" strategy="" target="_blank" style="width: 290px;">Js apply()使用详解</a>                               </li>                        </ul>                          <ul class="similar_list fr">                                     <li>                                   <em>•</em>                                   <a href="http://blog.csdn.net/njcgosling/article/details/45482989" title="Js apply()使用详解_转自网络" strategy="" target="_blank" style="width: 290px;">Js apply()使用详解_转自网络</a>                               </li>                               <li>                                   <em>•</em>                                   <a href="http://blog.csdn.net/Gavid0124/article/details/45033541" title="Js apply()、call()使用详解" strategy="" target="_blank" style="width: 290px;">Js apply()、call()使用详解</a>                               </li>                               <li>                                   <em>•</em>                                   <a href="http://blog.csdn.net/Endy_Jun/article/details/72844573" title="Js apply()和call()使用详解" strategy="" target="_blank" style="width: 290px;">Js apply()和call()使用详解</a>                               </li>                               <li>                                   <em>•</em>                                   <a href="http://blog.csdn.net/ITX2000/article/details/47858529" title="Js apply()使用详解" strategy="" target="_blank" style="width: 290px;">Js apply()使用详解</a>                               </li>                        </ul>                    </div>                </div>            </div>

阅读全文

0 0