cari

Rumah >hujung hadapan web >tutorial js >JavaScript 函数的简单介绍

JavaScript 函数的简单介绍

青灯夜游
青灯夜游asal
2018-09-14 09:21:481346semak imbas

本章给大家带来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>

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

2.png

带有返回值的函数

有时候我们需要函数将处理后的数据返回给调用它的地方，通过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变量分配值

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

Atas ialah kandungan terperinci JavaScript 函数的简单介绍. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript 局部变量 全局变量 var function 对象 作用域 事件
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：从区块链的发展历程中看初链Artikel seterusnya：如何正确使用uniGUI的HyperServer（负载均衡）功能

Artikel berkaitan

Lihat lagi