如何用es5实现const

本文详细介绍了如何使用ES5的Object.defineProperty方法来模拟ES6中的const关键字,通过设置属性的writable、enumerable和configurable特性,实现了对属性的只读保护。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

最近看到一个面试题
在这里插入图片描述
第一题就把我撂倒了
—— 用ES5实现const,

const – es6中定义制只读常量的关键字。

const PI = 3.141592653

1、对象属性

先看一下这个对象

 var student ={};
    student.name = 'cxx';
    student.age = '16';

然后我们修改一下

 student.age = '16';

我们修改了属性age的值,我们可以修改属性age的值,也可以删除属性age,这些操作称为对象属性的性质。所以如果我们想要设置成const ,把这个属性设置成不能修改的不就可以了吗,所以了解一下属性的性质的修改方法。

2、认识Object.defineProperty()方法。

Object.defineProperty()方法会在一个对象上定义一个新的属性,或者修改一个对象的现有属性,并返回此对象。

需要注意的是:应当直接在Object构造器对象上调用此方法,而不是再任意一个Object类型的实例上调用。

语法如下:

Object.defineProperty(obj, prop, descriptor)

obj
要定义属性的对象
prop
要定义或修改属性名称或symbol
descriptor
要定义或修改属性描述符

Object.defineProperty() 方法可以定义对象属性的数据描述和存储描述,这里我们只讲数据描述符,不对存储描述符讲解,数据描述符有以下选项:

属性描述符说明
value该属性对应的值。可以是任何有效的 JavaScript 值(数值,对象,函数等)。默认为 undefined
get一个给属性提供 getter 的方法,如果没有 getter 则为 undefined .默认为undefined
set一个给属性提供 setter 的方法,如果没有 setter 则为 undefined。当属性值修改时,触发执行该方法 默认为undefined
writable当且仅当该属性的writable为true时,value才能被赋值运算符改变。默认为 false
enumerableenumerable定义了对象的属性是否可以在 for…in 循环和 Object.keys() 中被枚举
Configurableconfigurable特性表示对象的属性是否可以被删除,以及除value和writable特性外的其他特性是否可以被修改

对位const不可修改的属性,我们可以用writable属性来实现

function _const(key, value) {
        const desc = {
            value,
            writable:false
        };

        Object.defineProperty(window, key, desc);

    }

    _const('obj', {a: 1});   //定义obj
    obj.b = 2;               //可以正常给obj的属性赋值
    obj = {}                //抛出错误,提示对象read-only

3、实现const定义

      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 // 报错

参考
1、https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty 2、https://juejin.im/post/6844903745562607623

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值