js函数和作用域知识_js 作用域和函数-CSDN博客

本文链接：https://blog.csdn.net/m0_62697897/article/details/127042675

6.return的作用：函数的返回值，结束函数

7.arguments：函数内置数组

8.作用域

1.函数是什么：实现某个功能的代码块

2.无参数

（1）语法：

<1>声明语法：function函数名（）{调用函数执行代码}

例：

<button onclick="test()">测试按钮</button>

 // 1.声明函数  function  函数名(){调用函数执行代码}
   
    function  test(){
        console.log("我是测试函数");
    }

<2>调用语法：函数名（）

例：

    // 2.调用函数  函数名()
    test();

    var n1=10;
    var n2=20;
    var n3=add(n1,n2);

    var n5=50;
    var n6=60;
    var n7=add(n5,n6);
    console.log(n3,n7);

3.有参数

(1)语法：

<1>声明参数：function 函数名（形参1，形参2，形参3......）

<2>调用函数：函数名（实参1，实参2......）

(2)在函数中内置一个arguments的数组，包含所有传过来的实参

(3)参数在定义时可以设置默认值

例：

 // 有参数的情况  function  函数名(形参){调用函数执行代码} z
    function  add(a,b){
        // return  函数的返回值
        console.log(a,b);
        return  a+b;
        console.log('hello 我是函数');
    }
    // a,b是形参   50，100是实参 
    add(50,100);

4.函数的作用

(1)可以重复利用，提高代码利用率

(2)可以分割作用域

<1>防止命名冲突

<2>释放内存

5.匿名函数（自调用函数）

语法：（function(形参){}）(实参)

例：

   // 匿名函数
    var test1=function(x,y,z){
        var s=x+y+z;
        var l=x+y;
        return [s,l];
    }
    console.log(test1(1,2,3));

6.return的作用：函数的返回值，结束函数

7.arguments：函数内置数组

（1）当形参和实参数量不匹配可以不写形参直接通过arguments接收参数

（2）当参数较多可以使用arguments接收参数

例：

function sum(){
        // console.log(a+b+c+d);
        console.log(arguments);
        var sum=0;
        // 定义初始的和为0
        for(var i=0;i<arguments.length;i++){
            sum=sum+arguments[i];
        }
        console.log(sum);
        return sum;
    }
    sum(2,3,4,5,6,7);
    var h2=document.querySelector('h2');
    h2.innerHTML="当前求和为："+sum(2,3,4,5,6,7);

函数的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>函数</title>
</head>
<body>
    <button onclick="test()">测试按钮</button>
    <h2>求和</h2>
</body>
<script>
    // 函数是什么：实现某个功能的代码块
    // 函数作用：提高代码利用率  分隔作用域  防止命名冲突   释放内存

    // 1.声明函数  function  函数名(){调用函数执行代码}
   
    function  test(){
        console.log("我是测试函数");
    }

    // 2.调用函数  函数名()
    test();

    var n1=10;
    var n2=20;
    var n3=add(n1,n2);

    var n5=50;
    var n6=60;
    var n7=add(n5,n6);
    console.log(n3,n7);
    // 有参数的情况  function  函数名(形参){调用函数执行代码} z
    function  add(a,b){
        // return  函数的返回值
        console.log(a,b);
        return  a+b;
        console.log('hello 我是函数');
        // console.log(a+b);
    }
    // a,b是形参   50，100是实参 
    add(50,100);
    // var x= add(50,100);
    // console.log(x);


    // 匿名函数
    var test1=function(x,y,z){
        var s=x+y+z;
        var l=x+y;
        return [s,l];
    }
    console.log(test1(1,2,3));

    // arguments  函数内置数组
    // 1.当形参和实参数量不匹配  可以不写形参  直接通过arguments接收参数
    // 2.当参数较多  可以使用arguments接收参数
    function sum(){
        // console.log(a+b+c+d);
        console.log(arguments);
        var sum=0;
        // 定义初始的和为0
        for(var i=0;i<arguments.length;i++){
            sum=sum+arguments[i];
        }
        console.log(sum);
        return sum;
    }
    sum(2,3,4,5,6,7);
    var h2=document.querySelector('h2');
    h2.innerHTML="当前求和为："+sum(2,3,4,5,6,7);

</script>
</html>

运行结果：

8.作用域

(1)全局变量：定义在函数外面的变量就是全局变量，整个文档都可以使用（作用域是整个文档）

(2)局部变量：定义在函数内部的变量就是这个函数的局部变量，在函数内部可以使用（作用域是当前函数）

注意：全局变量始终在内存中，局部变量如果没有被其他函数引用的情况下，函数调用后会被释放

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>作用域</title>
</head>
<body>
    
</body>
<script>
    // 全局作用域  局部作用域  
    // 全局变量(函数外面定义的变量就是全局变量)    
    // 局部变量(函数内部定义的变量就是局部变量)
    var nick="吃羊肉";

    function test(){
        nick="hello  羊";
        var n='csdn';
        console.log(n);
    }

    function  test1(){
        var n="SHE";
        console.log(n);
    }

    test();
    test1();
    console.log(nick);
    // console.log(n);

    // 自调用函数   匿名函数  (function(形参){})(实参)
    (function(){console.log("我是自调用函数")})();

    // 回调函数：把函数当作一个参数传到另一个函数中
    function test3(){
        console.log("我是老三");
    }

    function test4(a){
        a();
    }
    test4(test3);

    // 递归函数：在函数本身调用自己
    // 5！(5的阶乘)   5*4*3*2*1
    function  recursive(n){
        if(n===1)  return 1;
        return n*recursive(n-1);
    }
    // n=5  5*4*3*2*1
    console.log(recursive(5));
</script>
</html>

运行结果：