学习笔记 JavaScript ES6 声明方式const（二）

用const定义一个对象，看看和定义简单数据类型有什么不同。

const obj = {value: 36,name: 'SUR.E.',
}console.log(obj)obj.schoole = 'SYU' // 注意，这里改变了常量对象的内容console.log(obj)----------------------------------------------
{value: 36, name: 'SUR.E.'}
{value: 36, name: 'SUR.E.', schoole: 'SYU'} // obj对象被改变了？！

要寻找原因，需要知道JS中的变量和常量是如何存储的。

ES5当中有5种基本数据类型存在于栈内存当中：string 、number、boolean、undefined、null，JavaScript除基本数据类型外，还有引用数据类型，而引用数据类型存在于堆内存当中，而栈内容中存的是引用地址。看下图：

引用数据类型的引用地址不可以被改变，但是地址里存在的内容是可以被改变的。

再来看一下常量的Array，上代码：

const arr = [1, 2, 3]
arr.push(4) // 这里改变值console.log(arr)-----------------------
[1, 2, 3, 4] // 可以被改变

如何让常量引用数据类型的内容也不变量呢，要用到Object.freeze()（注意只能冻结一层，下面会详细说什么叫只冻结一层），这个单词的本义是“冻结”，上代码：

const obj = {value: 36,name: 'SUR.E.',
}console.log(obj)// 开始冻结对象
Object.freeze(obj) // 注意，这里只能传入对象，不能传入数组obj.schoole = 'SYU' // 注意，这里改变了常量对象的内容console.log(obj)----------------------------------------------------------------
{value: 36, name: 'SUR.E.'}
{value: 36, name: 'SUR.E.'} // 没有报错，常量对象的内容也没有被改变

现在来修改一下代码，嵌套一个子对象skill，然后改变它的内容：

const obj = {value: 36,name: 'SUR.E.',skill: {name : 'code',year : 10 // ==>注意这里定义的是10}
}// 开始冻结对象
Object.freeze(obj) // 冻结obj.skill.year = 15 // 改为15console.log(obj)------------------------------------------
{value: 36, name: 'SUR.E.', skill: {…}}
name: "SUR.E."
skill:
name: "code"
year: 15 // 居然成功了？！
value: 36

所以，freeze()只能冻结当前层的对象，如果想冻结子层对象，还需要再写一行代码：

Object.freeze(obj)
Object.freeze(obj.skill) // 冻结第二层

冻结数据参考：

Object.freeze() - JavaScript | MDN

上面的网站不错，大家可以多看看Web 开发技术 | MDN

学习笔记 JavaScript ES6 声明方式const（二）相关推荐

学习笔记 JavaScript ES6 箭头函数
学习内容: this指向定义时所在的对象,而不是调用时所在的对象不可以当作构造函数不可以使用arguments对象 1.this指向定义时所在的对象,而不是调用时所在的对象先来回顾一下ES5当中 ...
学习笔记 JavaScript ES6 Promise的静态方法
学习内容: Promise.resolve() Promise.reject() Promise.all() Promise.race() Promise.resolve(),表示成功的状态 Prom ...
ES6学习笔记02：let 与 const
ES6学习笔记02:let 与 const 用var声明的变量会造成全局污染,于是就产生了新的声明方式. 1.let 用let声明变量,必须先声明后使用. 在for循环头里用let定义循环变量i,那么 ...
HTML5学习笔记 —— JavaScript基础知识
HTML5学习笔记 -- JavaScript基础知识标签: html5javascriptweb前端 2017-05-11 21:51 883人阅读评论(0) 收藏举报分类: JavaScr ...
【学习笔记】C++ 核心编程（二）类和对象——封装
内容来自小破站<黑马程序员C++>复习自用 [学习笔记]C++ 核心编程(二)类和对象--封装 4 类和对象 4.1 封装 4.1.1 封装的意义(一) 4.1.1 封装的意义(二) 4. ...
php中声明一个函数,php学习笔记之函数声明
/* 函数定义: * 1.函数是一个被命名的 * 2.独立的代码段 * 3.函数执行特定任务 * 4.并可以给调用它的程序返回一个值 * * 函数的优点: * 1.提高程序的重用性 * 2.提高程序的 ...
深度学习笔记（17）误差分析（二）
深度学习笔记(17) 误差分析(二) 1. 使用来自不同分布的数据进行误差分析 2. 数据分布不匹配时的偏差与方差 3. 处理数据不匹配问题 1. 使用来自不同分布的数据进行误差分析越来越多的团队都 ...
CTFHUB http协议题目学习笔记详细步骤请求方式 302跳转 cookie 基础认证响应源代码
CTFHUB http协议题目学习笔记详细步骤请求方式 302跳转 cookie 基础认证响应源代码 WEB-HTTP协议 1-请求方式 2-302跳转 3.cookie 4.基础认证 5.响 ...
ASP.Net学习笔记004--基于ashx方式的ASP.Net开发1
以前写的课程都没有附上源码,很抱歉! 课程中的源码可以加qq索要:1606841559 技术交流qq1群:251572072 技术交流qq2群:170933152 也可以自己下载: ASP.Net学习 ...
学习笔记 JavaScript 动画
学习笔记 JavaScript 动画结果代码里用到的图片 <html><head><style>#imageDiv {height: 100px;width: ...

学习笔记 JavaScript ES6 声明方式const（二）

学习笔记 JavaScript ES6 声明方式const（二）相关推荐

最新文章

热门文章