深入理解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 随机展示头像实现代码
Dec 06 Javascript
自定义右键属性覆盖浏览器默认右键行为实现代码
Feb 02 Javascript
js跳转页面方法总结
Jan 29 Javascript
javascript中with()方法的语法格式及使用
Aug 04 Javascript
node.js操作mysql(增删改查)
Jul 24 Javascript
JS组件Bootstrap Table使用实例分享
May 30 Javascript
js前端解决跨域问题的8种方案(最新最全)
Nov 18 Javascript
jQuery操作之效果详解
May 19 jQuery
详解React-Native解决键盘遮挡问题(Keyboard遮挡问题)
Jul 13 Javascript
BootStrap中Table隐藏后显示问题的实现代码
Aug 31 Javascript
element-ui 限制日期选择的方法(datepicker)
May 16 Javascript
JavaScript 如何计算文本的行数的实现
Sep 14 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正则匹配html中带class的div并选取其中内容的方法
2015/01/13 PHP
php打印一个边长为N的实心和空心菱型的方法
2015/03/02 PHP
PHP常用字符串操作函数实例总结(trim、nl2br、addcslashes、uudecode、md5等)
2016/01/09 PHP
php实现无限级分类查询(递归、非递归)
2016/03/10 PHP
Laravel网站打开速度优化的方法汇总
2017/07/16 PHP
laravel 框架执行流程与原理简单分析
2020/02/01 PHP
JavaScript版代码高亮
2006/06/26 Javascript
关于__defineGetter__ 和__defineSetter__的说明
2007/05/12 Javascript
SyntaxHighlighter代码加色使用方法
2008/09/07 Javascript
DIV菜单层实现代码
2010/11/19 Javascript
javascript动画浅析
2012/08/30 Javascript
Mac地址验证的javascript代码
2013/11/09 Javascript
JavaScript设计模式之适配器模式介绍
2014/12/28 Javascript
javascript通过获取html标签属性class实现多选项卡的方法
2015/07/27 Javascript
jquery实现可自动收缩的TAB网页选项卡代码
2015/09/06 Javascript
Javascript实现的简单右键菜单类
2015/09/23 Javascript
javascript下拉列表中显示树形菜单的实现方法
2015/11/17 Javascript
Ajax基础知识详解
2017/02/17 Javascript
详解html-webpack-plugin用法全解
2018/01/22 Javascript
基于Vue渲染与插件的加载顺序的问题详解
2018/03/05 Javascript
element el-input directive数字进行控制
2018/10/11 Javascript
JS实现的tab页切换效果完整示例
2018/12/18 Javascript
node中实现删除目录的几种方法
2019/06/24 Javascript
微信小程序scroll-view点击项自动居中效果的实现
2020/03/25 Javascript
JavaScript实现放大镜效果代码示例
2020/04/29 Javascript
微信小程序清空输入框信息与实现屏幕往上滚动的示例代码
2020/06/23 Javascript
js实现简单商品筛选功能
2021/02/02 Javascript
Python设计模式之门面模式简单示例
2018/01/09 Python
浅谈Tensorflow模型的保存与恢复加载
2018/04/26 Python
CSS3常用的几种颜色渐变模式总结
2016/11/18 HTML / CSS
C,C++的几个面试题小集
2013/07/13 面试题
小学数学教学反思
2014/02/02 职场文书
大家访活动实施方案
2014/03/10 职场文书
亚布力滑雪场导游词
2015/02/09 职场文书
李强优秀员工观后感
2015/06/16 职场文书
详解Java线程池是如何重复利用空闲线程的
2021/06/26 Java/Android