JavaScript中的函数分为两种：系统函数和自定义函数，这里主要讲解自定义函数。

一、自定义函数

1、语法：

注意：

  • 传入的参数是可选的。

例如：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>自定义函数</title>

    <script>

        // 语法1自定义无参函数

       function custom(){

           document.write("自定义无参函数，使用第一种语法定义"+"<br />")

       };

       // 语法2

       var customer=function(){

        document.write("自定义无参函数,使用第二种语法定义"+"<br />")

       };

       // 定义有参函数

       function customWithPara(i){

           document.write("自定义有参函数，使用第一种语法定义,i的值是:"+i+"<br />")

       };

       // 语法2

       var customerWithPara=function(i){

           document.write("自定义有参函数,使用第二种语法定义,i的值是:"+i+"<br />")

       };

    </script>

</head>

<body>

</body>

</html>

2、函数的调用

函数可以通过函数名加上括号中的参数进行调用。

例如：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>函数调用</title>

</head>

<body>

    <script>

       // 定义无参函数

       function custom(){

           document.write("这是无参的函数"+"<br />");

       };

       // 定义无参的函数变量

       var customer=function(){

        document.write("这是无参的函数变量"+"<br />");

       };

       // 定义有参函数

       function customWithPara(para){

           document.write("这是有参函数，参数值是:"+para+"<br />");

       }

       // 定义有参的函数变量

       var customerWithPara =function(para){

           document.write("这是有参的函数变量，参数值是:"+para+"<br />");

       }

       // 函数调用

       // 1、调用无参函数

       custom();

       // 2、调用有参函数

       customWithPara(45);

       // 无参函数变量的调用

       customer();

       // 有参函数变量的调用

       customerWithPara(23);

    </script>

</body>

</html>

结果：

注意：

  • 调用函数时需要注意函数调用的顺序。如果是自定义函数，那么也可以在函数定义之前调用函数，因为这时会自动把函数的定义放到最前面。如果是通过变量的形式定义函数，那么必须先定义函数才能调用。

看下面的例子：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>函数调用</title>

</head>

<body>

    <script>

       // 函数调用

       // 1、调用无参函数

       custom();

       // 2、调用有参函数

       customWithPara(45);

       // 无参函数变量的调用

       customer();

       // 有参函数变量的调用

       customerWithPara(23);

       // 定义无参函数

       function custom(){

           document.write("这是无参的函数"+"<br />");

       };

       // 定义无参的函数变量

       var customer=function(){

        document.write("这是无参的函数变量"+"<br />");

       };

       // 定义有参函数

       function customWithPara(para){

           document.write("这是有参函数，参数值是:"+para+"<br />");

       }

       // 定义有参的函数变量

       var customerWithPara =function(para){

           document.write("这是有参的函数变量，参数值是:"+para+"<br />");

       }

    </script>

</body>

</html>

结果：

3、匿名函数

匿名函数：顾名思义，即没有函数名称的函数。其语法如下图所示：

例如：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>匿名函数</title>

</head>

<body>

    <script>

        // 传统定义函数的方式

        function fn(){

            document.write("这是传统函数的定义"+"<br />");

        };

        // 调用

        fn();

        // 匿名函数的定义和调用

        (function(){

            document.write("这是匿名函数"+"<br />");

        })();

    </script>

</body>

</html>

结果：

4、匿名函数的应用

匿名函数可以作为函数的参数进行调用，看下面的例子：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>匿名函数的应用</title>

    <script>

         // 匿名函数应用

         function fun(para){

            document.write("参数的值是:"+para+"<br />");

        };

        // 用匿名函数作为函数的参数

        fun(function(){

            return 5;

        }());

        // 也可以使用下面的方式

        function fu(para){

            document.write("参数的值是:"+para()+"<br />");

        };

        fu(function(){

            return "56";

        });

    </script>

</head>

<body>

</body>

</html>

结果：

JavaScript（四）：函数的更多相关文章

  1. Javascript中函数的四种调用方式

    一.Javascript中函数的几个基本知识点: 1.函数的名字只是一个指向函数的指针,所以即使在不同的执行环境,即不同对象调用这个函数,这个函数指向的仍然是同一个函数. 2.函数中有两个特殊的内部属 ...

  2. 初探JavaScript(四)——作用域链和声明提前

    前言:最近恰逢毕业季,千千万万的学生党开始步入社会,告别象牙塔似的学校生活.往往在人生的各个拐点的时候,情感丰富,感触颇深,各种对过去的美好的总结,对未来的展望.与此同时,也让诸多的老“园”工看完这些 ...

  3. (转)Javascript匿名函数的写法、传参、递归

    (原)http://www.veryhuo.com/a/view/37529.html (转)javascript匿名函数的写法.传参和递归 javascript匿名函数的写法.传参和递归 http: ...

  4. (转)javascript匿名函数的写法、传参和递归

    (原)http://www.veryhuo.com/a/view/37529.html (转)javascript匿名函数的写法.传参和递归 http://www.veryhuo.com 2011-0 ...

  5. javascript oop深入学习笔记（二）--javascript的函数

    一.概述: 函数是进行模块化程序设计的基础, javascript重的的函数不同于其他语言,每个函数都作为一个对象被维护和运行.通过函数对象的性质,可以很方便的将一个函数赋值给一个变量或则讲函数作为参 ...

  6. [转]javascript console 函数详解 js开发调试的利器

    javascript console 函数详解 js开发调试的利器   分步阅读 Console 是用于显示 JS和 DOM 对象信息的单独窗口.并且向 JS 中注入1个 console 对象,使用该 ...

  7. javascript——四种函数调用形式

    此文的目的是分析函数的四种调用形式,弄清楚函数中this的意义,明确构造函对象的过程,学会使用上下文调用函数. 在JavaScript中,函数是一等公民,函数在JavaScript中是一个数据类型,而 ...

  8. JavaScript function函数种类（转）

    转自:http://www.cnblogs.com/polk6/p/3284839.html JavaScript function函数种类 本篇主要介绍普通函数.匿名函数.闭包函数 目录 1. 普通 ...

  9. 从头开始学JavaScript (四)——操作符

    原文:从头开始学JavaScript (四)--操作符 一.一元操作符 1.自增自减操作符:分为前置型和后置型: 前置型:++a;--a; 后置型:a++;a--; 例: <script typ ...

  10. JavaScript之函数(上)

    在编程语言中,无论是面向过程的C,兼备面过程和对象的c++,还是面向对象的编程语言,如java,.net,php等,函数均扮演着重要的角色.当然,在面向对象编程语言JavaScript中(严格来说,J ...

随机推荐

  1. django session入门详解

    概括性的讲: 1.django默认是打开对session的支持的 2.默认情况下session相关的数据会保存在数据库中.浏览器端只保存了session id session 的科普: 1.动态网站中 ...

  2. CentOS下配置redis允许远程连接

    1. 目的 因为想要学习redis,因此在虚拟机中安装了redis,为了实现在物理机可以访问redis,弄了好久:因此记录下来,以免忘记. 2. 环境 虚拟机:CentOS Linux release ...

  3. 修改PS1变量

    PS1='\[\e[7;46m\]\u\[\e[0m\]@\[\e[0;32m\]\h\[\e[0m\]:\[\e[0;34m\]\w\[\e[0m\]\$ ' from: http://profes ...

  4. haproxy rpm制做

    [root@c01 tmp]# fpm -s dir -t rpm -v 1.7.7 -n haproxy --before-install /tmp/haproxy_before.sh --afte ...

  5. sqlite: Error Code : 5 (SQLITE_BUSY) (database is locked (code 5): , while compiling: PRAGMA journal_mode)

    今天遇到了一个很奇怪的问题,登录完成后,程序会莫名crash, 报了下面的错误: sqlite: Error Code : (SQLITE_BUSY) (database is locked (cod ...

  6. ASP.NET Core2.0 环境下MVC模式的支付宝PC网站支付接口-沙箱环境开发测试

    1.新建.NET Core web项目 2.Controllers-Models-Views 分三个大部分 3.下载安装最新sdk 官方的SDK以及Demo都还是.NET Framework的,根据官 ...

  7. CMD命令下访问Oracle数据库

    1.非集群下 Windows环境下数据库 127.0.0.1 只是个IP代表  实际要输入你要访问的数据库服务器IP地址的 如果数据库服务器不在本机上,需要加上数据库服务器的地址:用户名/密码@IP地 ...

  8. iOS 减法计算器

    一: 在界面上拖入相应的控件 二: 给每个控件设置关联 //监听按钮的点击 - (IBAction)compute:(id)sender; //第一个文本输入框的值 @property (weak, ...

  9. vue监听浏览器窗口的变化，随着窗口变化调整里面table的宽高

    1.在data中设置: tableHeight:"500", screenHeight:window.innerHeight, 2.在mounted中设置: mounted() { ...

  10. Django 查询时间段 时间搜索 过滤

    Django 查询时间段 1.大于某个时间 gt now = datetime.datetime.now()start = now – datetime.timedelta(hours=23, min ...