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

栏目: JavaScript · 发布时间: 5年前

内容简介:由于ES5环境没有block的概念,所以是无法百分百实现const,只能是挂载到某个对象下,要么是全局的window,要么就是自定义一个object来当容器Vue目前双向绑定的核心实现思路就是利用Object.defineProperty对
  • 刚刚看了掘金上一篇文章 《作为技术面试官,为什么把你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) {
        if (item === 'a') {
          console.log(window[item]) // undefined
        }
      }
      a = 20 // 报错
复制代码

题外话

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


以上所述就是小编给大家介绍的《如何在 ES5 环境下实现一个const ?》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

LINUX与UNIX Shell编程指南

LINUX与UNIX Shell编程指南

David Tansley / 徐炎、张春萌 / 机械工业出版社 / 2000-6 / 38.00元

本书共分五部分,详细介绍了shell编程技巧,各种UNIX命令及语法,还涉及了UNIX下的文字处理以及少量的系统管理问题。本书内容全面、文字简洁流畅,适合Shell编程人员学习、参考。一起来看看 《LINUX与UNIX Shell编程指南》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具