首页 web前端 js教程 JavaScript 函数的简单介绍

JavaScript 函数的简单介绍

Sep 14, 2018 am 09:21 AM
javascript 函数 对象

本章给大家带来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变量分配值

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

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

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

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

golang函数动态创建新函数的技巧 golang函数动态创建新函数的技巧 Apr 25, 2024 pm 02:39 PM

Go语言提供了两种动态函数创建技术:closures和反射。closures允许访问闭包作用域内的变量,而反射可使用FuncOf函数创建新函数。这些技术在自定义HTTP路由器、实现高度可定制的系统和构建可插拔的组件方面非常有用。

C++ 函数命名中参数顺序的考虑 C++ 函数命名中参数顺序的考虑 Apr 24, 2024 pm 04:21 PM

在C++函数命名中,考虑参数顺序至关重要,可提高可读性、减少错误并促进重构。常见的参数顺序约定包括:动作-对象、对象-动作、语义意义和遵循标准库。最佳顺序取决于函数目的、参数类型、潜在混淆和语言惯例。

如何在Java中写出高效和可维护的函数? 如何在Java中写出高效和可维护的函数? Apr 24, 2024 am 11:33 AM

编写高效和可维护的Java函数的关键在于:保持简洁。使用有意义的命名。处理特殊情况。使用适当的可见性。

如何将 MySQL 查询结果数组转换为对象? 如何将 MySQL 查询结果数组转换为对象? Apr 29, 2024 pm 01:09 PM

将MySQL查询结果数组转换为对象的方法如下:创建一个空对象数组。循环结果数组并为每一行创建一个新的对象。使用foreach循环将每一行的键值对赋给新对象的相应属性。将新对象添加到对象数组中。关闭数据库连接。

excel函数公式大全 excel函数公式大全 May 07, 2024 pm 12:04 PM

1、 SUM函数,用于对一列或一组单元格中的数字进行求和,例如:=SUM(A1:J10)。2、AVERAGE函数,用于计算一列或一组单元格中的数字的平均值,例如:=AVERAGE(A1:A10)。3、COUNT函数,用于计算一列或一组单元格中的数字或文本的数量,例如:=COUNT(A1:A10)4、IF函数,用于根据指定的条件进行逻辑判断,并返回相应的结果。

C++ 函数默认参数与可变参数的优缺点比较 C++ 函数默认参数与可变参数的优缺点比较 Apr 21, 2024 am 10:21 AM

C++函数中默认参数的优点包括简化调用、增强可读性、避免错误。缺点是限制灵活性、命名限制。可变参数的优点包括无限灵活性、动态绑定。缺点包括复杂性更高、隐式类型转换、调试困难。

自定义 PHP 函数和预定义函数之间有什么区别? 自定义 PHP 函数和预定义函数之间有什么区别? Apr 22, 2024 pm 02:21 PM

自定义PHP函数与预定义函数的区别在于:作用域:自定义函数仅限于其定义范围,而预定义函数可在整个脚本中访问。定义方式:自定义函数使用function关键字定义,而预定义函数由PHP内核定义。参数传递:自定义函数接收参数,而预定义函数可能不需要参数。扩展性:自定义函数可以根据需要创建,而预定义函数是内置的且无法修改。

C++ 函数异常进阶:定制错误处理 C++ 函数异常进阶:定制错误处理 May 01, 2024 pm 06:39 PM

C++中的异常处理可通过定制异常类增强,提供特定错误消息、上下文信息以及根据错误类型执行自定义操作。定义继承自std::exception的异常类,提供特定的错误信息。使用throw关键字抛出定制异常。在try-catch块中使用dynamic_cast将捕获到的异常转换为定制异常类型。实战案例中,open_file函数抛出FileNotFoundException异常,捕捉并处理该异常可提供更具体的错误消息。

See all articles