JavaScript Day4

JavaScript函数的声明

函数的声明

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

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

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

     console.log(func);
 函数的调用 通过函数名调用
 func();
 func();
 func();
 func();

 声明提升？ 
     console.log(i);//undefined
    var i=10;


    console.log(func2); 函数声明也存在提升
    function func2(){

    }

JavaScript命名函数和匿名函数

1.命名函数

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

调用func

 func();//方法+() 代表立即执行

2.匿名函数

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

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

// 通过变量名进行函数的调用
// func3();
// func3();
// func3();

document.onclick=func3;

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

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带有返回值的函数

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闭包函数

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

  声明函数

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