讲给Android程序员看的前端系列教程(40集免费视频教程+源码)
版权声明
- 本文原创作者：谷哥的小弟
- 作者博客地址：http://blog.csdn.net/lfdfhl
在JavaScript程序设计中为了使代码更为简洁且能重复使用，通常会把某段实现特定功能的代码封装称为一个函数。
函数的定义
语法如下：
function 函数名(参数1,参数2.....) {
函数体
}
在该语法中，各部分含义如下：
- function：定义函数的关键字
- 函数名：函数的名称
- 参数：函数的输入参数，函数可无输入参数也可以有一个或多个输入参数
- 函数体：函数的主体，用于专门实现特定的功能
在定义函数的过程中请注意：JavaScript是弱类型语言，在定义函数时既不需要声明函数的返回值类型，也不需要声明函数的输入参数类型
函数的调用
语法如下：
函数名(参数1,参数2.....);
函数入门练习
函数入门练习1:无输入参数的函数
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>函数</title>
</head>
<body>
<script type="text/javascript">
function showMessage(){
alert("Hello JavaScript");
}
</script>
<button onclick="showMessage()">Click Me</button>
</body>
</html>
结果如下：
函数入门练习2:带输入参数的函数
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>函数</title>
</head>
<body>
<script type="text/javascript">
function add(a,b){
var sum=a+b;
document.write("sum="+sum);
}
</script>
<button onclick="add(4,5)">Click Me</button>
</body>
</html>
结果如下：
函数入门练习3:有返回值的函数
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>函数</title>
</head>
<body>
<script type="text/javascript">
function showMax(a,b){
var max=getMax(a,b);
document.write("max="+max);
}
function getMax(a,b){
var max=0;
if(a>=b){
max=a;
}else{
max=b;
}
return max;
}
</script>
<button onclick="showMax(3,9)">Click Me</button>
</body>
</html>
结果如下：
省略输入参数
在定义函数时若不能确定函数的形参个数，此时可不设置形参，而在在函数体中直接通过arguments对象获取函数调用时传递的实参，实参的总数可通过length属性获取，具体的实参值可通过数组遍历的方式进行获取。
示例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>函数</title>
</head>
<body>
<script type="text/javascript">
function getSum() {
var sum = 0;
for(var i=0;i<arguments.length;i++){
sum += arguments[i];
}
return sum;
}
var sum=getSum(10, 20, 30);
alert("sum="+sum);
</script>
</body>
</html>
结果如下：
变量的作用域
在此介绍JavaScript变量的作用域：
-
全局变量：不在任何函数内声明的变量(显示定义)或在函数内省略var声明的变量(隐式定义)都称为全局变量，它在同一个页面文件中的所有脚本内都可以使用。
-
局部变量：在函数体内利用var关键字定义的变量称为局部变量，它仅在该函数体内有效。
-
块级变量：使用let关键字声明的变量称为块级变量，它仅在大括号{}中间有效，如if、 for或while等语句。
匿名函数
匿名函数指的是没有函数名称的函数，介绍JavaScript常见的匿名函数及其使用。
方式一
示例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>匿名函数</title>
</head>
<body>
<script type="text/javascript">
var testFun=function (a,b){
var sum=a+b;
return sum;
}
var sum=testFun(3,4);
alert("sum="+sum);
</script>
</body>
</html>
在该示例中定义函数时并未指定函数的名称并将该匿名函数赋值给变量testFun；所以，我们可通过变量名来调用该匿名函数
方式二
示例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>匿名函数</title>
</head>
<body>
<button id="but">Click Me</button>
<script type="text/javascript">
var button=document.getElementById("but");
button.onclick=function (){
alert('You click the button');
};
</script>
</body>
</html>
在该示例中为按钮设置了事件监听函数用于处理点击事件，该函数正是一个匿名函数！每当按钮被点击时都会调用该函数；这种方式在开发中经常使用。
递归函数
假若函数在其函数体内调用自身，那么这种函数称为递归函数。
示例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>利用递归函数计算阶乘</title>
</head>
<body>
<script type="text/javascript">
function factorial(n) {
if(n == 0){
return 1;
}
if (n == 1) {
return 1;
}
return n * factorial(n - 1);
}
var number = prompt('请您输入非负整数');
number = parseInt(number);
if (isNaN(number)) {
document.write("输入的值不合法");
} else {
var result=factorial(number);
document.write(number + "的阶乘为：" + result);
}
</script>
</body>
</html>
结果如下：
函数的提升
函数的提升与之前我们讲过变量提升非常类似。在JavaScript中函数提升指的是：将函数的定义提升至<script> </script>元素的顶部。
示例如下：
<!DOCTYPE html>
<!-- 本文作者：谷哥的小弟-->
<!-- 博客地址：https://blog.csdn.net/lfdfhl-->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函数提升</title>
</head>
<body>
<script type="text/javascript">
print("Hello JavaScript");
function print(message) {
document.writeln(message);
}
</script>
</body>
</html>
在该实例中，我们之所以可以先调用函数再定义函数就是因为JavaScript自动将函数print的定义提升到了<script> </script>的顶部。所以，该示例等同于如下代码：
<!DOCTYPE html>
<!-- 本文作者：谷哥的小弟-->
<!-- 博客地址：https://blog.csdn.net/lfdfhl-->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函数提升</title>
</head>
<body>
<script type="text/javascript">
function print(message) {
document.writeln(message);
}
print("Hello JavaScript");
</script>
</body>
</html>
如果通过匿名方式定义函数并将函数赋值给变量，那么在该方式下依然会发生函数提升。但是，只提升被赋值的变量而函数定义本身不会被提升。
示例如下：
<!DOCTYPE html>
<!-- 本文作者：谷哥的小弟-->
<!-- 博客地址：https://blog.csdn.net/lfdfhl-->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函数提升</title>
</head>
<body>
<script type="text/javascript">
printMessage("Hello JavaScript");
var printMessage = function(message) {
document.writeln(message);
}
</script>
</body>
</html>
图示如下：
程序运行之后报错。因为匿名函数的本身并没有被提升。所以，此时需将函数的调用置于匿名函数的声明之后。
函数综合练习
在此，我们通过练习的方式巩固函数相关知识。
函数综合练习1:字符串大小写转换
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>函数</title>
</head>
<body>
<h2>字符串大小写转换</h2>
<p>原字符串：<input id="oldString" type="text"></p>
<p>
转换操作：
<input type="button" value="转大写" onclick="deal('upper')">
<input type="button" value="转小写" onclick="deal('lower')">
</p>
<p>新字符串：<input id="newString" type="text"></p>
<script>
function deal(opt) {
var result = document.getElementById('oldString').value;
switch (opt) {
case 'upper':
result = result.toUpperCase();
break;
case 'lower':
result = result.toLowerCase();
break;
}
document.getElementById('newString').value = result;
}
</script>
</body>
</html>
结果如下：
函数综合练习2:利用递归函数计算斐波那契数列第N项的值
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>利用递归函数计算斐波那契数列第N项的值</title>
</head>
<body>
<script type="text/javascript">
function recursion(n) {
if (n < 0) {
return '输入的数字不能小于0';
} else if (n == 0) {
return 0;
} else if (n == 1) {
return 1;
} else if (n > 1) {
return recursion(n - 1) + recursion(n - 2);
}
}
var number = prompt('请您输入非负整数');
number = parseInt(number);
if (isNaN(number)) {
document.write("输入的值不合法");
} else {
var result=recursion(number);
document.write("计算的结果为：" + result);
}
</script>
</body>
</html>
结果如下：
函数综合练习3:简易计算器
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>利用函数实现简易计算器</title>
</head>
<body>
<p>整数1：<input id="num1" type="text"></p>
<p>整数2：<input id="num2" type="text"></p>
<p>
<input type="button" value="两数相加" onclick="calc(add)">
<input type="button" value="两数相减" onclick="calc(sub)">
<input type="button" value="两数相乘" onclick="calc(mul)">
<input type="button" value="两数相除" onclick="calc(div)">
</p>
<p>结果：<input id="result" type="text" readonly></p>
<script>
function calc(methodName) {
var result = document.getElementById('result');
var num1 = parseInt(document.getElementById('num1').value);
var num2 = parseInt(document.getElementById('num2').value);
if (isNaN(num1) || isNaN(num2)) {
alert('请输入数字');
return false;
}
result.value = methodName(num1, num2);
}
function add(num1, num2) {
return num1 + num2;
}
function sub(num1, num2) {
return num1 - num2;
}
function mul(num1, num2) {
return num1 * num2;
}
function div(num1, num2) {
if (num2 === 0) {
alert('除数不能为0');
return '';
}
return num1 / num2;
}
</script>
</body>
</html>
结果如下：
转载：https://blog.csdn.net/lfdfhl/article/details/100697502
查看评论