深入理解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 相关文章推荐
C#中TrimStart,TrimEnd,Trim在javascript上的实现
Jan 17 Javascript
jQuery如何获取同一个类标签的所有值(默认无法获取)
Sep 25 Javascript
谈谈JavaScript中浏览器兼容问题的写法小议
Dec 17 Javascript
微信小程序 高德地图SDK详解及简单实例(源码下载)
Jan 11 Javascript
原生js获取浏览器窗口及元素宽高常用方法集合
Jan 18 Javascript
JS中cookie的使用及缺点讲解
May 13 Javascript
基于Bootstrap模态对话框只加载一次 remote 数据的解决方法
Jul 09 Javascript
深入理解Vue官方文档梳理之全局API
Nov 22 Javascript
vue与vue-i18n结合实现后台数据的多语言切换方法
Mar 08 Javascript
angular6根据environments配置文件更改开发所需要的环境的方法
Mar 06 Javascript
解决vant框架做H5时踩过的坑(下拉刷新、上拉加载等)
Nov 11 Javascript
JavaScript 事件捕获冒泡与捕获详情
Nov 11 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
UCenter Home二次开发指南
2009/05/28 PHP
php Xdebug的安装与使用详解
2013/06/20 PHP
PHP遍历目录并返回统计目录大小
2014/06/09 PHP
PHP Hash算法:Times33算法代码实例
2015/05/13 PHP
PHP中strpos、strstr和stripos、stristr函数分析
2016/06/11 PHP
JavaScript之自定义类型
2012/05/04 Javascript
javascript实现避免页面按钮重复提交
2015/01/08 Javascript
javascript基本语法
2016/05/31 Javascript
实例讲解JavaScript中instanceof运算符的用法
2016/06/08 Javascript
Javascript动画效果(3)
2016/10/11 Javascript
JavaScript三种绑定事件方式及相互之间的区别分析
2017/01/10 Javascript
JavaScript中数组的各种操作的总结(必看篇)
2017/02/13 Javascript
Vue2.0 vue-source jsonp 跨域请求
2017/08/04 Javascript
利用vue + element实现表格分页和前端搜索的方法
2017/12/25 Javascript
vuejs实现标签选项卡动态更改css样式的方法
2018/05/31 Javascript
详解angular部署到iis出现404解决方案
2018/08/14 Javascript
基于form-data请求格式详解
2019/10/29 Javascript
vue中使用vue-print.js实现多页打印
2020/03/05 Javascript
[45:16]完美世界DOTA2联赛循环赛 IO vs FTD BO2第二场 11.05
2020/11/06 DOTA
[01:01]2020完美高校联赛(秋)西安落幕
2021/03/11 DOTA
Python实现的爬取百度文库功能示例
2019/02/16 Python
Python GUI学习之登录系统界面篇
2019/08/21 Python
运行tensorflow python程序,限制对GPU和CPU的占用操作
2020/02/06 Python
tensorflow 环境变量设置方式
2020/02/06 Python
简单了解django文件下载方式
2020/02/10 Python
python cv2.resize函数high和width注意事项说明
2020/07/05 Python
Java 中访问数据库的步骤?Statement 和PreparedStatement 之间的区别?
2012/06/05 面试题
护士自荐信怎么写
2013/10/18 职场文书
观看《永远的雷锋》心得体会
2014/03/12 职场文书
房产转让协议书
2014/04/11 职场文书
大专生找工作自荐书
2014/06/10 职场文书
岗位安全生产责任书
2014/07/28 职场文书
2015年项目经理工作总结
2015/04/30 职场文书
优秀创业计划书分享
2019/07/19 职场文书
Python数据类型最全知识总结
2021/05/31 Python
CSS实现单选折叠菜单功能
2021/11/01 HTML / CSS