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. 用友iuap云运维平台支持基于K8s的微服务架构

    什么是微服务架构? 微服务(MicroServices)架构是当前互联网业界的一个技术热点,业内各公司也都纷纷开展微服务化体系建设.微服务架构的本质,是用一些功能比较明确.业务比较精练的服务去解决更大 ...

  2. Netflix OSS、Spring Cloud还是Kubernetes? 都要吧！

    Netflix OSS是由Netflix公司主持开发的一套代码框架和库,目的是解决上了规模之后的分布式系统可能出现的一些有趣问题.对于当今时代的Java开发者们来说,Netflix OSS简直就是在云 ...

  3. 如何在Windows环境下安装JDK

    原文链接:http://android.eoe.cn/topic/android_sdk 1. JDK 的下载 JDK有好几个类型版本,我们只需要选择Java SE类型的版本就行了. 进入网页:htt ...

  4. java基础知识总结1

    一. java开发工具 Editplus:Editplus与jdk的连接配置.如:javac(编译).java(运行).javap(查看字节码) a) 配置内容: i. javac(编译):參数为 - ...

  5. Stochastic Gradient Descent收敛判断及收敛速度的控制

    要判断Stochastic Gradient Descent是否收敛,可以像Batch Gradient Descent一样打印出iteration的次数和Cost的函数关系图,然后判断曲线是否呈现下 ...

  6. Chunk

    Chunk是一系列语句,Lua执行的每一块语句,比如一个文件或者交互模式下的每一行都是一个Chunk. 每个语句结尾的分号(;)是可选的,但如果同一行有多个语句最好用:分开 a = 1   b = a ...

  7. TF-IDF理解及其Java实现

    TF-IDF 前言 前段时间,又具体看了自己以前整理的TF-IDF,这里把它发布在博客上,知识就是需要不断的重复的,否则就感觉生疏了. TF-IDF理解 TF-IDF(term frequency–i ...

  8. Anaconda的使用和包的更新；conda 创建虚拟环境

    安装: 官网下好后,直接 sh * 会提示安装路径,选择No的话重新填入安装的路径就可以了: 添加到环境变量: echo 'export PATH="~/anaconda2/bin/$PAT ...

  9. 17、uwp 打包失败记录

    今天在打包时,总是打包失败, visual studio 报错误: 严重性 说明 代码 项目 文件 行 禁止显示状态错误 Error info: error 80080204: All app pac ...

  10. DIOCP开源项目-利用队列+0MQ+多进程逻辑处理，搭建稳定,高效,分布式的服务端

    最近头脑里面一直在想怎么样让能让大家基于DIOCP上写出稳定的服务端程序.很多朋友问我,你DIOCP稳定吗,我可以用他来做三层服务器吗? 当时我是这样回答的,我只能保证DIOCP底层通信的稳定. 说实 ...