JS 第四天学习(无参函数、带return函数、闭合函数、作用域、函数封装）)

本文链接：https://blog.csdn.net/JS_xwz/article/details/124158585

JavaScript传参函数和无参函数

1.无参函数

    function func() {
        console.log("无参函数")
    }
    var func2 = function () {
        console.log("无参函数2")
    }

2.传参函数 f(x)=x+1
// 参数：调用方法(函数)时，根据传入的参数的不同，而返回不同的结果。

   // x：形参  形式上的参数    变量名
   function func3(x) {
       console.log(x)  
   }
   // 调用
   func3(1);//1 实参   实际的参数    变量值
   func3(2);//2 实参
   func3(3);
   func3(4);

   // 拼接字符串
   function newStr(str1,str2) {
       console.log(str1+str2)        
   }

   newStr("hello","world");
   newStr("hello","China");
   newStr("hi","Nanjing");
   newStr("你好,","web21");

JavaScript带有返回值的函数

// 04JavaScript带有返回值的函数

    function func(){
        console.log("没有返回值的函数")
    }

    // 调用
    // func();

    // console.log(func());// 打印方法执行后的结果  undefined 没有返回值

    console.log("------------")

    // return 语句   返回值(结果)
    function func2() {
        console.log("带有返回值的函数");
        var x=10;
        return x;
    }
    // func2();

    // console.log(func2());// 10

    // var res=func2();
    // console.log(res);

    // 注意事项  return 之后的代码不执行   函数停止执行
    function func3(params) {
        return "func3";
        console.log("func3")
    }

    // console.log(func3());

    // 应用：return; 空  退出函数

    function func5(x,y) {
        if(x>y){
            console.log(x+y)
        }else{
            return;
        }     
    }

    // func5(1,4);


    function func6(a,b) {
        console.log(a+b)
    }
    func6(10,20);

    // 工作中，经常需要对方法或函数执行的结果进行处理时，就需要使用return语句将结果返回(抛出)

    function func7(a,b) {
        return a+b
    }
    var res2=func7(10,20);
    console.log(res2);

JavaScript的作用域

// 作用域为可访问的变量，对象和函数的集合
全局作用域：全局变量
在函数外定义的变量为全局变量
全局变量有全局作用域：网页中所有的脚本和函数都可以使用

    var num=10;
    console.log(num);
    // 函数
    function func(x) {
        console.log(x)
    }
    func(num);

    // 2.变量没有声明，直接赋值为全局变量
    // 未声明的js变量直接赋值会自动作为window的属性  window是js中顶级变量（对象）
    // window.alert()
    // alert();

    
    function func2() {
        num2=20;
        console.log(num2);
    }
    func2();
    console.log(num2);

// 局部作用域：局部变量
// 变量在函数中声明，变量为局部作用域
// 局部变量:只能在函数内部访问

    // 声明函数
    function funcx() {
        var x=10000;
        console.log(x);
    }
    funcx();
    // console.log(x);// x is not defined

    function funcy() {
        var y=10000;
        return y;
    }
    
    console.log(funcy());// 10000

JavaScript闭包函数

// - 局部作用域：局部变量
// 变量在函数中声明，变量为局部作用域
// 局部变量:只能在函数内部访问

    // 声明函数
    function func1() {
        var x=10000;
        return function() {
            return x;
        }
    }
    var res=func1();//将func1中返回的方法进行储存 
    console.log(res());
    console.log(func1()())

JavaScript自执行函数

// function func(params) {
        
    // }
    // func()

    // 匿名函数
    (function() {
        console.log("自执行函数1")
    })()

    // (function() {
    //     console.log("自执行函数2")
    // }())

JavaScript闭包函数的应用

function func1() {
        var x = 10000;
        return function () {
            return x;
        }
    }
    // var res=func1();//将func1中返回的方法进行储存 
    // console.log(res());

    // 通过window实现闭包函数
    // function func1() {
    //     var x=10000;
    //     function func2() {
    //         return x;
    //     }
    //     // return func2;
    //     window.func3=func2;
    // }
    // func1();
    // console.log(func3());


    // 应用
    // 1.可以读取函数内部的变量
    function func() {
        var a = 100;
        return (function () {
            return a
        })()
    }
    var b=func();
    console.log(b);// 100

    // 2.可以让一个变量的值始终保存在内存中
    function func2() {
        var c=99;
        fAdd=function(){
            c+=1;// c=c+1
        }
        return function(){
            return c;
        }
    }
    var res=func2();
    console.log(res());//99
    fAdd();// c+1
    console.log(res());//100
    fAdd();
    console.log(res());//101



    // 3.应用
    // 红：30  蓝：30

    function func3(){
        var live=30;
        return (function(){
            return live
        })()
    }

    // 游戏开始，红蓝个3条命
    var red=func3();
    var blue=func3();

    red-=1;
    console.log(red,blue);//29 30

JavaScript函数的封装

    // 字面量  不可被改变   重复使用字面量
    // 使用变量将字面量储存起来，直接使用变量

    // 功能函数  方法  
    // 将功能封装为函数，对外提供函数的接口(使用方法)

    // 实现10以内的  + - * /
    // function add(a,b) {
    //     return a+b
    // }
    // // 告诉使用者 add 是一个用来做加法的方法 add(数字1,数字2)
    // function sub(a,b) {
    //     return a-b
    // }
    // function times(a,b) {
    //     return a*b
    // }
    // function devided(a,b) {
    //     return a/b
    // }

    // var res=add(10,20);
    // console.log(res);


    // 封装：相同的地方不变   不同的地方通过参数来表示
    function func(a, b, type) {
        return eval(a + type + b)
    }
    console.log(func(10, 20, "+"))
    console.log(func(10, 20, "-"))
    console.log(func(10, 20, "*"))
    console.log(func(10, 20, "/"))
```**加粗样式**