• 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
    完美,只是因为简单。
  • 相关阅读:
    加密与认证
    使用fiddler查看https请求
    #HTTP协议学习# (十)拓展-HTTPS协议
    #HTTP协议学习# (九)cookie
    #HTTP协议学习# (八)状态码详解
    #HTTP协议学习# (七)代理
    #HTTP协议学习# (六)缓存
    winform_使用ClickOnce生成安装程序包页面&程序发布新版本通知客户端更新
    C#_.Net Core 3.1 WebAPI_Excel数据读取与写入_自定义解析封装类_支持设置标题行位置&使用excel表达式收集数据&单元格映射&标题映射&模板文件的参数数据替换
    C#_.net core 3.0自定义读取.csv文件数据_解决首行不是标题的问题_Linqtocsv改进
  • 原文地址:https://www.cnblogs.com/jschar/p/6072812.html
Copyright © 2020-2023  润新知