首页 > 文章 > web前端 > JavaScript 函数的简单介绍

JavaScript 函数的简单介绍

青灯夜游原创: 2018-09-14 09:21:481319浏览

本章给大家带来JavaScript 函数的简单介绍，让大家可以对JavaScript 函数有一个初步的了解。有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

什么是JavaScript 函数？

在JavaScript中，函数即对象，可以随意的背程序操控，函数可以嵌套在其他函数中定义，这样可以访问他们被定义时所处的作用域中的任何变量。

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript 函数</title>
</head>
<body>
    <!-- 当按钮被点击之后 -->
    <button onclick="MyFunction()">点一下</button>
</body>

<script type="text/javascript">
    function MyFunction() {
        alert("么么哒");
    }
</script>

</html>

JavaScript 函数语法

函数就是包裹在花括号中的代码块，前面使用了关键字 function：

function myFunction(){
　　//执行代码
}
//当调用该函数时，会执行函数内的代码
//可以在某事件发生时直接调用函数（比如当用户点击按钮时）并且可有JavaScript在任何位置进行调用。

JavaScript对大小写敏感，关键词function必须是小写的，并且必须以函数名称相同的大小写来调用函数。

function中的花括号是必须的，即使函数体内只包含一条语句。

调用带参数的函数

在调用函数时，可以传递值，这些值被称为参数。这些参数可以在函数中使用。

可以传递任意个函数，由英文的逗号分隔：

myFunction(num1,num2,num3)

当声明函数时，把参数当做变量来声明：

function myFunction(var1,var2){
　　//代码
}

变量和参数必须以一致的顺序出现，第一个变量就是第一个被传递的参数的给定的值，依次类推。

例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    <button onclick="myFunction(1,2)">试一试</button>
</body>
<script type="text/javascript">
    function myFunction(num1, num2) {
        alert(num1 + num2);
    }
</script>
</html>

上面的函数在按钮被点击后会被调用。显示效果如下图：

带有返回值的函数

有时候我们需要函数将处理后的数据返回给调用它的地方，通过return语句就可以实现。

在使用return语句时，函数会停止执行，并返回指定的值。

<script type="text/javascript">
    function myFunction() {
        var x=9;
        return x;
    }
</script>

上面的函数会返回x的值 9；

注意：整个JavaScript并不会停止执行，仅仅是函数，JavaScript将继续执行代码，从调用函数的地方。

函数调用将被返回值取代。

<script type="text/javascript">
    function myFunction() {
        var x=9;
        return x;
    }
    var aa=myFunction();
</script>

aa的值是9；也就是函数“myFunction()”的返回值。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    <button onclick="myFunction(1,2)">试一试</button>
    <p id="demo"></p>
</body>
<script type="text/javascript">
    function myFunction() {
        var x=9;
        return x;
    }
    var aa=myFunction();
    document.getElementById("demo").innerHTML=myFunction();
</script>
</html>

上面的代码是通过id选取到元素，将函数myFunction的返回值写入。

如果是希望推出函数时，也可以使用return语句。返回值是可选的。也可以没有。

<script type="text/javascript">
    function myFunction(a,b) {
        if (a>b) {
            return;
        }
        x=a+b;
    }
</script>

如果a大于b，则上面的代码将推出函数。并不会计算ab的和。

局部JavaScript变量

在JavaScript函数内部声明的变量（使用var）是局部变量，所以只能在函数内部访问。（这个变量的作用域就是该函数，也可以说是局部的）。

可以在不同的函数中使用相同的变量名称。因为只有声明过该变量的函数才能识别出该变量。只要函数运行完毕，本地变量就会被删除。

局部变量比同名全局变量优先级高，所以局部变量会隐藏同名的全局变量。

全局JavaScript变量

在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。

JavaScript变量的生存期

JavaScript变量的生命期从它们被声明时开始。

局部变量回来函数运行以后被删除。

全局变量会在页面关闭后被删除。

向未声明的JavaScript变量分配值

如果把值赋值给未声明的变量，该变量将被自动作为全局变量声明。

以上是JavaScript 函数的简单介绍的详细内容。更多信息请关注PHP中文网其他相关文章！

JavaScript 局部变量全局变量 var function 对象作用域事件

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：从区块链的发展历程中看初链下一篇：如何正确使用uniGUI的HyperServer（负载均衡）功能

查看更多