JS ES5创建常量详解

 更新时间:2022年07月01日 08:47:06   作者:德育处主任   
这篇文章主要介绍了JS ES5创建常量详解,文章围绕主题展开详细的内容介绍,具有一定的参考价值,感兴趣的小伙伴可以参考一下

前言

ES6 刚推出的时候,letconst应该是大多数人学习ES6的第一个知识点。

其中const可以用来定义 常量 ,将不需要改变的数据定义成一个常量。

但其实在ES6之前我们也是有办法定义常量的。

ES 5 创建常量

Object.defineProperty 的基础用法

ES6之前是没有const的,如果需要定义常量,可以使用Object.defineProperty

很多人知道Vue2使用 Object.defineProperty监听数据变化,但不一定知道 Object.defineProperty也可以用来定义常量。

Object.defineProperty方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象。Object.defineProperty(obj, prop, descriptor)接收3个参数

  • obj: 要定义属性的对象。
  • prop: 要定义或修改的属性的名称或 Symbol
  • descriptor: 要定义或修改的属性描述符。

举个例子:

var LH = {}
Object.defineProperty(LH, 'name', {
  value: '雷猴'
})
console.log(LH) // 输出: {name: '雷猴'}
LH.name = '鲨鱼辣椒'
console.log(LH)  // 输出: {name: '雷猴'}

可以将上面的代码放到你的浏览器里试试。

为什么修改LH.name无效呢?因为descriptor除了value之外,还有其他属性,比如writable就可以用来定义该对象是否允许被修改,默认是false,也就是不能修改。

所以 LH.name = '鲨鱼辣椒'修改无效。

如果将writable改成true就可以修改了

var LH = {}
Object.defineProperty(LH, 'name', {
  value: '雷猴',
  writable: true // 允许修改
})
console.log(LH) // 输出: {name: '雷猴'}
LH.name = '鲨鱼辣椒'
console.log(LH)  // 输出: {name: '鲨鱼辣椒'}

创建常量

顺着上面的思路,如果我们把LH改成window,那是不是就可以在window上定义一个属性,而且该属性是全局的,定义后在什么地方都能调用。

Object.defineProperty(window, 'NAME', {
  value: '雷猴'
})
console.log(NAME) // 输出: 雷猴
NAME = '鲨鱼辣椒'
console.log(NAME) // 输出: 雷猴
window.NAME = '蟑螂恶霸'
console.log(NAME) // 输出: 雷猴

不管如何修改,NAME 都是最开始定义的值。

常量居然可以修改值?

上面创建的常量,value是一个基础数据类型的值。如果换成引用类型的值,那内容是可以修改的。

Object.defineProperty(window, 'NAME', {
  value: {
    nickname: '雷猴'
  }
})
console.log(NAME)
NAME.nickname = '鲨鱼辣椒'
console.log(NAME)

原因是,常量锁定的是定义时所指向的内存地址。

定义基础数据类型时,内存地址直接指向那个值。但定义引用类型时,内存地址存的是引用地址。所以常量的定义指的是引用地址不能修改

兼容性

使用 Object.defineProperty 定义常量时需要注意兼容性

到此这篇关于JS ES5创建常量详解的文章就介绍到这了,更多相关JS ES5创建常量内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • javascript实现简易计算器功能

    javascript实现简易计算器功能

    这篇文章主要为大家详细介绍了javascript实现简易计算器功能,实现四则运算,小数点,回退,归0等功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-09-09
  • 关于VSCode格式化JS自动添加或去掉分号的问题

    关于VSCode格式化JS自动添加或去掉分号的问题

    这篇文章主要介绍了VSCode格式化JS自动添加或去掉分号的问题,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-10-10
  • JS实现title标题栏文字不间断滚动显示效果

    JS实现title标题栏文字不间断滚动显示效果

    这篇文章主要介绍了JS实现title标题栏文字不间断滚动显示效果,通过javascript时间函数定时操作动态修改页面元素实现滚动效果,需要的朋友可以参考下
    2016-09-09
  • 微信小程序中使用vant框架的具体步骤

    微信小程序中使用vant框架的具体步骤

    本文主要介绍了微信小程序中使用vant框架的具体步骤,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-01-01
  • 浅析上传头像示例及其注意事项

    浅析上传头像示例及其注意事项

    本文主要分享一个简易的上传头像示例以及其大致流程、实现过程中需要注意的事项。具有很好的参考价值,需要的朋友一起来看下吧
    2016-12-12
  • JavaScript父子窗体间的调用方法

    JavaScript父子窗体间的调用方法

    这篇文章主要介绍了JavaScript父子窗体间的调用方法,涉及javascript调用窗体的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-03-03
  • JS原生带缩略图的图片切换效果

    JS原生带缩略图的图片切换效果

    这篇文章主要介绍了JS原生带缩略图的图片切换效果,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值 ,需要的朋友可以参考下
    2018-10-10
  • JS 数字转换研究总结

    JS 数字转换研究总结

    这篇文章主要介绍了JS 数字转换实现方法,需要的朋友可以参考下
    2013-12-12
  • 理解JavaScript中的对象 推荐

    理解JavaScript中的对象 推荐

    JavaScript有一种object数据类型,但是这种对象不同于c#或vb中的对象,在c#中,我们通过类创建一个对象,一个类相当于创建对象的模板,定义了对象的属性和方法,这些对象和方法将永远固定,我们不能在运行时不能增加对象的属性和方法。
    2011-01-01
  • ES5 模拟 ES6 的 Symbol 实现私有成员功能示例

    ES5 模拟 ES6 的 Symbol 实现私有成员功能示例

    这篇文章主要介绍了ES5 模拟 ES6 的 Symbol 实现私有成员功能,结合实例形式分析了ES5 模拟 ES6 的 Symbol 实现私有成员功能相关原理、实现方法与操作注意事项,需要的朋友可以参考下
    2020-05-05

最新评论