深入理解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 相关文章推荐
用js实现计算加载页面所用的时间
Apr 02 Javascript
jQuery根据纬度经度查看地图处理程序
May 08 Javascript
js中用window.open()打开多个窗口的name问题
Mar 13 Javascript
javascript 回调函数详解
Nov 11 Javascript
Jquery easyui开启行编辑模式增删改操作
Jan 14 Javascript
Bootstrap自定义文件上传下载样式
May 26 Javascript
AngularJS 模型详细介绍及实例代码
Jul 27 Javascript
使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo
Sep 01 Javascript
jQuery实现移动端手机商城购物车功能
Sep 24 Javascript
用js制作淘宝放大镜效果
Oct 28 Javascript
jQuery、layer实现弹出层的打开、关闭功能
Jun 28 jQuery
Js中将Long转换成日期格式的实现方法
Jun 05 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实现手机归属地查询API接口实现代码
2012/08/27 PHP
PHP file_get_contents设置超时处理方法
2013/09/30 PHP
Laravel 4 初级教程之Pages、表单验证
2014/10/30 PHP
php的4种常见运行方式
2015/03/20 PHP
PHP中使用BigMap实例
2015/03/30 PHP
在WordPress中实现发送http请求的相关函数解析
2015/12/29 PHP
PHP高精确度运算BC函数库实例详解
2017/08/15 PHP
理解Javascript_09_Function与Object
2010/10/16 Javascript
jquery动态更换设置背景图的方法
2014/03/25 Javascript
Javascript学习笔记之 函数篇(二) : this 的工作机制
2014/06/24 Javascript
javaScript中push函数用法实例分析
2015/06/08 Javascript
JS百度地图搜索悬浮窗功能
2017/01/12 Javascript
Vue 2.0在IE11中打开项目页面空白的问题解决
2017/07/16 Javascript
浅析Javascript中双等号(==)隐性转换机制
2017/10/27 Javascript
Vue动态路由缓存不相互影响的解决办法
2019/02/19 Javascript
谈谈我在vue-cli3中用预渲染遇到的坑
2020/04/22 Javascript
python基础教程之五种数据类型详解
2017/01/12 Python
Python排序搜索基本算法之归并排序实例分析
2017/12/08 Python
为什么入门大数据选择Python而不是Java?
2018/03/07 Python
python批量赋值操作实例
2018/10/22 Python
Python实现繁?转为简体的方法示例
2018/12/18 Python
python爬取酷狗音乐排行榜
2019/02/20 Python
基于MSELoss()与CrossEntropyLoss()的区别详解
2020/01/02 Python
Python手动或自动协程操作方法解析
2020/06/22 Python
CSS3 不定高宽垂直水平居中的几种方式
2020/03/26 HTML / CSS
HTML5新增的Css选择器、伪类介绍
2013/08/07 HTML / CSS
HTML5拖拉上传文件的简单实例
2017/01/11 HTML / CSS
极简鞋类,赤脚的感觉:Lems Shoes
2019/08/06 全球购物
提高EJB性能都有哪些技巧
2012/03/25 面试题
工商管理实习生自我鉴定范文
2013/12/18 职场文书
运动会开幕式邀请函
2014/01/22 职场文书
名企HR怎样看待求职信
2014/02/23 职场文书
2014年村计划生育工作总结
2014/11/14 职场文书
2014年图书室工作总结
2014/12/09 职场文书
Python文件的操作示例的详细讲解
2021/04/08 Python
详解SpringBoot异常处理流程及原理
2021/06/21 Java/Android