Web前端学习 第3章 JavaScript基础教程6 函数基础
原创Web前端学习 第3章 JavaScript基础教程6 函数基础
原创
一、函数的基本概念
函数是一个可执行的语句块，定义的时候不执行，调用的时候执行，使用"函数名()"的形式可以调用函数， 语法如下所示：
1 function fun(){ //定义函数,函数名为fun
2 //函数体
3 }
4 fun(); //调用函数我们先来编写第一个最简单的函数，当这个函数执行的时候会在控制台输出"hello function" 示例代码如下：
1 function fun(){
2 console.log("hello function")
3 }
4 fun(); 在上面的代码中我们定义了一个函数，并调用了一次，这样就会在控制台输出一次“hello function”。我们在编程的过程中，很多代码是需要多次使用的，我们可以把它们写在一个函数中，这样我们每次希望执行这些代码的时候，只需要调用这个函数，而不是复制-粘贴多次代码。
二、参数
下面编写一个函数sum,输出10和20两个数之和 示例代码如下：
1 function sum(){
2 var num1 = 10;
3 var num2 = 20;
4 var result = num1 + num2;
5 console.log(result);
6 }
7 sum();在上面例子中我们调用sum函数，可以成功在控制台输出计算结果，但是函数内部的代码是固定的，虽然可以多次使用，但是每次使用输出的都是10和20的加和，为了让函数更加灵活，我们希望实现一个函数可以计算任意两个数的加和，那么我们就需要了解函数是如何传递参数的。
下面一个简单的例子演示函数如何传递参数 示例代码如下：
1 function fun(str){
2 console.log("hello" + str);
3 }
4 fun("world");在定义函数的括号中，我们添加了一个参数str,这个参数叫做形参。它在函数内部像一个变量一样。但是在函数调用之前他是没有值的。当调用函数的时候，调用函数的括号中我们也添加了一个参数"world"，这个参数叫做实参，他可以是任意数据类型的值。函数被调用后，形参str被赋予了实参"world"的值，然后执行console.log便会在控制台输出"helloworld"
上面的函数有一个形参和一个实参，函数可以传递多个参数，用逗号间隔 示例代码如下：
1 function sum(num1,num2){
2 console.log(num1 + num2);
3 }
4 sum(10,20);当我们调用函数的时候，实参和形参是一一对应的，10对应的是num1,20对应的是num2,函数执行后会在控制台输出10和20的加和。
下面我们来编写一个函数，它有一个正整数参数n，当我们调用函数时，函数会输出包括n在内，1~n所有正整数的加和 示例代码如下：
1 function sum(n){
2 var sum = 0;
3 for(var i = 0;i<=n;i++){
4 sum += i;
5 }
6 console.log(sum);
7 }
8 sum(100);
9 sum(567);我们通过一个函数规定了一种计算方式，我们使用函数的只要输入一个值，函数就会计算出一个准确的结果。
三、返回值
在上面的例子中，我们输入了一个参数，函数就可以在控制台输出我们希望得到的结果，但是在实际开发中，很多情况我们要的不是在控制台输出得到的结果，而单纯的只是为了获取这个值，那么我们就需要用到函数的返回值。
在函数中，我们可以通过return关键字指定一个返回值，函数有了return，当函数被调用的时候就可以把调用的结果赋值给另一个变量了 示例代码如下：
1 function fun1(){
2
3 }
4
5 function fun2(){
6 return "hello fun";
7 }
8
9 var str1 = fun1();
10 var str2 = fun2();
11
12 console.log(str1); //输出undefined
13 console.log(str2); //输出"hello fun"在上面的例子中，函数fun1没有返回值，所有将fun1调用的结果赋值给str1,str1的值为undefined，函数fun2有返回值，返回值是"hello fun"，所以当fun2被调用后，将函数运行的结果赋值给str2,str2的值就是"hello fun"
下面我们来编写一个函数，让函数来计算四则运算的结果
1 function count(num1,sign,num2){
2 var result = 0;
3 switch(sign){
4 case "+":result = num1 + num2;break;
5 case "-":result = num1 - num2;break;
6 case "*":result = num1 * num2;break;
7 case "/":result = num1 / num2;break;
8 default:console.log("请输入真确的操作符")
9 }
10 return result;
11 }
12 console.log(count(10,"*",20));四、函数表达式
1 var functionName=function(arg){
2 //函数体
3 }这种形式看起来好像是常规的变量赋值语句，即创建一个函数并将它赋值给变量functionName。这种情况下创建的函数叫做匿名函数。因为function关键字后面没有标识符。
函数表达式与其他表达式一样，在使用之前必须先赋值；如下面代码就会导致错误；
1 helloworld(); //错误，还未赋值，函数不存在
2
3 var helloworld=function(){
4 console.log("hello world");
5 }有了函数表达式，我们就可以给函数表达式赋值了；如下面代码：
1 var helloworld; //声明
2 if(condition){ //条件
3 helloworld=function(){ //赋值
4 console.log("hello world");
5 }
6 }
7 else{
8 helloworld=function(){ //赋值
9 console.log("你好，世界");
10 }
11 }五、函数声明提升
1 func()
2 function func () {
3 }上例不会报错，正是因为 ‘函数声明提升’，即将函数声明提升（整体）到作用域顶部（注意是函数声明，不包括函数表达式），实际提升后结果同下：
1 // 函数声明提升
2 function func () {
3 }
4 func()六、作用域
在 JavaScript 中, 对象和函数同样也是变量。 在 JavaScript 中, 作用域为可访问变量，对象，函数的集合。 JavaScript 函数作用域: 作用域在函数内修改。
局部作用域
变量在函数内声明，变量为局部作用域。 局部变量：只能在函数内部访问。
1 // 此处不能调用 carName 变量
2 function myFunction() {
3 var carName = "Volvo";
4 // 函数内可调用 carName 变量
5 }因为局部变量只作用于函数内，所以不同的函数可以使用相同名称的变量。 局部变量在函数开始执行时创建，函数执行完后局部变量会自动销毁。
全局变量
变量在函数外定义，即为全局变量。 全局变量有 全局作用域: 网页中所有脚本和函数均可使用。
1 var carName = " Volvo";
2
3 // 此处可调用 carName 变量
4 function myFunction() {
5 // 函数内可调用 carName 变量
6 }如果变量在函数内没有声明（没有使用 var 关键字），该变量为全局变量。 以下实例中 carName 在函数内，但是为全局变量。
1 // 此处可调用 carName 变量
2
3 function myFunction() {
4 carName = "Volvo";
5 // 此处可调用 carName 变量
6 }七、课后练习- 定义一个函数，参数为x，返回值为1至x（包括x）之间所有正整数的加和。
- 定义一个函数 参数为x, 返回值为1至x（包括x）之间所有奇数的加和。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。