JavaScript(七)-函数

一、命名函数

function abc(){
        命名函数
}

定义在函数中的内容，不会自动执行；
函数 将代码变成语句块的形式，通过调用函数名，可以完成该语句块所有语句；

函数命名

1.函数名称，除了构造函数外，其他的函数名称必须小写字母开始，数字字母下滑线组成，驼峰式命名
2.和变量名相同
3.函数后面()指函数的进入函数时带入参数，参数就相当于变量，数量和名字可以自己定义
4.函数的后面｛｝里面是正式函数内的所有语句块，当执行函数时，就会执行｛｝中内容

function abc(参数){
     console.log("aaa");
}

随机换颜色函数：

function randomColor(){
            var col="#";
            for(var i=0;i<6;i++){
                //随机求0-15之间的数值转换为整数，然后在转换为16进制的字符串
                col+=parseInt(Math.random()*16).toString(16);
            }
            div1.style.backgroundColor=col;
        }
        var div1=document.getElementById("div1");
        div1.onclick=function(){
            randomColor();
        }

参数：

function sum(v1,v2,type){
            switch(type){
                case "+":
                    console.log(v1+v2);
                    break;
                case "-":
                    console.log(v1-v2);
                    break;
                case "*":
                    console.log(v1*v2);
                    break;
                case "/":
                    console.log(v1/v2);
                    break;
                case "%":
                    console.log(v1%v2);
                    break;
            }
        }
        var a=5;
        var b=2;
        sum(a,b,"*");//严格按照参数的顺序填入

1.命名函数，函数本身是一个对象，函数会被存在堆中
意味着：

function abc(){}
var fn=abc;//把abc的对象给fn
fn();//就是调用abc，（）是执行abc，abc是函数名，abc()是执行abc函数

2.命名函数被存储在堆中，在当前代码开始的时候就会被存储在堆中，并且生产一个以函数名命名的全局变量执行这个堆中引用函数地址，不需要考虑函数声明的位置
3.函数对象是什么时候定义的？
编译型语言：代码写好后，编译成计算机识别的内容执行;c
解释性语言：一边解释一边执行，javascript

当执行到当前的script标签时，预先将当前script标签中的所有命名函数先存储在堆中，并且在栈中给它定义函数名引用该函数地址；
在这里script标签中的函数一旦创建成功，后面所有的script标签都可以调用该函数

二、匿名函数

var abc=function(){
           匿名函数
}

1.当使用匿名函数时，只有在当前代码执行到赋值给匿名函数变量时，才拥有了该函数，才可以在后面调用
2.匿名函数没有名字；
3.可以设置给一个变量或一个对象的属性

abc();//会报错

var abc=function(){
    console.log("bbb");
}
abc();

4.命名函数可以在函数定义前或之后执行，但是匿名函数只能在函数定义之后执行

自执行匿名函数

缺点：
1.自执行函数，因为没有名字，只能执行一次，无法再次调用
2.内存泄漏

(function(){
    console.log("bbb");
})();//自动创建一个函数，并且执行
//下面这个也是自执行函数
~function(){
    console.log("bbb");
}();

div.onclick=function(){
}

var obj={
	a:1,
	b:2,
	c:function(){
		console.log("ccc");
	}
}
console.log(obj.a);//1
obj.c();//调用匿名函数

三、构造函数

缺点：
1.运行速度慢，效率低，因为需要将所有的字符串转换为代码

var abc=new Function();

//构造函数中，前面的内容就是这个创造函数的所有参数，最后一个内容就是这个函数执行语句
//要求所有内容都必须是字符串
var fn=new Function("a","b","console.log(a+b)");
//调用
fn(4,5);
即：
function fn(a,b){
	console.log(a+b);
}

四、函数的参数

参数，参数就是函数执行所需要外部提供的内容

function abc(n,m){
	//函数名后面括号里的内容是一个变量，这种变量叫做参数
	//参数名起名规则和变量名类似，但是有时候可以用下划线起头
	//如果有多个参数时，就需要使用逗号分隔
	//n是形参，形容参数
	//在函数外不要调用该函数的参数
}
abc(5);
//执行函数时，需要带入指定参数的值
//指定参数的值叫做实参（实际的参数内容）
//形参有几个，执行函数时，实参就需要填几个
//不填入参数也可以执行，但是这种方式就相当于给形参定义值为undefined；如果只填入一个，则代表第一个赋值，剩下的为undefined
//参数传值是按照顺序赋值的，所以必须按照顺序传值
//如果有的参数不想传入值，则给他undefined;abc(undefined,10);
//n,m这个形参的范围仅在当前语句块中
console.log(n,m);//n,m没有定义

//如果出现参数的个数不确定，我们可以不定义参数
function getSum(){
}
getSum(1,2,3);
getSum(4,5,6,7);

function fn1(n){
            // console.log(n);//1
            n++;
        }
        var s=1;
        fn1(s);//执行fn时，将s变量的值传入到函数fn1中，赋值给n
        console.log(s);//1



        var obj={a:1};
        function fn2(o){
            o.a++;
        }
        fn2(obj);
        console.log(obj);//2
        //传参传入的是对象，变量是对象，变量的值就是这个对象的引用地址
        //当传参时将引用地址赋值给o，因此，o和obj的引用地址相同，是同一个对象
        //所以修改了o.a的值，obj.a的也被修改了

// a和b就是参数,形参
 function getValue(a,b){
        //     if(typeof a!=="number") return;
        //     if(typeof b!=="number") return;
        //     // if(a.constructor!==Number) return;
        //	a.constructor是a的构造函数
        //     console.log(a,b);
        // }
        // 带入参数叫做实参
        // getValue(0,5);//这种行为带参,按照函数的带参顺序分别赋值给参数
        // js是弱类型语言，不需要规定类型
        // 函数中可能会根据带入的参数类型不同而产生错误

            // 带参时给的比参数多，多出来的没有用
            // 带参时给的比参数少，没给赋值的参数都是undefined

            // 任何参数都需要表意

function getValue(value1,value2,type){
            //快速转换为数值型
            value1-=0;
            value2-=0;
            if(type===undefined) type="+";//给入默认参数值
            if(isNaN(value1) || isNaN(value2)) return;
            var sum;
           switch(type){
               case "+":
               sum=value1+value2;
               break;
               case "-":
               sum=value1-value2;
               break;
               case "*":
               sum=value1*value2;
               break;
               case "/":
               sum=value1/value2;
               break;
               case "%":
               sum=value1%value2;
               break;
               default:
               sum="错误的计算类型";
           }
           console.log(sum);
        }

        getValue(3,5)

参数可以让函数产生多样性变化，让函数处理的并不是一个固定的内容，把这种函数成为抽象函数

function setHTML(tagName,count){
            var str = "";
            var bool = false;
            switch(tagName){
                case "br":
                case "hr": 
                case "img": 
                case "input": 
                case "meta": 
                case "link":
                bool = true;
            }
            for(var i = 0;i < count;i++){
                str += "<" + tagName + ">" + (bool ? "" : "</" + tagName + ">");
            }
            document.body.innerHTML += str;
        }
        setHTML("div",5);
        setHTML("input",3);

function setValue(a,b){
            a.a=10;//a和obj引用地址相同，引用地址中属性改变就会引起对应变量改变
            b.b=20;
            // a={a:10};//a和obj 是相同的引用地址，而不是值，如果引用地址被重新赋值，就意味着和以前的引用地址无关了，但是a和b是局部变量
            // b={b:20};
            console.log(a.a+b.b);
        }

        var obj={
            a:1
        }
        var o={
            b:2
        }
      
        setValue(obj,o);//30 30
        console.log(obj,o);//{a:10} {b:20}/{a:1} {b:2}

函数也可以作为参数带入

function setValue1(fn){
        fn();//回调函数
        // 如果参数是函数时，这个代码中不关注参数具体是哪个函数，直接执行
    }