如何在 ES5 环境下实现一个const ？

作者：陈大鱼头

github： KRISACHAN

前言

刚刚看了掘金上一篇文章《作为技术面试官，为什么把你pass了》，里面第一题就是用es5实现const，据作者反馈 这一题所有的面试者都没有回答出来，感觉挺可惜的，其实这是一道比较简单的题目，但是由于涉及到了一些Object对象属性描述符的知识，这些描述符往往用到的场景不多，所以不容易记住。

属性描述符：

对象里目前的属性描述符有两种：

数据描述符：具有值的属性
存取描述符：由getter与setter函数对描述的属性

描述符功能：

数据描述符与存取描述符皆可修改:

configurable：当前对象元素的属性描述符是否可改，是否可删除
enumerable：当前对象元素是否可枚举

唯有数据描述符可以修改：

value: 当前对象元素的值
writable：当前对象元素的值是否可修改

唯有存取描述符可以修改：

get：读取元素属性值时的操作
set：修改元素属性值时的操作

描述符可同时具有的键值：

	configurable	enumerable	value	writable	get	set
数据描述符	Yes	Yes	Yes	Yes	No	No
存取描述符	Yes	Yes	No	No	Yes	Yes

const 实现原理

由于ES5环境没有block的概念，所以是无法百分百实现const，只能是挂载到某个对象下，要么是全局的window，要么就是自定义一个object来当容器

      var __const = function __const (data, value) {window.data = value // 把要定义的data挂载到window下，并赋值valueObject.defineProperty(window, data, { // 利用Object.defineProperty的能力劫持当前对象，并修改其属性描述符enumerable: false,configurable: false,get: function () {return value},set: function (data) {if (data !== value) { // 当要对当前属性进行赋值时，则抛出错误！throw new TypeError('Assignment to constant variable.')} else {return value}}})}__const('a', 10)console.log(a)delete aconsole.log(a)for (let item in window) { // 因为const定义的属性在global下也是不存在的，所以用到了enumerable: false来模拟这一功能if (item === 'a') { // 因为不可枚举，所以不执行console.log(window[item])}}a = 20 // 报错
复制代码

题外话

Vue目前双向绑定的核心实现思路就是利用Object.defineProperty对get跟set进行劫持，监听用户对属性进行调用以及赋值时的具体情况，从而实现的双向绑定~~

如果你、喜欢探讨技术，或者对本文有任何的意见或建议，你可以扫描下方二维码，关注微信公众号“鱼头的Web海洋”，随时与鱼头互动。欢迎！衷心希望可以遇见你。

如何在 ES5 环境下实现一个const ？相关推荐

如何在Windows环境下的VS中安装使用Google Protobuf完成SOCKET通信
http://blog.csdn.net/whuancai/article/details/11994341 如何在Windows环境下的VS中安装使用Google Protobuf完成SOCKET通 ...
如何在Mac环境下搭建svn服务器端环境
为什么80%的码农都做不了架构师?>>> 在Windows环境中,我们一般使用TortoiseSVN来搭建svn环境.在Mac环境下,由于Mac自带了svn的服务器端和客户端功 ...
KDE应用如何在GNOME环境下运行？
KDE应用如何在GNOME环境下运行? 2014/03/19 | 分类: IT技术 | 0 条评论 | 标签: GNOME, KDE 分享到:1 本文由伯乐在线 - honpey 翻译自 howto ...
如何在 Windows 环境下配置 PHP 开发运行环境
我们都知道 PHP 运行需要的环境通常被称为 AMP. 其中 A 是 Apache 应用服务器,M 是 Mysql,P 就是 PHP 了. 实际上,很多人可能会使用一个测试 Mysql,但是针对一些小 ...
如何在UBUNTU环境下使用GAPPProxy
如何在UBUNTU环境下使用GAPPProxy 目前天朝对于网络这个大通道管理的很严谨,于是我们这些把网站流浪在海外的人们吃尽了苦头,尤其是YOUTUB完全不能访问最郁闷,在WINDOWS下大家可能用 ...
如何在IIS环境下布置https
昨天各位小伙伴都很开心的领取了自己的SSL证书,但是大部分小伙伴却不知道如何部署,也许是因为第一次接触SSL这种高端的东西吧,不过个人觉得就是懒懒懒...本来小编也挺懒的,但是答应了各位小伙伴的,那么 ...
如何在linux环境下搭建Tor代理服务器
如何在linux环境下搭建Tor代理服务器一.简介首先, Tor官方提供已不再提供单独的Tor内核下载,只提供集成了Tor内核的Tor-Browser下载.Tor Browser 内置了Tor,f ...
第二课如何在WINDOWS环境下搭建以太坊开发环境
[本文目标] 根据本文指导,可以在WINDOUWS环境下完成以太坊智能合约部署前的比较环境准备. [技术收获] 如何在WINDOW(笔者以WINDOWS 10为例)环境搭建以太坊开发环境,按照以下安装 ...
r语言在linux怎么实现,如何在linux环境下使用r语言
如何在linux环境下使用r语言真朱丶379 | 浏览 1974 次发布于2015-12-23 13:05 最佳答案 1.下载 wget http://mirror.bjtu.edu.cn/cra ...

如何在 ES5 环境下实现一个const ？

前言

属性描述符：

对象里目前的属性描述符有两种：

描述符功能：

数据描述符与存取描述符皆可修改:

唯有数据描述符可以修改：

唯有存取描述符可以修改：

描述符可同时具有的键值：

const 实现原理

题外话

如何在 ES5 环境下实现一个const ？相关推荐

最新文章

热门文章