JS ES5创建常量详解

目录

• 前言
• ES 5 创建常量
• Object.defineProperty 的基础用法
• 创建常量
• 常量居然可以修改值？
• 兼容性

前言

ES6 刚推出的时候，let和const应该是大多数人学习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创建常量内容请搜索自由互联以前的文章或继续浏览下面的相关文章希望大家以后多多支持自由互联！