深入理解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系列(1) 编写高质量JavaScript代码的基本要点
Jan 15 Javascript
javascript右下角弹层及自动隐藏(自己编写)
Nov 20 Javascript
javascript日期格式化示例分享
Mar 05 Javascript
jQuery修改li下的样式以及li下的img的src的值的方法
Nov 02 Javascript
jQuery插件扩展extend的简单实现原理
Jun 24 Javascript
jquery实现下拉菜单的手风琴效果
Jul 23 jQuery
基于Vue2.X的路由和钩子函数详解
Feb 09 Javascript
JavaScript实现图片懒加载的方法分析
Jul 05 Javascript
详解ESLint在Vue中的使用小结
Oct 15 Javascript
Javascript中绑定click事件的四种方式介绍
Oct 26 Javascript
vue.js实现图书管理功能
Sep 24 Javascript
Vue实现简单的留言板
Oct 23 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接口中interface存在的意义
2013/06/27 PHP
在WordPress中安装使用视频播放器插件Hana Flv Player
2016/01/04 PHP
PHP调用全国天气预报数据接口查询天气示例
2019/02/20 PHP
yii框架结合charjs实现统计30天数据的方法
2020/04/04 PHP
JS模拟面向对象全解(二、类型与赋值)
2011/07/13 Javascript
JS中的构造函数详细解析
2014/03/10 Javascript
javascript每日必学之运算符
2016/02/16 Javascript
NodeJS和BootStrap分页效果的实现代码
2016/11/07 NodeJs
jquery心形点赞关注效果的简单实现
2016/11/14 Javascript
利用js判断手机是否安装某个app的多种方案
2017/02/13 Javascript
js实现五星评价功能
2017/03/08 Javascript
Bootstrap 实现表格样式、表单布局的实例代码
2018/12/09 Javascript
基于vue框架手写一个notify插件实现通知功能的方法
2019/03/31 Javascript
bootstrap-table+treegrid实现树形表格
2019/07/26 Javascript
用JS实现一个简单的打砖块游戏
2019/12/11 Javascript
JavaScript canvas实现跟随鼠标事件
2020/02/10 Javascript
Vue 自适应高度表格的实现方法
2020/05/13 Javascript
js+html+css实现手动轮播和自动轮播
2020/12/30 Javascript
[03:08]迎霜节狂欢!2018年迎霜节珍藏Ⅰ一览
2018/12/25 DOTA
Python中使用SAX解析xml实例
2014/11/21 Python
在Python中append以及extend返回None的例子
2019/07/20 Python
使用Python制作一个数据预处理小工具(多种操作一键完成)
2021/02/07 Python
详解移动端HTML5页面端去掉input输入框的白色背景和边框(兼容Android和ios)
2016/12/15 HTML / CSS
全球知名旅游社区法国站点:TripAdvisor法国
2016/08/03 全球购物
北京银河万佳Java面试题
2012/03/21 面试题
敬老文明号事迹材料
2014/01/16 职场文书
火锅店营销方案
2014/02/26 职场文书
银行办公室岗位职责
2014/03/10 职场文书
目标责任书范文
2014/04/14 职场文书
保研推荐信
2014/05/09 职场文书
2014年营业员工作总结
2014/11/18 职场文书
医药公司采购员岗位职责
2015/04/03 职场文书
2016年党员公开承诺书格式范文
2016/03/24 职场文书
html5 录制mp3音频支持采样率和比特率设置
2021/07/15 Javascript
python可视化之颜色映射详解
2021/09/15 Python
请求模块urllib之PYTHON爬虫的基本使用
2022/04/08 Python