如何在 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对 get
跟 set
进行劫持,监听用户对属性进行调用以及赋值时的具体情况,从而实现的双向绑定~~
以上所述就是小编给大家介绍的《如何在 ES5 环境下实现一个const ?》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- 巧用 viper 实现多环境配置
- iOS如何实现API环境自动部署
- 浅谈RASP技术攻防之实战(环境配置与代码实现)
- Golang实现简单爬虫框架(1)——项目介绍与环境准备
- php-fpm环境的一种后门实现
- Linux环境搭建 | VMware下共享文件夹的实现
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
跨平台桌面应用开发:基于Electron与NW.js
【丹】Paul B. Jensen / Goddy Zhao / 2018-3 / 99
《跨平台桌面应用开发:基于Electron与NW.js》是一本同时介绍 Electron和 NW.js的图书,这两者是目前流行的支持使用 HTML、CSS 和 JavaScript 进行桌面应用开发的框架。书中包含大量的编码示例,而且每个示例都是五脏俱全的实用应用,作者对示例中的关键代码都做了非常详细的解释和说明,可让读者通过实际的编码体会使用这两款框架开发桌面应用的切实感受。除此之外,在内容上,......一起来看看 《跨平台桌面应用开发:基于Electron与NW.js》 这本书的介绍吧!