你的位置:首页 > Java教程

[Java教程]Function.prototype.call 和 Function.prototype.apply 的区别


 call和apply函数是function函数的基本属性,都可以用于更改函数对象和传递参数,是前端工程师常用的函数。具体使用方法请参考以下案列:

 例如:

   申明函数: var fn = function (msg, isalert) { if (isalert) alert(this + msg); };

   用法:

    call: fn.call(/*context,arg1,arg2,...*/);

    apply:fn.call(/*context,[arg1,arg2,...]*/);

   讲述:第一个参数(context)将成为 fn 函数的 this 对象,参数 arg1 对应fn函数的参数 msg,参数 arg2 对应fn函数的参数 isalert;

   注:apply函数的第二个参数是数组!!!

   模型:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html ="http://www.w3.org/1999/xhtml"><head>  <title>call和apply函数</title>  <style type="text/css">    *{float:left;width:100%;margin-left:20px;}    *{max-height:100%;max-width:100%}    *,:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-ms-box-sizing:border-box;-o-box-sizing:border-box}    html{font-size:10px;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}    body{margin:0 auto;width:80%;background-color:#fff;color:#333;font-size:10pt;font-family:"Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;line-height:1.42857143}    div{margin:0;}    span{font-size:16px;font-weight:600;margin-top:10px;}    code{line-height:30px;padding:5px;margin:10px 20px;border:1px solid #fcc;}    .button    {      font-size: 16px;      font-weight: 300;      line-height: 32px;      display: inline-block;      width:auto;      height: 32px;      padding: 0 20px;      -webkit-transition: .3s all;        -moz-transition: .3s all;        -ms-transition: .3s all;         -o-transition: .3s all;          transition: .3s all;      text-align: center;      text-decoration: none;      color: #fff;      border: none;      border-radius: 4px;      appearance: none;      -webkit-box-orient: vertical;    }    .button:hover,    .button:focus,    .button:active,    {      -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);        -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);          box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);      text-shadow: 0 1px 0 rgba(255, 255, 255, .3);        -ms-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);         -o-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);    }    .button:hover    {      text-decoration: none;      color: #fff;      outline: none;    }    .button:focus    {      color: #fee;    }    .button:visited    {      color: #fff;    }    .button:active    {      text-decoration: none;      color: #fff;    }        .button.gold    {      border-color: #feae1b;      background-color: #feae1b;    }    .button.gold:hover,    .button.gold:focus    {      border-color: #fec04e;      background-color: #fec04e;    }    .button.gold:active    {      color: #e59501;      border-color: #f3ab26;      background-color: #f3ab26;    }  </style>  <script type="text/javascript">    var fn = function (msg, isalert) {      if (isalert) alert(this + msg);    };    function call() {      fn.call("我是:", "工具包(cntooltik)", true);    }    function apply() {      fn.apply("我是:", ["工具包(cntooltik)", true]);    }  </script></head><body>  <span>申明函数:</span>  <div>    <code>       var fn = function (msg, isalert) {        if (isalert) alert(this + msg);      };    </code>  </div>  <span>函数调用:</span>  <div>    <code>      function call() {        fn.call("我是:", "工具包(cntooltik)", true);      }    </code>  </div>  <button class="button gold" onclick="javascript:call()">call函数测试</button>  <div>    <code>      function apply() {        fn.apply("我是:", ["工具包(cntooltik)", true]);      }    </code>  </div>  <button class="button gold" onclick="javascript:apply()">apply函数测试</button></body></html>

View Code