关于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>

   

时间: 2024-11-05 19:29:44

关于call和apply函数的区别及用法的相关文章

PHP易混淆函数的区别及用法汇总

本文实例分析了PHP易混淆函数的区别及用法.分享给大家供大家参考.具体分析如下: 1.echo和print的区别PHP中echo和print的功能基本相同(输出),但是两者之间还是有细微差别的.echo输出后没有返回值,但print有返回值,当其执行失败时返回flase.因此可以作为一个普通函数来使用,例如执行下面的代码后变量$r的值将为1. PHP代码: 复制代码代码如下: $r = print "Hello World"; 这意味着print可用在一些复杂的表达式中,而echo则不

pandas中agg()函数和apply()函数的区别

如果对自定义top_n的调用采用agg函数的话,那么报出的错误将是 说明了一个问题,使用agg函数调用top_n的话,它在尝试对每一个分组使用top_n进行聚合,但是top_n的作用是排序,不是聚合,所以肯定会报错 所以在这种情况下,只能采用apply函数,而不能采用agg函数,agg函数内调用的函数只能对分组进行聚合使用. 新手入门,个人理解,如有错误,希望谅解

js call()和apply()方法的区别和用法详解

1.定义 每个函数都包含两个非继承而来的方法:call()方法和apply()方法. call和apply可以用来重新定义函数的执行环境,也就是this的指向:call和apply都是为了改变某个函数运行时的context,即上下文而存在的,换句话说,就是为了改变函数体内部this的指向. 语法 call() 调用一个对象的方法,用另一个对象替换当前对象,可以继承另外一个对象的属性,它的语法是: Function.call(obj[, param1[, param2[, [,...paramN]

PHP易混淆函数的区别及用法汇总(函数和方法的区别)

1.echo和print的区别PHP中echo和print的功能基本相同(输出),但是两者之间还是有细微差别的.echo输出后没有返回值,但print有返回值,当其执行失败时返回flase.因此可以作为一个普通函数来使用,例如执行下面的代码后变量$r的值将为1. PHP代码: 复制代码代码如下:$r = print "Hello World"; 这意味着print可用在一些复杂的表达式中,而echo则不行.但是,因为echo语句不要求返回任何数值,所已在代码中echo语句的运行效率要略

calloc、malloc、realloc函数的区别及用法

/* 需要手动计算内存大小,未初始化 */ int *p = (int *)malloc(20 * sizeof(int)); /* 不需要手动计算内存大小,初始化为0 */ int *q = (int *)calloc(20, sizeof(int)); /* 动态内存 扩大/缩小 * 1.成功分配: * 1.1 返回地址相同, 原内存后 有 空余内存,返回原来指针的地址: * 1.2 返回地址不同, 原内存后 没有 空余内存,新分配一块儿内存,并把原来的内存内容拷贝过来,原来的内存释放掉:

call()函数、apply()函数区别与意义

使用apply函数或call函数的意义: 在面对对象编程过程中,当A对象调用其他对象而非A对象方法是,该方法中所有的this引用都指向此方法所在的对象,而不是当前代码的上下文即A对象, 为了保持this的原来的指向(即A对象),则需要使用apply或call函数. apply()和call()的区别: apply和call,它们的作用都是将函数绑定到另外一个对象上去运行 原型分别是 Function.prototype.apply(thisArg,argArray); Function.prot

JavaScript中的bind,call和apply函数的用法和区别

一直没怎么使用过JavaScript中的bind,call和apply, 今天看到一篇比较好的文章,觉得讲的比较透彻,所以记录和总结如下 首先要理解的第一个概念,JavaScript中函数调用的方式,总结下来,有以下4种 1. 方法调用 2. 正常函数调用 3. 构造器函数调用 4. apply/call 调用 要明白的第2个概念, JavaScript 中的函数,无论是上面哪种函数调用方式,除了你函数声明时定义的形参外,还会自动给函数添加两个形参,分别是this 和 arguments 要明白

JavaScript中bind、call、apply函数用法详解

在给我们项目组的其他程序介绍 js 的时候,我准备了很多的内容,但看起来效果不大,果然光讲还是不行的,必须动手.前几天有人问我关于代码里 call() 函数的用法,我让他去看书,这里推荐用js 写服务器的程序猿看<javascript编程精粹> 这本书,crockford大神果然不是盖的.之后我在segmentfault上又看到了类似的问题,那边解答之后干脆这里记一笔. 首先,关于 js 定义类或对象的方法,请参看w3school 的这里的这里,写的非常详细和清晰,我不再赘言了. 为了介绍 b

Javascript中bind、call、apply函数用法

js 里函数调用有 4 种模式:方法调用.正常函数调用.构造器函数调用.apply/call 调用. 同时,无论哪种函数调用除了你声明时定义的形参外,还会自动添加 2 个形参,分别是 this 和arguments. arguments 不涉及到上述 3 个函数,所以这里只谈 this.this 的值,在上面 4 中调用模式下,分别会绑定不同的值.分别来说一说: 方法调用: 这个很好理解,函数是一个对象的属性,比如 var a = { v : 0, f : function(xx) { this