关于call和apply函数的区别及用法
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了关于call和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 xmlns="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>
以上是关于关于call和apply函数的区别及用法的主要内容，如果未能解决你的问题，请参考以下文章