JavaScript 声明私有变量的两种方式


Posted in Javascript onFebruary 05, 2021

前言

JavaScript并不像别的语言,能使用关键字来声明私有变量。
我了解的JavaScript能用来声明私有变量的方式有两种,一种是使用闭包,一种是使用WeakMap。

闭包

闭包的描述有很多种,比如:
能访问其它函数作用域的函数;
内部函数访问外部函数作用域的桥梁;
......

使用闭包构建私有变量的逻辑在于:
1.在外部函数中声明变量和内部函数;
2.使用内部函数访问或者修改变量值;
3.在外部函数内返回内部函数;

function outside(){
	let val = 123;
	function inside(){
		return val;
	}
	return inside;
}
console.log(outside()());//123

通过我上面的例子能够大致了解使用闭包构建私有变量的逻辑,但是不足以体现私有变量的重要性,一个const变量也能达到上述代码的效果:

//同样的能访问,但是不能修改,达到了上述代码的效果
const val = 123;
console.log(val);//123

接下来的代码,将具体体现私有变量的重要性:

function person(){ 
 let _name = 'unknown';
 let _age = 18;
 let _sex = 'man';

 function setName(name){
  _name = name || 'unknown';
 }

 function getName(){
  return _name;
 }

 function setAge(age){
  if(typeof age === 'number'){
   _age = Math.floor(age);
  }else{
   throw Error("typeof age !== 'number'");
  }
 }

 function getAge(){
  return _age;
 }

 function setSex(sex){
  if(sex === 'man' || sex === 1){
   _sex = 'man';
  }else if(sex === 'woman' || sex === 0){
   _sex = 'woman';
  }else{
   throw Error('input error');
  }
 }

 function getSex(){
  return _sex;
 }

 return {
  setName : setName,
  getName : getName,
  setAge : setAge,
  getAge : getAge,
  setSex : setSex,
  getSex : getSex
 }
}

let xiaoming = person();
let xiaohong = person();
xiaoming.setName('xiaoming');
xiaohong.setName('xiaohong');
console.log('xiaoming name : ' + xiaoming.getName());//xiaoming name : xiaoming
console.log('xiaohong name : ' + xiaohong.getName());//xiaohong name : xiaohong

xiaoming.setAge(19.3333);
xiaohong.setAge('16');//Uncaught Error: typeof age !== 'number'
console.log('xiaoming age : ' + xiaoming.getAge());//xiaoming age : 19
console.log('xiaohong age : ' + xiaohong.getAge());//xiaohong age : 18


xiaoming.setSex(1);
xiaohong.setSex('woman');
console.log('xiaoming sex : ' + xiaoming.getSex());//xiaoming sex : man
console.log('xiaohong sex : ' + xiaohong.getSex());//xiaohong sex : woman

从上面的代码中,可以看出,如果想要设置或者获取 _name、_age、_sex三个变量的值,只能通过固定的 setName、getName、setAge、getAge、setSex、getSex等方法,而在所有的setter方法中,都对形参进行了判断。也就意味着,对对象的所有操作都将在掌控之中,这在某一层面上弱化了JavaScript作为弱类型语言上的一些负面影响。

WeakMap

如果对WeakMap不是很了解的可以先看WeakMap的详细介绍。
这里主要是利用WeakMap的key不可枚举这一知识点。

let nameWeakMap = new WeakMap();
let ageWeakMap = new WeakMap();
let sexWeakMap = new WeakMap();

function person(){
 let _hash = Object.create(null);
 nameWeakMap.set(_hash,'unknown');
 ageWeakMap.set(_hash,18);
 sexWeakMap.set(_hash,'man');
 function setName(name){
  nameWeakMap.set(_hash,name || 'unknown');
 }

 function getName(){
  return nameWeakMap.get(_hash);
 }

 function setAge(age){
  if(typeof age === 'number'){
   ageWeakMap.set(_hash,Math.floor(age));
  }else{
   throw Error("typeof age !== 'number'");
  }
 }

 function getAge(){
  return ageWeakMap.get(_hash);
 }

 function setSex(sex){
  if(sex === 'man' || sex === 1){
   sexWeakMap.set(_hash,'man');
  }else if(sex === 'woman' || sex === 0){
   sexWeakMap.set(_hash,'woman');
  }else{
   throw Error('input error');
  }
 }

 function getSex(){
  return sexWeakMap.get(_hash);
 }

 return {
  setName : setName,
  getName : getName,
  setAge : setAge,
  getAge : getAge,
  setSex : setSex,
  getSex : getSex
 }
}

let xiaoming = person();
let xiaohong = person();
xiaoming.setName('xiaoming');
xiaohong.setName('xiaohong');
console.log('xiaoming name : ' + xiaoming.getName());//xiaoming name : xiaoming
console.log('xiaohong name : ' + xiaohong.getName());//xiaohong name : xiaohong

xiaoming.setAge(19.3333);
xiaohong.setAge('16');//Uncaught Error: typeof age !== 'number'
console.log('xiaoming age : ' + xiaoming.getAge());//xiaoming age : 19
console.log('xiaohong age : ' + xiaohong.getAge());//xiaohong age : 18


xiaoming.setSex(1);
xiaohong.setSex('woman');
console.log('xiaoming sex : ' + xiaoming.getSex());//xiaoming sex : man
console.log('xiaohong sex : ' + xiaohong.getSex());//xiaohong sex : woman

同样达成了构建私有变量的效果。顺便提一句,class中构建私有变量用的就是WeakMap。

结尾

这篇文章只是记录我知道的关于JavaScript构建私有变量的方法以及作用,如有错误和遗漏,欢迎指出,不胜感谢。

以上就是JavaScript 声明私有变量的两种方式的详细内容,更多关于JavaScript 声明私有变量的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
根据分辨率不同,调用不同的css文件
Aug 25 Javascript
JavaScript访问样式表代码
Oct 15 Javascript
Jquery获取和修改img的src值的方法
Feb 17 Javascript
js动态删除div元素基本思路及实现代码
May 08 Javascript
jQuery级联操作绑定事件实例
Sep 02 Javascript
jquery实现submit提交表单
Feb 03 Javascript
JavaScript基础知识之方法汇总结
Jan 24 Javascript
Javascript 引擎工作机制详解
Nov 30 Javascript
JS简单实现移动端日历功能示例
Dec 28 Javascript
微信小程序云开发之模拟后台增删改查
May 16 Javascript
javascript创建元素和删除元素实例小结
Jun 19 Javascript
百度小程序之间的页面通信过程详解
Jul 18 Javascript
node.js文件的复制、创建文件夹等相关操作
Feb 05 #Javascript
Vant+postcss-pxtorem 实现浏览器适配功能
Feb 05 #Javascript
JavaScript代码实现微博批量取消关注功能
Feb 05 #Javascript
js属性对象的hasOwnProperty方法的使用
Feb 05 #Javascript
关于element的表单组件整理笔记
Feb 05 #Javascript
详解JavaScript中的this指向问题
Feb 05 #Javascript
JavaScript事件概念详解(区分静态注册和动态注册)
Feb 05 #Javascript
You might like
Cappuccino 卡布其诺咖啡之制作
2021/03/03 冲泡冲煮
图书管理程序(一)
2006/10/09 PHP
PHP include任意文件或URL介绍
2014/04/29 PHP
详解PHP中的mb_detect_encoding函数使用方法
2015/08/18 PHP
php strftime函数获取日期时间(switch用法)
2018/05/16 PHP
PHP设计模式概论【概念、分类、原则等】
2020/05/01 PHP
js程序中美元符号$是什么
2008/06/05 Javascript
查询绑定数据岛的表格中的文本并修改显示方式的js代码
2009/12/15 Javascript
jQuery UI 应用不同Theme的办法
2010/09/12 Javascript
jquery each()源代码
2011/02/14 Javascript
jQuery隔行变色与普通JS写法的对比
2013/04/21 Javascript
jQuery grep()方法详解及实例代码
2016/10/30 Javascript
网页挂马方式整理及详细介绍
2016/11/03 Javascript
JavaScript两个变量交换值的实现方法
2017/03/01 Javascript
微信小程序提交form操作示例
2018/12/30 Javascript
对layui初始化列表的CheckBox属性详解
2019/09/13 Javascript
Antd下拉选择,自动匹配功能的实现
2020/10/24 Javascript
[41:37]DOTA2北京网鱼队选拔赛——冲击职业之路
2015/04/13 DOTA
不要用强制方法杀掉python线程
2017/02/26 Python
解决pycharm 误删掉项目文件的处理方法
2018/10/22 Python
解决pyinstaller打包pyqt5的问题
2019/01/08 Python
Python数据结构与算法(几种排序)小结
2019/06/22 Python
python图片剪裁代码(图片按四个点坐标剪裁)
2020/03/10 Python
Python连接mysql数据库及简单增删改查操作示例代码
2020/08/03 Python
html5本地存储_动力节点Java学院整理
2017/07/12 HTML / CSS
html5简介及新增功能介绍
2020/05/18 HTML / CSS
机电专业体育教师求职信
2013/09/21 职场文书
采购主管岗位职责
2014/02/01 职场文书
暑期社会实践感言
2014/02/25 职场文书
检查机关领导群众路线教育实践活动个人整改措施
2014/10/28 职场文书
2014年团支部工作总结
2014/11/17 职场文书
公务员考察材料
2014/12/23 职场文书
政审证明范文
2015/06/19 职场文书
公文写作:教你写“建议书”
2019/05/07 职场文书
Pytorch 统计模型参数量的操作 param.numel()
2021/05/13 Python
pytorch实现加载保存查看checkpoint文件
2022/07/15 Python