JS函数全析

命名函数创建

    // 在当前函数所在script标签创建时，优先将该函数存储在堆中，并且函数名存储在栈中
    // 当前这个代码所在的script标签的上面的script的标签中任意函数和全局变量都是可以被调用的
    // 但是当前代码所在的script标签下面的script的标签中函数和全局变量是不可以调用的
    // 函数名：驼峰式命名法，首字母一般都是小写，如果该函数是构造函数，函数名首字母需要大写
    // 函数后面的（）是执行当前函数需要传入参数内容
    // {}里面是函数的语句块，当执行函数时，该语句的内容就会被执行
    // function fn(a,b){
    //     console.log(a+b);
    // }

// fn(3,4)

    // 匿名函数
    // 代码运行到定义匿名函数后才可以调用该匿名函数
   /*  var fn=function(){

    } */

   /*  (function(){
        // 自执行函数
    })(); */




    // 构造函数定义函数
    // 可以动态构建函数
    // var fn=new Function("a","b","console.log(a+b)");
    // fn(3,5);

/*
函数外的变量，在函数中可以调用到
var a=10;
function fn(){
console.log(a);
}

    fn();
 */

/*
函数内定义的变量不能被函数外调用
function fn(){
var a=10;
// 在函数内使用var定义的变量就是局部变量
// 在函数外用var定义的变量就是全局变量。
// 不使用var直接给一个变量赋值就是相当于给window增加一个属性，那么这个属性也是全局变量
}
fn();
console.log(a); */

/* var是定义变量，如果在函数中没有用var定义变量，直接使用变量，该变量是全局变量
function fn(){
a=10;
}
fn();
console.log(a); */

//  this===window
// var b=10;

 /* function fn(){
    //  window被省略了,如果没有使用var定义变量，就意味着直接在window对象下增加这个属性
      a=10;
 }
 fn();
 console.log(a); */




/*  var a=10;
 function fn(){
     var a=5;
     console.log(a);//5
    //  有局部变量时，先调用局部变量，没有局部变量才带哦用全局变量
 }

 fn();
 console.log(a);//10 */

/* var a=10;
function fn(){
// 在函数中任意位置使用var定义的变量，在该函数的任意位置都认为该变量是局部变量
console.log(a);//undefined
var a=5;

 }

 fn();
 console.log(a);//10 */



/*  var a=10;
 function fn(){
     var a=20;
    // console.log(a+window.a);
    console.log(a+this.a);
 }
 fn(); */


// function fn(a){
//     // console.log(a);
//     // 参数就是局部变量
// }

// fn(5);

/*

var a=10;
function fn(a){
console.log(a);//5
var a=20;
// 这里相当于重新定义了一个局部变量a
}
fn(5); */

/*
var a=5;
function fn(){
var a=10;
function fn1(){
var b=20;
var a=100;
console.log(a);
}
fn1();
console.log(b);
} */

    /* a(a);//a都是全局变量，下面a=10还没有运行，所以在这里全局变量就是函数a,我们把函数a当前参数填入
    var a=10;//覆盖了函数a，函数a在这里也是全局变量
    function a(a){
        console.log(a);
        var a=10;
    } */
    // a(a);



  /* 
    var a;
    a(a);        
    a=5;
    function a(a){
        console.log(a);
        var a=10;
    } */

function fn(a,b){
// a,b是参数，参数可以是任意内容，如果没有对应填入，该参数就是undefined
// 执行函数时，填入的参数就相当于给参数赋值
// js是一个弱类型语言，因此，参数不能强制约定类型
// ES5中不能设置参数的默认值
console.log(a+b);
}
*/

    // fn(3);
    // 执行函数时填入值与函数参数顺序是一一对应关系



    /*   function fn(obj){
          // 相当于给obj赋值一个o，obj和o的引用地址相同
          // 当修改obj的属性时，全局的o属性也会被修改
          obj.a=10;
      }

      var o={a:1};
      fn(o); */



    /* function fn(obj){
        // 重新设置了obj的新的引用地址
        obj={
            a:3
        }
    }

    var o={a:1};
    fn(o); */

    // 回调函数
    /* function fn(f){
        var a=10;
        f(a);
    }

    function fn1(a){
        console.log(a+10);
    }
    function fn2(a){
        console.log(a+100);
    }  

    function fn3(a){
        console.log(a+1000);
    }  
  
    fn(fn2); */

    // 如果参数的数量不确定，就不设置参数（ES5）;
    /*   function getMaxValue(){
          // console.log(arguments);//ES5以上版本时尽量少用,arguments参数集
          if(arguments.length===0) return;
          var max=arguments[0];
          for(var i=1;i<arguments.length;i++){
              max=max>arguments[i] ? max : arguments[i];
          }
          console.log(max);
      }
      getMaxValue(1,4,7,2,3,10); */

    /*    function getMaxValue(){
           // console.log(arguments.callee);//该函数自己
           // console.log(arguments.callee.caller);
       }

       getMaxValue(1,3,5,7);
*/
    // 递归
    /*  var i=0
     function fn(){
         i++;
         if(i<10) fn();
     }
     fn();
     console.log(i); */

    /* 
            用于匿名函数中调用自身函数
            var i=0;
            (function(){
                i++;
                if(i<10) arguments.callee();
            })();
    
            console.log(i); */


    
            var i=0;
            function fn1(f){
                console.log("a");
                f();
            }
            function fn3(f){
                console.log("c");
                f();
            }
    
            function fn2(){
                // 调用当前函数的环境函数
                // console.log(arguments.callee.caller);
                console.log("b");
                i++;
                if(i<10) arguments.callee.caller(arguments.callee);
            }
            // 耦合
    
            fn3(fn2);




   /*  var w, c;
    init();

    function init() {
        for (var i = 0; i < 50; i++) {
            w = Math.random() * 50 + 50;
            c = randomColor();
            createDiv(w, w, c);
        }
    }

    function createDiv(_width, _height, _color) {
        var str = "";
        str += "<div style='";
        str += "width:" + _width + "px;";
        str += "height:" + _height + "px;";
        str += "background-color:" + _color + ";";
        str += "position:absolute;";
        str += "left:" + Math.random() * 1000 + "px;";
        str += "top:" + Math.random() * 600 + "px;";
        str += "'></div>";
        document.write(str);
    }

    function randomColor() {
        var color = "#";
        for (var i = 0; i < 6; i++) {
            color += parseInt(Math.random() * 16).toString(16);
        }
        return color;
    } */

return 阻断

  /*   var disc=0,bool=false;
    init();
    function init() {
        var div = document.getElementById("div0");
        div.style.width = "50px";
        div.style.height = "50px";
        div.style.backgroundColor = "red";
        div.style.position = "absolute";
        div.style.left="0px";
        div.onclick=function(){
            bool=!bool;
        }
        setInterval(anmiation,16,div);
    }

    function anmiation(div){
        if(!bool) return;
        disc++;
        div.style.left=disc+"px";
    } */

    // return break continue
    // return 只能使用在函数中，函数外不能使用，无视任何内容直接跳出函数
    // break 用于switch或者循环语句中，跳出当前循环或者锚点循环，或者switch语句，循环外的语句继续执行
    // continue 仅跳出当前次循环，继续下一次循环，只能用于循环语句中
    
    // 如果在函数最后一句没有返回值的情况下，尽量不要写return
    /* function fn(){
        for(var i=0;i<10;i++){
            if(i===5) return;
        }
        console.log("a");
    }
    fn(); */
    // return 有时候可以替代break

    // return 返回值
    // 可以允许函数返回一个值，仅一个。。
    /* function fn(){
        return "a";
    } */
    // 函数在执行时，将会返回一个结果，如果函数中没有return，就会返回undefined
    /* var s=fn();
    console.log(s); */


    function randomColor(alpha){
        // 如果没有参数，随机
        alpha=alpha==undefined ? Math.random().toFixed(2) : alpha;
        // 传入的参数转换为数值
        alpha=Number(alpha);
        // 如果传入的参数是非数值，就让透明度为1
        if(isNaN(alpha))alpha=1;
        var color="rgba(";
        for(var i=0;i<3;i++){
            color+=parseInt(Math.random()*256)+",";
        }
        color+=alpha+")";
        return color;
    }

    console.log(randomColor(false));




    // 中文时间,return完成多分支条件语句
    var arr=["零","一","二","三","四","五","六","七","八","九"];

    // console.log(arr[5])
    // var str="123";
    // console.log(str[0],str[1],str[2])


   /*  5 "五";
    10 "十";
    15 "十五";
    20 "二十";
    36 "三十六";
    100 "一百";
    105 "一百零五";
    110 "一百一十";
    135 "一百三十五";
    350 "三百五十"; */

/*
function getCNNumber(n){
if(n<0 || n>1000) return “错误的消息”;
if(n<10) return arr[n];
if(n=10) return “十”;
if(n<20) return “十”+arr[String(n)[1]];
if(n>=100 && n%100=0) return arr[String(n)[0]]+“百”;
if(n>100 && n%10=0) return arr[String(n)[0]]+“百”+arr[String(n)[1]]+“十”;
if(n%10=0) return arr[String(n)[0]]+“十”;
if(n<100) return arr[String(n)[0]]+“十”+arr[String(n)[1]];
if(n%100<10) return arr[String(n)[0]]+“百零”+arr[String(n)[2]];
return arr[String(n)[0]]+“百”+arr[String(n)[1]]+“十”+arr[String(n)[2]];

    }
    console.log(getCNNumber(345)); */

    // return 返回对象
    // 可以返回多个值
  /*   function fn(w,h){
        // var perimeter=(w+h)*2;
        // var area=w*h;
        return {
            perimeter:(w+h)*2,
            area:w*h
        }
    }


    console.log(fn(5,6)); */

/*
function fn(o){
o=o || {};
o.a=10;
o.b=20;
return o;
}

    var obj=fn({a:1});
    console.log(obj); */

    // 每次执行函数创建一个新对象 工厂模式
   /*  function fn(){
        var o={};
        o.a=10;
        o.b=20;
        return o;
    }

    console.log(fn()===fn()); */

    // 单例
   /*  var o;
    function fn(){
        o=o || {};
        o.a=10;
        o.b=20;
        return o;
    }
   
   console.log(fn()===fn());
   console.log(fn()); */


//    返回函数

// 返回函数执行的结果
   /*  function fn(){
        return fn1();
    }
    function fn1(){
        return 1;
    }

    console.log(fn()); */

    // 返回函数体
    // 闭包
  /*   function fn(n){
        return function(m){
            // console.log(n+m);
            return n+m;
        }
    } */
    
//   var f=fn();
//   f();

// console.log(fn(3)(5));

/*
for(var i=0;i<5;i++){
var div=document.getElementById(“div”+i);
div.οnclick=clickhandler;
}
var text=document.getElementById(“text”);

    function clickhandler(){
        // console.log(this.innerHTML);
        text.value=this.innerHTML
    } */

回调函数

/* function callBack(){

    }

    setInterval(callBack,1000); */


   /*  function fn1(f){
        f();
    }

    function fn2(){
        console.log("aaa");
    }

    fn1(fn2); */


   /*  var i=0;
    function fn1(f){
        console.log("a");
        f(fn1);
        console.log(i);
    }

    function fn2(f){
        i++;
        console.log("b");
        if(i<6000) f(fn2);
    }

    fn1(fn2); */
    // 堆栈溢出 递归或者回调的次数过多，没有阻止递归或者回调的条件

实列红绿灯

    function getLight(first,second,third){
        first(second,third);
    }

    function getRedLight(fn,fn1){
       var f=arguments.callee;
        var ids=setTimeout(function(){
            console.log("红灯");
            clearTimeout(ids);
            fn(fn1,f);
        },1000);
    }
    function getYellowLight(fn,fn1){
        var f=arguments.callee;
        var ids=setTimeout(function(){
            console.log("黄灯");
            clearTimeout(ids);
            fn(fn1,f);
        },1000);
    }
    function getGreenLight(fn,fn1){
        var f=arguments.callee;
        var ids=setTimeout(function(){
            console.log("绿灯");
            clearTimeout(ids);
            fn(fn1,f);
        },1000);
    }
    // getRedLight(getYellowLight,getGreenLight);

    getLight(getGreenLight,getYellowLight,getRedLight)