深入理解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 相关文章推荐
关于取不到由location.href提交而来的上级页面地址的解决办法
Jul 30 Javascript
JavaScript Event学习第三章 早期的事件处理程序
Feb 07 Javascript
js下获取div中的数据的原理分析
Apr 07 Javascript
让图片旋转任意角度及JQuery插件使用介绍
Mar 20 Javascript
js随机颜色代码的多种实现方式
Apr 23 Javascript
java和javascript获取word文档的书签位置对比
Jun 19 Javascript
使用AngularJS制作一个简单的RSS阅读器的教程
Jun 18 Javascript
JS验证邮件地址格式方法小结
Dec 01 Javascript
jQuery禁用键盘后退屏蔽F5刷新及禁用右键单击
Jan 22 Javascript
AngularJs Understanding the Model Component
Sep 02 Javascript
bootstrap table小案例
Oct 21 Javascript
Node层模拟实现multipart表单的文件上传示例
Jan 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
支持php4、php5的mysql数据库操作类
2008/01/10 PHP
理解php原理的opcodes(操作码)
2010/10/26 PHP
探讨php中header的用法详解
2013/06/07 PHP
基于Laravel实现的用户动态模块开发
2017/09/21 PHP
Thinkphp 在api开发中异常返回依然是html的解决方式
2019/10/16 PHP
jQuery 位置函数offset,innerWidth,innerHeight,outerWidth,outerHeight,scrollTop,scrollLeft
2010/03/23 Javascript
批量修改标签css样式以input标签为例
2014/07/31 Javascript
jQuery实用技巧必备(上)
2015/11/02 Javascript
AngularJS基础 ng-mouseover 指令简单示例
2016/08/02 Javascript
利用Angular.js限制textarea输入的字数
2016/10/20 Javascript
网站申请不到支付宝接口、微信接口,免接口收款实现方式几种解决办法
2016/12/14 Javascript
详解JavaScript的闭包、IIFE、apply、函数与对象
2016/12/21 Javascript
jQuery实现的背景颜色渐变动画效果示例
2017/03/24 jQuery
微信小程序出现wx.navigateTo页面不跳转问题的解决方法
2017/12/26 Javascript
jQuery封装animate.css的实例
2018/01/04 jQuery
微信小程序实现图片压缩功能
2018/01/26 Javascript
vue以组件或者插件的形式实现throttle或者debounce
2019/05/22 Javascript
深入解析koa之异步回调处理
2019/06/17 Javascript
javascript中的闭包概念与用法实践分析
2019/07/26 Javascript
js实现旋转的星空效果
2019/11/01 Javascript
vue中watch和computed的区别与使用方法
2020/08/23 Javascript
[05:40]DOTA2荣耀之路6:Wings最后进攻
2018/05/30 DOTA
python中类的一些方法分析
2014/09/25 Python
kNN算法python实现和简单数字识别的方法
2014/11/18 Python
python制作企业邮箱的爆破脚本
2016/10/05 Python
完美解决Python2操作中文名文件乱码的问题
2017/01/04 Python
Python实现将一个大文件按段落分隔为多个小文件的简单操作方法
2017/04/17 Python
Python内置函数—vars的具体使用方法
2017/12/04 Python
Python中django学习心得
2017/12/06 Python
使用python爬虫获取黄金价格的核心代码
2018/06/13 Python
python算法与数据结构之冒泡排序实例详解
2019/06/22 Python
解决Pytorch 训练与测试时爆显存(out of memory)的问题
2019/08/20 Python
让你的Python代码实现类型提示功能
2019/11/19 Python
Keras之fit_generator与train_on_batch用法
2020/06/17 Python
DELPHI面试题研发笔试试卷
2015/11/08 面试题
详解Vue slot插槽
2021/11/20 Vue.js