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 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>
View Code

 

posted on 2016-11-17 10:38  Kris゜  阅读(1041)  评论(0)  编辑  收藏  举报

导航