原创文章,转载请注明出处:http://blog.csdn.net/android_zyf/article/details/62890074
什么是函数?
大多数情况下,程序在执行过程中,会反复完成相同或类似的内容,为了避免多次重复编写相同的代码段,JS将部分代码包装为能够重复使用的模块,称为”函数”;
函数是JavaScript的基本模块之一,基本会出现在每个脚本中.
一,基本语法
涉及到语法,也就没什么难的了,无非就是在各种情况下的固定格式而已.
function sayHello() {
alert("hello function");
}
关键字function:定义一个函数,必须小写
sayHello:函数名,符合见名知意,驼峰结构
注: 可以在一个<script>中添加多个function代码块(创建多个函数)
二,调用函数
- 当页面加载时,包含在function内部(函数内)的代码块是不会被执行的,只有当函数被调用时,函数内的代码才会被执行.
- 将函数写在<head>标签中,这样就可以在页面(HTML文档)的任何一个位置调用它.
- 也就是说需要将<script>标签写在<head>标签中.
方法调用的示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>函数示例</title>
<script>
// 函数的定义写在了head中的script内
function sayHello() {
alert("hello function~");
}
</script>
</head>
<body>
<!-- 函数的调用body中,当点击button时才调用 -->
<input type="button" value="点我say hello~" onclick="sayHello()"/>
</body>
</html>
三,参数
可以在调用函数时,向函数中传递内容,在函数中对接收到的内容做操作,得到不同的结果.像函数中传递内容的操作,叫做传递参数.
下面是一个调用含参函数的示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>函数示例</title>
<script>
// 定义两个变量,用来演示加法函数
// 需要注意的是,函数中的a,b与这里定义的x,y在起名上是没有任何关系的
// a,b只是占位符,传进去多少,就是多少
var x = 3;
var y = 4;
function sayHello() {
alert("hello function~");
}
function getSum(a,b) {
alert(a+b);
}
</script>
</head>
<body>
<input type="button" value="点我say hello~" onclick="sayHello()"/>
<!-- 这里传入的4,在getSum方法中就是a的值,5同理 -->
<input type="button" value="点我显示相加的结果" onclick="getSum(4,5)" />
<!-- 也可以传入变量进行计算 -->
<input type="button" value="点我显示x+y的结果" onclick="getSum(x,y)"/>
</body>
</html>
注:若调用函数时,传入的参数个数少于声明函数时小括号内的参数,那么JS可能会报错,或者参数执行不正确
注:使用多个参数时,每个参数要用逗号隔开,如果在调用时传入过多的参数,JS会将多余的参数忽略掉
下面是一个多参数函数的使用过程演示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>多个参数的函数示例</title>
<script>
function showButtonMessage(buttonId,buttonName,buttonValue) {
// 在函数中,建立三个变量,并且给每个变量赋值
// 因为这三个变量是在当前这个函数中定义的,所以这三个变量只在当前函数中有效
var idMessage = "Button id is " + buttonId + "\n";
var nameMessage = "Button name is " + buttonName + "\n";
var valueMessage = "Button value is " + buttonValue + "\n";
alert(idMessage + nameMessage + valueMessage);
}
</script>
</head>
<body>
<input type="button" id="110" name="button张" value="点我点我"
onclick="showButtonMessage(this.id,this.name,this.value)" />
<input type="button" id="119" name="button李" value="xjbd"
onclick="showButtonMessage(this.id,this.name,this.value)" />
<input type="button" id="120" name="button王" value="dnmb"
onclick="showButtonMessage(this.id,this.name,this.value)" />
</body>
</html>
四,函数返回值
JS的函数返回值,不需要规定返回值类型,只需要一个return语句即可;
// 下面的函数,会将a+b的和返回
function getNum(a,b) {
// 在return执行完毕后,方法就结束了,即使在return语句下面还有其他语句,也是不会执行的,但是不会像java那样报错.
return a+b;
}
得到函数的结果(返回值):
var num = getNum(3,4); //这样num就被赋值了7
也可以将函数的结果作为参数传递到函数中
var test = getNum(5,getNum(6,getNum(4,4))); //结果为:18
五,变量作用域
前面的代码注释中,已经提到过,在函数中声明的变量,只在该函数中有效.
那么该原则为:函数内部声明的变量只存在于函数内部.
这种限制称作 作用域
1. 在函数内部声明的变量叫做”局部”变量.
2. 函数之外声明的变量叫做全局变量.
3. 全局变量与局部变量的名称可以相同,但仍然是不用的变量.
4. 变量的使用范围称为变量的”作用域”,因此可以称一个变量具有”局部作用域”或”全局作用域”
注:函数名称必须以字母或下划线开头,可以包含字母,数字和下划线,不能包含空格,标点符号和其他特殊字符.