js的自执行函数/闭包/命名空间

责编:menVScode 2017-08-29 22:34 阅读(961)

        自执行函数:()(),前面的括号是表达式,通常是一个匿名函数,如果是其他会报错,后面的括号是操作符,是一个函数表达式。执行步骤:1、定义匿名函数,2、调用,3、销毁(前提不是闭包)。

        自执行函数的特点

        自执行函数是现代js框架里最主要的基础设施,避免变量被污染。

        自执行函数的运用

//jquery
(function(root){  
   //jQuery 局部变量  
 var jQuery=function(){

 }
 root.jQuery=jQuery;
})(window);
console.log(jQuery);
// Vue
(function(root,fatory){
    root.Vue=fatory();
})(window,function(){   //匿名函数,也可以是数组、对象等    奇淫技巧
			//将匿名函数作为工厂函数存在
 var Vue=function(){

     }
     return Vue;
});
console.log(Vue); 

       

        闭包

        闭包就是函数在创建的时候,允许自身函数访问自身函数之外的作用域外的变量。

        (函数就是闭包;闭包就是函数套函数)

var result="hello max";  //result  声明在全局作用域中
function fn(){  // 声明全局作用域中
     console.log(result); //局部作用域
}
fn();

        闭包例子1

function fn(){     //  创建局部作用域    父函数
    var result="hello  max";   //局部变量
    function fn1(){     //创建局部作用域   子函数
      	console.log(result)   //result
    }
    fn1();
}
fn(); // hello max

QQ截图20170829221753

        闭包例子2

function fn(){     //  创建局部作用域    父函数
    var result="hello  max";   //局部变量 
    return function(){  //  创建局部作用域
       	 console.log(result);
    }
}
fn()(); // hello max

        闭包:两个作用域之间有依赖关系,下层作用域能访问上层作用域中的变量【作用域链】,闭包是在作用域链之上一个升级,并且保证上一级作用域不能被销毁【缓存 result 】。


        命名空间

        函数可以叫为命名空间。 命名空间可以管理代码库。

var A={   //代码库
      util:{    //工具
         xxx:function(){},
         x001:{

         }
      },
      common:{  //公共
         xxx:function(){},
         x002:{

         }
      },
      ajax:{  //ajax
        get:function(){alert(1)},
        set:function(){alert(2)}
      },
      others:{  //其他
         xxx:function(){}
      }
};
//调用方式
console.log(A.ajax.get());
//修改代码仓库的方法
A.ajax.get=function(){
     console.log("max");
}

        但是上方的代码有一个缺点,就是外界可以随时修改代码库的方法和属性,不安全。我们要实现外界能访问代码库的方法,但是不能修改他们。

        利用闭包原理来实现(封装静态变量的思想)

var conf=(function(){
      //私有成员
      var con={
            max:1000,
            min:100
	   }
      function util(){

      }
      function others(){
	   	
      }

      return {
	  //公开的方法
	  get:function(name){
                return  con[name]?con[name]:null;
	  },
	  util:util,
	  others:others
      }
})();
console.log(conf);
console.log(conf.get('max'));


前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码