深入理解JavaScript中的块级作用域、私有变量与模块模式

2019-11-20 08:37:50

字体：大中小

来源：转载

供稿：网友

本文详细的介绍了JavaScript中的块级作用域、私有变量与模块模式，废话就不多说了，具体如下：

1.块级作用域(私有作用域)，经常在全局作用域中被用在函数外部，从而限制向全局作用域中添加过多的变量和函数。

(function(count){   for(var i=0;i<count;i++){     console.log(i);//=>0、1、2、3、4   }   console.log(i);//=>5 })(5);

(function(){   var now=new Date();   if(now.getMonth()==0 && now.getDate()==1){     console.log("新年快乐");   }else{     console.log("尽情期待");   } })();

2.私有变量：任何在函数中定义的变量，都可以认为是私有变量，因为不能在函数的外部访问这些变量。

特权方法：有权访问私有变量和私有函数的公有方法称为特权方法。

2.1）在构造函数中定义特权方法：

 function Person(name){   this.getName=function(){     return name;   };   this.setName=function(value){     name=value;   }; } var person1=new Person("Jason"); console.log(person1.getName());//=>Jason person1.setName("gray"); console.log(person1.getName());//=>gray var person2=new Person("Michael"); console.log(person1.getName());//=>gray console.log(person2.getName());//=>Michael person2.setName('Alex'); console.log(person1.getName());//=>gray console.log(person2.getName());//=>Alex

构造函数模式的缺点是针对每个实例都会创建同样一组新方法。

2.2）静态私有变量来实现特权方法

在私有作用域中，首先定义私有变量和私有函数，然后定义构造函数及其公有方法。

 (function(){   //私有变量和函数   var name="";   Person=function(value){     name=value;   };   //特权方法   Person.prototype.getName=function(){     return name;   };   Person.prototype.setName=function(value){     name=value;   } })(); var person1=new Person("Jason"); console.log(person1.getName());//=>Jason person1.setName("gray"); console.log(person1.getName());//=>gray var person2=new Person("Michael"); console.log(person1.getName());//=>Michael console.log(person2.getName());//=>Michael person2.setName('Alex'); console.log(person1.getName());//=>Alex console.log(person2.getName());//=>Alex

3.模块模式：通过为单例添加私有变量和特权方法能够使其得到增强。

如果必须创建一个对象并以某些数据对其进行初始化，同时还要公开一些能够访问这些私有数据的方法，那么就可以使用模块模式。

var application=function(){   //私有变量和函数   var components=[];   //初始化   components.push(new BaseComponent());   //公共接口   return {     getComponentCount:function(){       return components.length;     },     registerComponent:function(){       if(typeof component=="object"){         components.push(component);       }     }   } }();

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：vue.js学习笔记之绑定style样式和class列表

下一篇：jQuery grep()方法详解及实例代码