JavaScript自定义函数用法详解

2024-09-29 19:35:16

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自定义函数用法的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持我们。

常用原生js自定义函数总结

js获取日期函数 //获取当前时间日期 function CurentTime() { var now = new Date(); var year = now.getFullYear(); //年 var month = now.getMonth() + 1; //月 var day = now.getDate(); //日 var hh = now.getHours(); //时 var mm = now.getMinutes(); //分 var clock = year + "-&quo
详解JavaScript自定义函数

一.定义方法:在Javascript中必须用function关键字 function funcName(arg1,arg2...) { statements; return "变量值"; //返回值可以根据函数的需要 } 函数名是函数自身的一个引用.此种方式创立的函数引用是独立存在的,无法删除. 1.调用函数:函数名(参数列表). 传递的参数不必与函数定义的参数个数一致,并且可以设定函数参数的默认值. function example(a,b){ var a = arguments[0
JavaScript自定义函数实现查找两个字符串最长公共子串的方法

本文实例讲述了JavaScript自定义函数实现查找两个字符串最长公共子串的方法.分享给大家供大家参考,具体如下: //查找两个字符串的最长公共子串 function findSubStr(s1,s2){ var S=sstr= "" ,L1=s1.length,L2=s2.length; if (L1>L2){ var s3=s1;s1=s2,s2=s3,L1=s2.length;} for ( var j=L1;j> 0 ;j--) for ( var i= 0 ;i&
JS自定义选项卡函数及用法实例分析

本文实例讲述了JS自定义选项卡函数及用法.分享给大家供大家参考.具体如下: 这里分享一个JS选项卡函数附带演示效果,选项卡函数参数调用说明: cmd:点击元素集合 con:显示容器集合 evt:触发事件 css:为当前点击元素的样式名称 index:为默认显示第几项的索引值目前选项卡的样式还比较简洁和粗糙,想用的自己动动手美化一下. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-zdy-tab-cha-fun-style-codes/
JS 自定义带默认值的函数

开始想当然地认为可能像php或python等语言中一样 js 代码复制代码代码如下: function test(a,b="er"){ alert(a + b ); } 可是,定义完之后一直在报错:缺少对象.经过查询才发现,javascript中的确不能这样定义,可以借肋于arguments 是实参数组,参考下例: js 代码复制代码代码如下: <script type="text/javascript"> function Test(a) {
JS 自定义函数缺省值的设置方法

如果想把a缺省值设为5,不能写成: function my(a=5){ xxx; } 简单查了一下,有下面几种可以使用: function my(a){ alert(a||5); } function my(a){ a = typeof(a) == 'undefined' ? 5 : a; } function my(a){ if(typeof(a) == 'undefined'){ a = 5; } } 个人觉得第二种更简洁,更清晰.
js常用自定义公共函数汇总

复制代码代码如下: String.prototype.trim = function(){ return this.replace(/(^\s*)|(\s*$)/g, ""); } //检查是否是日期格式 function isDate(datestr){ var result = datestr.match(/((^((1[8-9]\d{2})|([2-9]\d{3}))(-)(10|12|0?[13578])(-)(3[01]|[12][0-9]|0?[1-9])$)|(^((1
javascript 自定义回调函数示例代码

如果你直接在函数a里调用的话,那么这个回调函数就被限制死了.但是使用函数做参数就有下面的好处:当你a(b)的时候函数b就成了回调函数,而你还可以a(c)这个时候,函数c就成了回调函数.如果你写成了functiona(){...;b();}就失去了变量的灵活性. 复制代码代码如下: function a(index,callback){ callback(index); } function b(index){ alert(index); } a(10000,b);
总结一些js自定义的函数

1.dayin() 作用:将id为dayin的内容,新建页面并打印,可解决打印某页面中的部分内容的问题. 使用方法:将要打印的内容通过 <span id="dayin"></span>包含起来,然后在某个按扭中定义事件 <input type="button" onclick="dayin()" value="打印"> function dayin() { var code=&qu
js自定义回调函数

背景分析首先看一段js的代码,主要实现添加的时候首先通过异步请求判断是否存在,如果不存在的话,在进行添加操作: function add(url,data) { var isExited = isExited(data); if(!isExited){ addRequest(url, data); } } 当我添加一个数据的时候,我首先通过判断是否在数据库中存在(当然,如果前后台彻底分离的话,不应该前端进行业务逻辑的判断,前端只应该,用来展示数据),首先,isExited()的请求是ajax请
基于JavaScript自定义构造函数的详解说明

Javascript并不像Java.C#等语言那样支持真正的类.但是在js中可以定义伪类.做到这一点的工具就是构造函数和原型对象.首先介绍js中的构造函数. Javascript中创建对象的语法是在new运算符的后面跟着一个函数的调用.如复制代码代码如下: var obj = new Object(); var date = new Date(); 运算符new首先创建一个新的没有任何属性的对象,然后调用该函数,把新的对象作为this关键字的值传递.var date = new Date()