如何在 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下，并赋值value
        Object.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 a
      console.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海洋”，随时与鱼头互动。欢迎！衷心但愿能够碰见你。