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


Posted in Javascript onOctober 31, 2016

本文详细的介绍了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); 
      } 
    } 
  } 
}();

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
filemanage功能中用到的lib.js
Apr 08 Javascript
jQuery编辑器KindEditor4.1.4代码高亮显示设置教程
Mar 01 Javascript
js获得鼠标的坐标值的方法
Mar 13 Javascript
jQuery判断密码强度实现思路及代码
Apr 24 Javascript
jQuery实现等比例缩放大图片让大图片自适应页面布局
Oct 16 Javascript
javascript自动给文本url地址增加链接的方法分享
Jan 20 Javascript
javascript实现点击商品列表checkbox实时统计金额的方法
May 15 Javascript
微信小程序 tabs选项卡效果的实现
Jan 05 Javascript
基于jQuery实现文字打印动态效果
Apr 21 jQuery
jQuery Ajax async=&gt;false异步改为同步时,解决导致浏览器假死的问题
Jul 22 jQuery
weui中的picker使用js进行动态绑定数据问题
Nov 06 Javascript
vue的$http的get请求要加上params操作
Nov 12 Javascript
jQuery grep()方法详解及实例代码
Oct 30 #Javascript
webix+springmvc session超时跳转登录页面
Oct 30 #Javascript
js获取时间函数及扩展函数的方法
Oct 30 #Javascript
jquery ajax后台返回list,前台用jquery遍历list的实现
Oct 30 #Javascript
浅谈JS函数定义方式的区别
Oct 30 #Javascript
基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询
Oct 30 #Javascript
原生js代码实现图片放大境效果
Oct 30 #Javascript
You might like
php数组应用之比较两个时间的相减排序
2008/08/18 PHP
php echo()和print()、require()和include()函数区别说明
2010/03/27 PHP
centos 5.6 升级php到5.3的方法
2011/05/14 PHP
php生成略缩图代码
2012/07/16 PHP
Windows下Apache + PHP SESSION丢失的解决过程全纪录
2015/04/07 PHP
JavaScript操作XML实例代码(获取新闻标题并分页,并分页)
2010/05/25 Javascript
jqgrid 简单学习笔记
2011/05/03 Javascript
jQuery EasyUI API 中文文档 - Spinner微调器使用
2011/10/21 Javascript
常见JS效果之图片减速度滚动实现代码
2011/12/08 Javascript
html超链接打开窗口大小的方法
2013/03/05 Javascript
JavaScript获取和设置CheckBox状态的简单方法
2013/07/05 Javascript
jtable列中自定义button示例代码
2013/11/21 Javascript
Jquery 切换不同图片示例代码
2013/12/05 Javascript
javascript与有限状态机详解
2014/05/08 Javascript
详解JavaScript基本类型和引用类型
2015/12/09 Javascript
jQuery基于ID调用指定iframe页面内的方法
2016/07/06 Javascript
RequireJS 依赖关系的实例(推荐)
2017/01/21 Javascript
nodejs个人博客开发第五步 分配数据
2017/04/12 NodeJs
使用JS在浏览器中判断当前网络连接状态的几种方法
2017/05/05 Javascript
[js高手之路]图解javascript的原型(prototype)对象,原型链实例
2017/08/28 Javascript
python爬取安居客二手房网站数据(实例讲解)
2017/10/19 Javascript
3分钟了解vue数据劫持的原理实现
2019/05/01 Javascript
微信小程序云开发实现数据添加、查询和分页
2019/05/17 Javascript
jquery检测上传文件大小示例
2020/04/26 jQuery
Python中给List添加元素的4种方法分享
2014/11/28 Python
python实现共轭梯度法
2019/07/03 Python
python把ipynb文件转换成pdf文件过程详解
2019/07/09 Python
python实现12306登录并保存cookie的方法示例
2019/12/17 Python
解决Python中导入自己写的类,被划红线,但不影响执行的问题
2020/07/13 Python
优衣库英国官网:UNIQLO英国
2016/12/25 全球购物
如果NULL和0作为空指针常数是等价的,那我到底该用哪一个
2014/09/16 面试题
电大毕业自我鉴定
2014/02/03 职场文书
机械制造毕业生求职信
2014/03/03 职场文书
听证通知书
2015/04/24 职场文书
食堂卫生管理制度
2015/08/04 职场文书
使用Oracle跟踪文件的问题详解
2021/06/28 Oracle