深入理解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 相关文章推荐
JavaScript 入门·JavaScript 具有全范围的运算符
Oct 01 Javascript
一个JS小玩意 几个属性相加不能超过一个特定值.
Sep 29 Javascript
javascript完美拖拽的实现方法
Sep 29 Javascript
JS实现切换标签页效果实例代码
Nov 01 Javascript
基于jquery实现智能表单验证操作
May 09 Javascript
jquery 实现滚动条下拉时无限加载的简单实例
Jun 01 Javascript
jQuery Mobile漏洞会有跨站脚本攻击风险
Feb 12 Javascript
jQuery实现可编辑表格并生成json结果(实例代码)
Jul 19 jQuery
解决百度Echarts图表坐标轴越界的方法
Oct 17 Javascript
超详细动手搭建一个VuePress 站点及开启PWA与自动部署的方法
Jan 27 Javascript
微信小程序自定义波浪组件使用方法详解
Sep 21 Javascript
Vue-cli打包后如何本地查看的操作
Sep 02 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之数据库操作详解及乱码解决!
2007/01/02 PHP
PHP中的session永不过期的解决思路及实现方法分享
2011/04/20 PHP
php 无限级分类,超级简单的无限级分类,支持输出树状图
2014/06/29 PHP
php版微信返回用户text输入的方法
2016/11/14 PHP
详解如何在云服务器上部署Laravel
2017/06/30 PHP
php实现简单的守护进程创建、开启与关闭操作
2019/08/13 PHP
jquery二级导航内容均分的原理及实现
2013/08/13 Javascript
jquery+css3问卷答题卡翻页动画效果示例
2016/10/26 Javascript
Bootstrap CSS组件之下拉菜单(dropdown)
2016/12/17 Javascript
如何正确理解javascript的模块化
2017/03/02 Javascript
纯js的右下角弹窗实例
2017/03/12 Javascript
JS实现字符串去重及数组去重的方法示例
2018/04/21 Javascript
原生实现一个react-redux的代码示例
2018/06/08 Javascript
JavaScript设计模式之构造函数模式实例教程
2018/07/02 Javascript
微信小程序实现留言板功能
2018/11/02 Javascript
解决vue安装less报错Failed to compile with 1 errors的问题
2020/10/22 Javascript
python动态参数用法实例分析
2015/05/25 Python
python使用Apriori算法进行关联性解析
2017/12/21 Python
django框架事务处理小结【ORM 事务及raw sql,customize sql 事务处理】
2019/06/27 Python
基于Python实现ComicReaper漫画自动爬取脚本过程解析
2019/11/11 Python
pycharm运行scrapy过程图解
2019/11/22 Python
Django 自定义权限管理系统详解(通过中间件认证)
2020/03/11 Python
使用AJAX和Django获取数据的方法实例
2020/10/25 Python
详解python定时简单爬取网页新闻存入数据库并发送邮件
2020/11/27 Python
Html5原生拖拽相关事件简介以及基础实现
2020/11/19 HTML / CSS
教师节演讲稿
2014/05/06 职场文书
教师职位说明书
2014/07/29 职场文书
小学国庆节活动方案策划书
2014/09/16 职场文书
2014年民主评议党员个人总结
2014/09/24 职场文书
政府班子四风问题整改措施思想汇报
2014/10/08 职场文书
个人对照检查剖析材料
2014/10/13 职场文书
高中生期中考试失利检讨书
2014/10/23 职场文书
2015年公共机构节能宣传周活动总结
2015/03/26 职场文书
python实现图片九宫格分割的示例
2021/04/25 Python
详解Node.js如何处理ES6模块
2021/05/15 Javascript
Python 内置函数速查表一览
2021/06/02 Python