编程语言
首页 > 编程语言> > JavaScript笔记(函数)

JavaScript笔记(函数)

作者:互联网

函数

一、函数基础

1、函数的定义

将特定的代码片段,抽取成为独立运行的实例,就是函数;

函数好处:代码复用、方便维护、便于理解、使用简单;

2、函数的创建

命名函数

function fn(a,b){     //fn即为函数名
    console.log(a+b);   //调用函数时执行此语句块
}
fn(10,20);        //调用函数并传入参数

匿名函数

//代码运行到定义匿名函数后才可以调用该匿名函数
var fn=function(){
    console.log(arguments.callee);//arguments.callee 就是函数本身
}

自执行函数

(function(){
    //自己执行自己,也是匿名函数
})();

构造函数定义函数

var fn=new Function("a","b","console.log(a+b)");
fn(3,5);

二、作用域与作用域链

1、作用域

作用域就是变量作用的范围,分为全局作用域和局部作用域

作用域就是代码的执行环境,全局执行环境就是全局作用域,函数的执行环境就是私有作用域,它们都是栈内存。

某个执行环境中所有的代码执行完毕后,该环境被销毁,保存在其中的所有变量和函数定义也随之销毁(全局执行环境直到应用程序退出时,如关闭浏览器或网页,才会被销毁)

var a=10;
//函数外为全局作用域,函数外var定义的变量是全局变量
function fn(a){   //参数是局部变量
    //函数内为局部作用域   
    var a=20;  //函数里var定义为局部变量
    console.log(a);//20 优先局部变量,没有再去外面找全部变量
};
console.log(a);//10 无法调用函数内局部变量,打印全局变量10

2、作用域链

作用域链就是执行代码时,会首先在自身函数内找变量,找不到再去外部找,再找不到就去window环境找,这个过程就是作用域链

var a=10;
function fn(){
    function fn1(){
        console.log(a);//10 执行此代码输出a,首先在函数内fn1找变量,找不                到,然后去外部fn函数找,找不到去全部window找,这时找到a=10;                这个过程就是作用域链
    }
}

当代码在一个环境中执行时,会创建变量对象的一个作用域链(作用域形成的链条)

内部环境可以通过作用域链访问所有外部环境,但外部环境不能访问内部环境的任何变量和函数。

三、参数、return

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; //此时o对象中的属性也变成10
          }
  
          var o={a:1};
          fn(o);

arguments参数集

function getValue(){
    console.log(arguments);//arguments就是传进来的4个参数组成的集合
    //当参数不确定时,就可以不设置参数,使用arguments接收
    //arguments.callee就是函数自己也就是getValue函数
    //匿名函数调用自己常用到arguments.callee
    //arguments.callee.caller是调用此函数的函数,也就是fn1函数
}
getValue(1,2,3,4);
function fn1(){
    getValue();
}

return break continue区别

return 只能使用在函数中,函数外不能使用,无视任何内容直接跳出函数

break 用于switch或者循环语句中,跳出当前循环或者锚点循环,或者switch语句,循环外的语句继续执行

continue 仅跳出当前次循环,继续下一次循环,只能用于循环语句中

//生成rgba随机颜色函数,带透明度
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;
        }

四、回调函数,递归

递归或者回调的次数过多,没有阻止递归或者回调的条件,会造成堆栈溢出

1、回调函数

function fn1(f){
    f()//这里f函数称为回调的函数
}
function fn2(){
    console.log("aaa");
}
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);
        }
        getLight(getGreenLight,getYellowLight,getRedLight);
//可以更改函数的回调顺序改变输出结果的顺序

2、递归

函数不断自己调用自己,这样就叫做函数的递归;

递归的本质是函数每次自执行都会复制出一个一样的函数执行,每个复制的函数都有自己的作用域,如没有递归结束,则函数下面语句不执行,知道递归结束后才执行后面语句

 var i=0;
 fn();
function fn(){
   i++;
    // console.log(i);
   if(i<4) fn(); //这里就是再递归,满足条件继续执行自己
   console.log(i);//注意此时会输出四次i=4;因为只有在上面递归完后,才能执行此语句
 } 

function fn(n){
   if(!n) n=1;
   n++;//2
   if(n<5)  fn1(n);//挂起不会往下执行
   return n;//2因为第一次进来n=1,n++之后为2,而递归是复制出一个函数执行,这里是把n作为参数带进去,那么n就是每个复制的函数的局部变量,都只能在自身函数内部调用,此时的fn函数也只能调用到自己的局部变量,也就是n=2;
}
fn();//函数运行完之后,局部变量会被销毁

function fn(n){
   if(!n) n=1;
   n++;//2
   if(n<5) return fn1(n);//挂起不会往下执行,这里使用return把每次复制函数的结果返回给到上一个复制的函数,就会把变量n一步一步向上返回,直到返回给原函数,所以此时return  n 会输出5
   return n; //5

 

标签:function,函数,作用域,JavaScript,笔记,arguments,var,fn
来源: https://www.cnblogs.com/chen52125/p/16387672.html