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函数的区别及用法的更多相关文章

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

    本文实例分析了PHP易混淆函数的区别及用法.分享给大家供大家参考.具体分析如下: 1.echo和print的区别PHP中echo和print的功能基本相同(输出),但是两者之间还是有细微差别的.ech ...

  2. pandas的map函数与apply函数的区别

    import pandas as pd import numpy as np df = pd.DataFrame(np.random.randn(4,3),columns=list("ABC ...

  3. call、apply/bind的区别和用法（简单粗暴的解释）

    var obj1={ name:"bob", age:20 } var obj2={ name:"coco", age:22 } function getAge ...

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

    1.定义 每个函数都包含俩个非继承而来的方法:call() 和 apply()   call 和 apply 可以用来重新定义函数的的执行环境,也就是 this 的指向:call 和 apply 都是 ...

  5. php 中session_set_cookie_params 和 setcookie 函数的区别与用法

    session_set_cookie_params() 函数不管刷不刷新页面,都不会改变cookie的过期时间, 但setcookie() 函数页面每刷新一次,cookie 的过期时间就会刷新一次. ...

  6. pandas DataFrame apply()函数(2)

    上一篇pandas DataFrame apply()函数(1)说了如何通过apply函数对DataFrame进行转换,得到一个新的DataFrame. 这篇介绍DataFrame apply()函数 ...

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

    一直没怎么使用过JavaScript中的bind,call和apply, 今天看到一篇比较好的文章,觉得讲的比较透彻,所以记录和总结如下 首先要理解的第一个概念,JavaScript中函数调用的方式, ...

  8. js中bind、call、apply函数的用法

    最近一直在用 js 写游戏服务器,我也接触 js 时间不长,大学的时候用 js 做过一个 H3C 的 web的项目,然后在腾讯实习的时候用 js 写过一些奇怪的程序,自己也用 js 写过几个的网站.但 ...

  9. Javascript中bind、call、apply函数用法

    js 里函数调用有 4 种模式:方法调用.正常函数调用.构造器函数调用.apply/call 调用. 同时,无论哪种函数调用除了你声明时定义的形参外,还会自动添加 2 个形参,分别是 this 和ar ...

随机推荐

  1. NetBeans invalid jdkhome specified 问题解决方法

    JDK的路径变化会导致 NetBeans 启动时出现错误: 解决办法: There's is an easy way to fix this. Navigate to your NetBeans in ...

  2. Centos7 wifi

    centos7如果在安装系统选择安装软件的选项是gnome套件(要注意退出选择界面回到安装界面时软件选项显示的是gnome,仅仅选择了gnome的软件也不行),安装完成后就会有wifi的图标,下面的方 ...

  3. 简单的ADO.NET连接数据小样例

    ADO.NET连接数据库的样例如下: using System; using System.Collections.Generic; using System.ComponentModel; usin ...

  4. centos7.0 安装redis集群

    生产环境下redis基本上都是用的集群,毕竟单机版随时都可能挂掉,风险太大.这里我就来搭建一个基本的redis集群,功能够用但是还需要完善,当然如果有钱可以去阿里云买云数据库Redis版的,那个还是很 ...

  5. 2016年6月20日 JAVA知识框架

    基于 J2EE 列举的知识架构,大体列举开发基础知识.帮助我随时查缺补漏,奉行好记性不如烂笔头.写了这该随笔,以便后续查询. 1  JAVA简介 2  JAVA编程环境 3  JAVA基本编程结构 4 ...

  6. 【Java EE 学习 82 上】【MAVEN基本安装和使用方法】

    一.Maven概述 1.什么是Maven? Maven中文意思是"行家"."专家",它是一种跨平台的项目管理工具. 2.Maven有什么作用? Maven能够实 ...

  7. 攻城狮在路上（陆）-- hadoop分布式环境搭建(HA模式)

    一.环境说明: 操作系统:Centos6.5 Linux node1 2.6.32-431.el6.x86_64 #1 SMP Fri Nov 22 03:15:09 UTC 2013 x86_64 ...

  8. MachineKey 操作 之 应用集群中SSO应用生成MachineKey

    MachineKey介绍 MachineKey其用于对 Forms 身份验证 Cookie 数据和视图状态数据进行加密和解密,一般情况下IIS自动默认给网站或者每一个应用生成唯一的MachineKey ...

  9. iOS中的生命周期

    对于一个iOS app来讲,生命周期是一个十分至关重要的东西.对于一个app来讲控制着app的开启.睡眠.关闭等状态:对于一个页面的来讲,控制页面的加载.显示.消失:对于一个View或者一个普通的类来 ...

  10. Nginx+FastCGI运行原理

    Nginx不支持对外部程序的直接调用或者解析,所有的外部程序(包括PHP)必须通过FastCGI接口来调用.FastCGI接口在Linux下是socket(这个socket可以是文件socket,也可 ...