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. 前端表单中有按钮button自动提交表单

    问题描述 在设计表单时,表单内有一个按钮<button>,该按钮是用来获取其他数据或执行其他操作的.并不是让他提交表单. 解决方案 1) 设置 form 的 onsubmit='retur ...

  2. 7 款顶级的开源 Web 分析软件

    Web 分析无非就是 Web 流量的测量.但它并不限于测量网络流量,还包括: 分析 数据采集 为了了解和优化网页而上报网络数据 Google Analytics是最广泛使用的基于云的网络分析服务.不过 ...

  3. MarkDown 使用指南

    https://frankbing.gitbooks.io/markdown/content/

  4. es 模板

    { "template": "log*", "order":10, "settings": { "index& ...

  5. Sql Server删除数据表中重复记录 三种方法

    本文介绍了Sql Server数据库中删除数据表中重复记录的方法. ［项目］数据库中users表,包含u_name,u_pwd两个字段,其中u_name存在重复项,现在要实现把重复的项删除!［分析］1 ...

  6. linq筛选唯一

    var sizelist= (from p in stockList select p.Size).Distinct().ToArray(); newslist = newslist.OrderBy( ...

  7. C#读取对象实例的值和对对象的属性自动赋值方法

    using System; using System.Data; using System.Reflection; namespace DBUtility { /// <summary> ...

  8. android 去掉标题栏、状态栏、横屏

    // 去掉标题栏 supportRequestWindowFeature(Window.FEATURE_NO_TITLE); // 全屏.隐藏状态栏 getWindow().setFlags(Wind ...

  9. c++中数据表如何转成业务实体--map和结构体的相互转换

    应用场景:如何把数据库表中的一行转换成一个业务实体结构体,c#和java中都有实体框架,表到实体的转换很方便,c++中缺少这些框架,但是有一些折中的办法去做.其实问题的本质是:map如何转成结构体. ...

  10. Vue.js使用-http请求

    Vue.js使用-ajax使用 1.为什么要使用ajax 前面的例子,使用的是本地模拟数据,通过ajax请求服务器数据. 2.使用jquery的ajax库示例 new Vue({ el: '#app' ...