JavaScript的函数

一、函数的声明

1、变量声明 通过var关键字

var a=10;

2、函数的声明

function 函数名(参数){
函数体
return 返回值
}

通过function关键字声明
func:函数名
x:函数的参数
{}:函数体

 function func(x){
         <!--执行的代码-->
        console.log("这是一个函数")
    }

3、函数的调用 通过函数名调用

func();
func();
func();
func();
调用四次

4、声明提升

 console.log(i);//undefined
 var i=10;

console.log(func2);
<!--函数声明也存在提升-->
function func2(){
}

二、命名函数和匿名函数

1、命名函数

function func(){
        console.log("这是一个命名函数")
    }

调用func
func（）;

2、匿名函数

document.οnclick=function(){
console.log("这是一个点击事件驱动的匿名函数")
}
使用变量将匿名函数进行储存

var func3=function(){
        console.log("通过变量储存的匿名函数")
    }

通过变量名进行函数的调用
func3();
func3();
func3();
document.οnclick=func3;
案例：

function func2(){
         console.log("这是一个被点击事件驱动的命名函数")
     }
     document.onclick=func2;

三、传参函数和无参函数

1、无参函数

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

2、

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

function func3(x) {
        console.log(x)  
    }

3、调用

func3(1);//1 实参 实际的参数
func3(2);//2 实参
func3(3);
func3(4);

4、拼接字符串

function newStr(str1,str2) {
        console.log(str1+str2)        
    }

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

四、带有返回值的函数

1、没有返回值的函数

 function func(){
        console.log("没有返回值的函数")
    }
    <!--调用-->
    func（）;
    <!--打印方法执行后的结果  undefined 没有返回值-->
    console.log(func());

2、带有返回值的函数

return 语句 返回值（结果）

function func2(){
    console.log("带有返回值的函数")；
    var x =10;
    return x;
}
func2();
<!--值为10-->
console.log(func2());

注意事项：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;
    }
}

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

function func7(a,b){
    return a+b
}
var res2=func7(10,20);
console.log(res2);
<!--值为30-->

五、作用域

作用域为可访问的变量、对象和函数的集合

1、全局作用域：全局变量

1、在函数外定义的变量为全局变量
全局变量有全局作用域：网页中所有的脚本和函数都可以使用

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);

2、局部作用域：局部变量

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

<!--声明函数-->
function funcx() {
    var x=10000;
    console.log(x);
}
funcx();
<!-- console.log(x);// x is not defined-->
 console.log(x);// x is not defined
function funcy() {
    var y=10000;
   return y;
}
<!--值为10000-->
console.log(funcy());

六、闭包函数

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

通过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();
<!-- 100-->
console.log(b);

2、可以让一个变量的值始终保存在内存中

    function func2() {
   var c=99;
   fAdd=function(){
       c+=1;// c=c+1
   }
   
return function(){
       return c;
  }
}
var res=func2();
    <!--//99-->
    console.log(res());
    <!--// c+1-->
    fAdd();
    <!--//100-->
    console.log(res());
    fAdd();
    <!--//101-->
    console.log(res());

八、自执行函数

     function func(params) {
        
     }
     func()

     <!--匿名函数-->
    (function() {
        console.log("自执行函数1")
    })()

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

九、函数的封装

是一种函数的功能，编写一个或多个功能，通过函数的方式封装起来，对位就可以只提供简单的函数接口（使用方法）。

字面量 不可被改变 重复使用字面量
使用变量将字面量储存起来，直接使用变量
功能函数 方法
将功能封装为函数，对外提供函数的接口(使用方法)
function add(a,b) {
return a+b
}

封装：相同的地方不变 不同的地方通过参数来表示

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, "/"))