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. windows系统如何通过Xshell 客户端连接 linux系统（主要介绍ubuntu系统）

    一. 1.查看ubuntu系统的ip地址:ifconfig 在window系统运行窗口下:ping ubuntu系统的IP地址:例如:ping 192.168.163.129 出现下述命令就是ping ...

  2. flock防止crontab脚本周期内未执行完重复执行(转)

    如果某脚本要运行30分钟,可以在Crontab里把脚本间隔设为至少一小时来避免冲突.而比较糟的情况是可能该脚本在执行周期内没有完成,接着第二个脚本又开始运行了.如何确保只有一个脚本实例运行呢?一个好用 ...

  3. linux进程后台运行,且关终端后继续运行

    ctrl+z,fg,bg什么的都无法实现这一点.因为关终端之后就可能出问题 常用的命令如下 nohup /home/user/yourcommand.sh & nohup /home/user ...

  4. Android studio界面相关设置

    用惯了emacs的操作方式,每当使用一款新的编辑器的时候,第一个想到的就是这个工具有没有emacs的快捷键,Android studio也是一样的. 1. Android studio设置emacs的 ...

  5. haproxy 日志配置

    haproxy日志配置 haproxy在默认情况不会记录日志,除了在haproxy.conf中的global段指定日志的输出外,还需要配置系统日志的配置文件.下面以centos6.4为例,haprox ...

  6. 使用vs的查找功能，简单大概的统计vs中的代码行数

    VS强大的查找功能,可以使用正则表达式来进行查找,这里统计代码行数的原理就是: 在所有指定文件中进行搜索,统计匹配的文本行数. 但是匹配的行需要满足:非注释.非空等特殊非代码行. 使用Ctrl+Shi ...

  7. apache做转发

    一台WIN服务器,上面主要装了WAMP程序来运行PHP 的相关东西,现在在机子里的IIS建立了一个ASP.NET站点,访问端口88,服务器上可以:http://127.0.0.1:88来访问.NET网 ...

  8. redis-3.0.0_rc5的RPM包制定

    首先查看脚本: # cat /tmp/redis_before.sh #!/bin/bash if [ ! -d /apps/redis-3.0.0-rc5 ];then mkdir -p /apps ...

  9. Android 网络请求get/post工具类:NetUtil

    package com.net.util;   import java.io.IOException; import java.io.UnsupportedEncodingException; imp ...

  10. 读取本地已有的.db数据库

    public class MyDB extends SQLiteOpenHelper { // 数据库的缺省路径 private static String DB_PATH ; private sta ...