深入理解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运行机制之事件循环(Event Loop)详解
Oct 10 Javascript
jquery中EasyUI实现同步树
Mar 01 Javascript
基于jQuery实现的菜单切换效果
Oct 16 Javascript
Bootstrap中的Dropdown下拉菜单更改为悬停(hover)触发
Aug 31 Javascript
纯JS实现可拖拽表单的简单实例
Sep 02 Javascript
使用jquery给指定的table动态添加一行、删除一行
Oct 13 Javascript
轻松实现jQuery添加删除按钮Click事件
Mar 13 Javascript
你有必要知道的10个JavaScript难点
Jul 25 Javascript
集成vue到jquery/bootstrap项目的方法
Feb 10 jQuery
JavaScript折半查找(二分查找)算法原理与实现方法示例
Aug 06 Javascript
javascript判断一个变量是数组还是对象
Apr 10 Javascript
Vue form表单动态添加组件实战案例
Sep 02 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源代码安装常见错误与解决办法分享
2013/05/28 PHP
Javascript实例教程(19) 使用HoTMetal(5)
2006/12/23 Javascript
javascript开发技术大全-第3章 js数据类型
2011/07/03 Javascript
JS事件在IE与FF中的区别详细解析
2013/11/20 Javascript
js 获取、清空input type=&quot;file&quot;的值(示例代码)
2013/12/24 Javascript
JavaScript中输出标签的方法
2014/08/27 Javascript
jQuery仿天猫实现超炫的加入购物车
2015/05/04 Javascript
基于jQuery实现滚动刷新效果
2017/01/09 Javascript
JS实现数组去重复值的方法示例
2017/02/18 Javascript
详谈Angular路由与Nodejs路由的区别
2017/03/05 NodeJs
vue学习笔记之v-if和v-show的区别
2017/09/20 Javascript
AngularJS实现的省市二级联动功能示例【可对选项实现增删】
2017/10/26 Javascript
解决Mac下安装nmp的淘宝镜像失败问题
2018/05/16 Javascript
react 兄弟组件如何调用对方的方法示例
2018/10/23 Javascript
微信小程序中的canvas 文字断行和省略号显示功能的处理方法
2018/11/14 Javascript
一篇文章弄懂javascript中的执行栈与执行上下文
2019/08/09 Javascript
微信小程序实现一个简单swiper代码实例
2019/12/30 Javascript
javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法
2020/05/14 Javascript
vue开发简单上传图片功能
2020/06/30 Javascript
vue-simple-uploader上传成功之后的response获取代码
2020/09/07 Javascript
JS页面动态绘图工具SVG,Canvas,VML介简介
2020/10/16 Javascript
JavaScript实现轮播图效果
2020/10/30 Javascript
[01:16:16]DOTA2-DPC中国联赛定级赛 RNG vs Phoenix BO3第二场 1月8日
2021/03/11 DOTA
利用Python生成文件md5校验值函数的方法
2017/01/10 Python
python逐行读写txt文件的实例讲解
2018/04/03 Python
基于Python实现定时自动给微信好友发送天气预报
2018/10/25 Python
pytorch 改变tensor尺寸的实现
2020/01/03 Python
HTTP状态码详解
2021/03/18 杂记
美国家喻户晓的保健品品牌:Vitamin World(维他命世界)
2016/08/19 全球购物
计算机相关的自我评价
2014/01/15 职场文书
工程招投标邀请书
2014/01/26 职场文书
优秀语文教师事迹
2014/05/18 职场文书
公务员个人总结
2015/02/12 职场文书
小学生五一劳动节演讲稿
2015/03/18 职场文书
财务会计求职信范文
2015/03/20 职场文书
2015年后勤工作总结范文
2015/04/08 职场文书