深入理解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对象、属性、事件手册集合方便查询
Jul 04 Javascript
获取当前点击按钮的id用this.id实现
Mar 17 Javascript
在Mac OS下使用Node.js的简单教程
Jun 24 Javascript
Javascript中的作用域和上下文深入理解
Jul 03 Javascript
jquery append 动态添加的元素事件on 不起作用的解决方案
Jul 30 Javascript
BootStrap无限级分类(无限极分类封装版)
Aug 26 Javascript
AngularJs ng-repeat 嵌套如何获取外层$index
Sep 21 Javascript
node.js实现博客小爬虫的实例代码
Oct 08 Javascript
原生js实现弹出层登录拖拽功能
Dec 05 Javascript
详解Vue中一种简易路由传参办法
Sep 15 Javascript
在Node.js下运用MQTT协议实现即时通讯及离线推送的方法
Jan 24 Javascript
js实现自动播放匀速轮播图
Feb 06 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中的登陆login
2007/01/18 PHP
PHP的mysqli_select_db()函数讲解
2019/01/23 PHP
jQuery之ajax技术的详细介绍
2013/06/19 Javascript
Jquery 的outerHeight方法使用介绍
2013/09/11 Javascript
JS动态计算移动端rem的解决方案
2016/10/14 Javascript
JS针对Array的各种操作汇总
2016/11/29 Javascript
jQuery validate插件功能与用法详解
2016/12/15 Javascript
jquery.flot.js简单绘制折线图用法示例
2017/03/13 Javascript
node.js中debug模块的简单介绍与使用
2017/04/25 Javascript
分享vue.js devtools遇到一系列问题
2017/10/24 Javascript
vue中的scope使用详解
2017/10/29 Javascript
浅谈微信小程序flex布局基础
2018/09/10 Javascript
150行代码带你实现微信小程序中的数据侦听
2019/05/17 Javascript
[47:42]Fnatic vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[01:00:30]完美世界DOTA2联赛循环赛 Inki vs Matador BO2第二场 10.31
2020/11/02 DOTA
[01:01:23]完美世界DOTA2联赛PWL S2 Forest vs FTD.C 第一场 11.26
2020/11/30 DOTA
python实现事件驱动
2018/11/21 Python
如何通过雪花算法用Python实现一个简单的发号器
2019/07/03 Python
Python 实现数据结构-堆栈和队列的操作方法
2019/07/17 Python
python爬虫增加访问量的方法
2019/08/22 Python
Django框架ORM数据库操作实例详解
2019/11/07 Python
python 普通克里金(Kriging)法的实现
2019/12/19 Python
python3下pygame如何实现显示中文
2020/01/11 Python
Python列表如何更新值
2020/05/27 Python
Keras SGD 随机梯度下降优化器参数设置方式
2020/06/19 Python
The Beach People美国:澳洲海滨奢华品牌
2018/07/05 全球购物
安德玛比利时官网:Under Armour比利时
2019/08/28 全球购物
经典优秀个人求职信分享
2013/12/12 职场文书
慰问敬老院活动总结
2014/04/26 职场文书
超市店庆活动方案
2014/08/31 职场文书
课内比教学心得体会
2014/09/09 职场文书
运动会广播稿150字(9篇)
2014/09/20 职场文书
校园游戏活动新闻稿
2014/10/15 职场文书
安全教育第一课观后感
2015/06/17 职场文书
2019年图书室自查报告范本
2019/10/12 职场文书
gateway与spring-boot-starter-web冲突问题的解决
2021/07/16 Java/Android