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. SNF平台从sql server兼容oracle的处理方式和开发方式

    前几天有这样一个需求,就是让SNF平台BS版的基础程序全面支持Oracle数据库. 初一看这是一个很大的工程,因为大家都知道 Sql和Oracle的语法有很多的不一样,如 top .日期获取.类型之间 ...

  2. Wireshark数据抓包分析——网络协议篇

                   Wireshark数据抓包分析--网络协议篇     watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZGF4dWViYQ==/ ...

  3. 在eclipse-oxygen-sts中，关于快捷键[CTRL + SHIFT + O]失效的问题

    这是sts的一个bug,没关系,重新设置接口 按照如图位置修改即可 下图截自于stackoverflow

  4. 自定义Django中间件（登录验证中间件实例）

    前戏 我们在前面的课程中已经学会了给视图函数加装饰器来判断是用户是否登录,把没有登录的用户请求跳转到登录页面.我们通过给几个特定视图函数加装饰器实现了这个需求.但是以后添加的视图函数可能也需要加上装饰 ...

  5. [Windows Azure] About Affinity Groups for Virtual Network

    Affinity groups are the way to group the services in your Windows Azure subscription that need to wo ...

  6. HTTP 代理服务器技术选型之旅

    HTTP 代理服务器技术选型之旅 背景 长期以来,贴吧开发人员多,业务耦合大,需求变化频繁,因此容易产生 bug.而我所负责的广告相关业务,和 UI 密切相关,一旦因为某种原因(甚至是被别人改了代码) ...

  7. 【Java】IO Stream详细解读

    成鹏致远 | 2013年12月31日 什么是IO Java中I/O操作主要是指使用Java进行输入,输出操作. Java所有的I/O机制都是基于数据流进行输入输出,这些数据流表示了字符或者字节数据的流 ...

  8. 【Cmd】批处理

    小续 看了下时间,10年写的了 批处理是个很强大的东西,现在任何一个工具都包含这个功能,只是被工具给封闭起来了 怀念下dos时代的批处理啊 rem即高级语言中的注释的意思,能看懂每个程序的作用了吧 @ ...

  9. Oracle生成流水号函数

    一.参考 1:日期范围上 smalldatetime的有效时间范围1900/1/1~2079/6/6 datetime的有效时间范围1753/1/1~9999/12/31 2:精准度上 smallda ...

  10. MAC下是用brew安装Redis

    启动redis redis-server /etc/redis.conf 安装brew 在命令行里运行下面的命令,需要等待一段时间. ruby -e "$(curl -fsSL https: ...