js函数

Posted 2021-01-01 冉庆之

函数

Date:2017-07-16 | By Author:Grit

函数定义

var fn = function(){};//函数表达式
function fn1(){};//取名函数
function (){};//匿名函数
fn1();//调用函数

及时函数

//1.国内常用写法
(function(){
    alert();
})()
//2.国外写法，看起来代码块比较独立
(function(){
    alert();
}())
//以下方法也可以执行，但是不推荐使用
//1
!function(){alert()}();
//2
~function(){alert()}();
//3
-function(){alert()}();
//4
+function(){alert()}();

函数特点

1. 匿名函数不能单独出现，需要给名字
2. 函数默认返回undefined
3. 加括号自执行，自己执行的时候 this 执行window对象
4. 事件驱动函数执行，this指向触发事件的对象

5. alert弹出函数的时候，弹出则是函数本身代码块

   传参数

//固传参
        function fn(a,b){//定义形参
            alert("和为："+ (a+b) +"
"+"b的值为："+b);
        }
        fn(30,20);//传入实参
//非固定传参
        function fn(){//定义函数，先不传入参数
            //arguments为默认参数
            var result = 0;
            for(var i=0;i<arguments.length;i++){
                result = result + arguments[i]*1;
            }
            return result;
        }
        alert(fn(1,2,3,4,5));//调用函数

return返回值
返回函数运行结果，默认函数返回undefined

封装函数

function $(idName) {
    return document.getElementById(idName);
}


// 严谨一点的写法
function $(nodeName) {
    if(nodeName && (typeof nodeName).toLowerCase() === "string") {//判断传入是否为字符串类型
        if( document.getElementById(nodeName) ) {//判断是否为空
            return document.getElementById(nodeName);
        }
    }
    
    return "没有获取到元素，请检查传入的是一个正确的字符串id名字";
}

函数作用域

// -------------------- 变量作用域 ----------------------------
// 首先要了解作用域
var a;
alert(a);
a = 1;
/*
    解：
        第一步：声明，找var和function，除了var和function不是作为开头都为执行操作
        第二步：执行。每一个单独的function里面是单独一个作用域

    定义 var a;
    
    执行 alert(a);
         a = 1;
*/



// -------------------- 作用域1： ----------------------------

/*
    定义：var a;
    执行：a=0;
          fn();
                1)定义：var a;  fn(){};
                2)执行：alert(a); // undefined
                        a = 1;


    var a = 0;
    function fn(){
        alert(a);
    };
    fn();



    var a = 0;
    function fn(){
        alert(a); // a在函数作用域中  先找自己的作用域 有没有a  有 undefined
        var a = 1;
    };
    fn();
    fn();  再弹一次 还是undefined  执行完就 没了
*/



// -------------------- 作用域2： ----------------------------
/*  作用域链  （函数域找不跳到大域）

    定义：var a, fn(){...}
    执行：a = 1

          fn(){...}
                    1) 定义：var b;
                    2) 执行：alert(0); // 0
                             a = 1;
                             alert(1); // 

*/
var a = 0;
function fn(){
    alert(a);
    a = 1;
    alert(a);
    var b = 2;
};
fn();




// --------------------- 作用域3：-------------------------
        
/*
    1.定义：var a = 666;  fn(){..};
    2.执行：fn();
            1) var b;
            2) b = 2;

*/

fn();
alert(a); // 666
var a = 1;
function fn(){
    a = 666;
    var b = 2;
};



// ---------------------- 作用域4：-------------------------
/*
    1.定义：var a, fn(){}
    2.执行：
            fn(){};
                    1) var a  b  c(){};
                    2) undefined
                       undefined
                       整块函数
            alert(a)// undefined

*/

fn();
alert(a); // undefined
var a = 0;
function fn(){
    alert(a); // undefined
    alert(b); // undefined
    alert(fn); // 一坨
    var a = 1;
    var b = 2;
    function c(){
        alert(a);
    };
    return c;
};

闭包

函数里面的变量是静态的方式存储，创建之后不会被销毁 ———这种特性在计算机科学文献中称为：闭包

作用

js里闭包是为了让外界可以访问到函数内部的值

优点：

1. 使用私有变量，可以避免命名重复的问题，保护全局作用域污染
   
2. 延长变量生命周期，函数使用完成之后内部的变量不会释放，同全局变量一样不会被清理，下次调用函数 继续使用之前"保存"的局部变量

缺点：

1. 延长变量生命周期，注定就会导致常驻内存得不到及时清理 ==> 滥用闭包则会消耗大量性能

2. 内存得不到释放，可能会导致内存泄漏甚至浏览器崩溃的情况

   例子

function fn1(){
            var a = 0;//定义变量a
            function fn2(){//fn2为闭包函数
                a++;//访问变量a,并运行自加1
                alert(a);//弹出上面的a
            }
            return fn2;//返回fn2函数，这个函数可以访问到上面的变量
        }
        
        var fun=fn1();//定义一个变量，调用fn1(),同时将fn2()传入fun中，可以继续调用
        fun();//1
        fun();//2