JavaScript函数详解-优快云博客

本文链接：https://blog.youkuaiyun.com/Labigale/article/details/84552313

函数是由事件驱动的或者当它被调用的时候可以重复执行的代码块
1、一个小例子：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<script >
	function Function(){
		alert("Hello World!");
	}
</script>
</head>
<body>
<button onclick="Function()">Try it</button>
</body>
</html>

运行结果：
在这里插入图片描述

2、JavaScript函数语法
函数就是包裹在花括号中的代码块，前面使用了关键词function 与函数的名称functionname

function functionname(){
执行代码
}

当该函数被调用的时候，会执行函数内的执行代码。
注意：JavaScript对大小写敏感。关键词function必须是小写，并且必须以与函数名称相同的大小写来调用该函数
3、调用带参数的函数
在调用函数时，可以向其传递值，这些值可以被称为参数
这些参数可以在函数中使用
可以像函数传递任意多的参数，由逗号分隔:
functionname（var1,var2,var3)
变量与参数必须以一致的顺序出现。即第一个变量就是第一个被传递的参数的给定的值
例：

<body>
	<script >
	function Function(name,age){
		alert("My name is "+name+",  My age is "+age);	
	}
</script>
<button onclick="Function('Jhon',12)">Try it</button>
</body>

在这里插入图片描述
4、带有返回值的函数
可以使用return 语句实现函数将值返回调用1它的地方
是在使用return 时，函数会停止执行，并返回特定的值
但是整个JavaScript并不会停止执行，仅仅是函数

<body>
<p id="demo"></p>
<script>
	function functionname(a,b){
		return a+b;
	}
	document.getElementById("demo").innerHTML=functionname(2,3);
</script>
</body>

运行结果：(即"demo"元素的innerHTML将是

在这里插入图片描述
5、JavaScript局部作用域
变量在函数内部声明，变量为局部作用域
局部变量：只能在函数内部访问
实例：

<body>
<p id="demo1"></p>
<p id="demo"></p>

<script>
	function functionname(){
		var carName="vilvo";
		document.getElementById("demo1").innerHTML="carName1 的类型是：" +  typeof carName;
	}
	functionname();
	document.getElementById("demo").innerHTML="carName 的类型是：" +  typeof carName;
</script>
</body>

运行结果：
在这里插入图片描述
因为局部变量只作用于函数内部，所以不同的函数可以使用相同名称的变量
局部变量在函数开始执行时创建，函数执行完后局部变量会自动销毁

6、JavaScript全局变量
全局变量即为变量在函数外部定义
全局变量有全局作用域：网页中所有脚本和函数均可使用
全局变量在页面关闭后销毁

<body>
<p id="demo"></p>
<p id="demo1"></p>
<script>
	var carName="vilvo";
	functionname();
	document.getElementById("demo").innerHTML="carName1 的类型是：" +  typeof carName;
	function functionname(){
		
		document.getElementById("demo1").innerHTML="carName的类型是：" +  typeof carName;
	}
</script>
</body>

运行结果：
在这里插入图片描述