码迷,mamicode.com
首页 > Web开发 > 详细

js函数

时间:2018-08-25 17:31:54      阅读:131      评论:0      收藏:0      [点我收藏+]

标签:表达式   ==   私有变量   on()   ase   ++   调用函数   定义   特性   

函数

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) +"\n"+"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

js函数

标签:表达式   ==   私有变量   on()   ase   ++   调用函数   定义   特性   

原文地址:https://www.cnblogs.com/zhuzq/p/9534593.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!