共计 2160 个字符，预计需要花费 6 分钟才能阅读完成。
前端巅峰 每日一题：
这个系列，每个小伙伴都可以参与出题，可以把你的答案在评论区秀出来，javaScript 是一个相当动态的语言，每个人都有自己的风格和见解，欢迎大家踊跃提供每日问题和在下面提供不同的答案～
我每天都会邀请一些人来回答问题，只要回答问题，就可以在评论区打广告
不定期发放奖品（和 小姐姐）给大家
第一季：ES6基础系列：
思考题：
let , const , object.freeze() 的区别
从最简单的 const 开始：
按上面这样写 会报错
提示：
Assignment to constant variable.
赋值给了常量
但是当我们：
发现代码正常运行，没有报任何错
那么我再试一下对象：
发现一切运行正常
接下来尝试let:
发现代码运行正常无报错
我们翻看阮一峰老师的 ES6 入门：
const:
let:
const实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址所保存的数据不得改动。
对于简单类型的数据（数值、字符串、布尔值），值就保存在变量指向的那个内存地址，因此等同于常量。
但对于复合类型的数据（主要是对象和数组），变量指向的内存地址，保存的只是一个指向实际数据的指针，const 只能保证这个指针是固定的（即总是指向另一个固定的地址），至于它指向的数据结构是不是可变的，就完全不能控制了。
总结来说：const 并不能真正意义上保证‘不变’
ES5 的浅冻结，使用 API Object.freeze()
正常情况下，下面这段代码：
最终输出:
{a: "a", b: {…}}
a 的值是被改变了 可是打开注释的代码 Object.freeze(obj)
最终输出：
{a: 1, b: {…}}
此时 a 的值并没有被改变，因为它被“冻结”了
上面有提到浅冻结，那么看看修改 b 的值会不会有效果：
最终输出如下：
{a: 1, b: {…}}
a: 1
b: {c: 2}
证明 b 也被冻结了
再次尝试修改 C 的值：
输出：
{a: 1, b: {…}}
a: 1
b: {c: 2}
看来 Object.freeze() 也不能完全冻结，但是万能的程序员小哥哥是不可能屈服的，简单粗暴的递归，深冻结：
这时候我们修改了 c 的值：
发现输出：
{a: 1, b: {…}}
a: 1
b: {c: 2}看来这次是真的冻住了，不过深冻结也要根据数据的类型判断进行冻结，否则就不能真正意义上的完全冻结。
vue 1.0.18+对 Object.freeze() 提供了支持，对于 data 或vuex里使用 freeze 冻结了的对象，vue不会做 getter 和setter的转换。
如果你有一个巨大的数组或 Object，并且确信数据不会修改，使用Object.freeze() 可以让性能大幅提升。
Object.freeze() 方法可以冻结一个对象。一个被冻结的对象再也不能被修改；冻结了一个对象则不能向这个对象添加新的属性，不能删除已有属性，不能修改该对象已有属性的可枚举性、可配置性、可写性，以及不能修改已有属性的值。此外，冻结一个对象后该对象的原型也不能被修改。
但它冻结的是值，你仍然可以将变量的引用替换掉
上面提到的：
可枚举性、可配置性、可写性，以及不能修改已有属性的值
上面通过 Object.defineProperty() 定义的属性，访问得到打印输出 2
下面对三个属性描述符进行解析：
writable: 决定是否可以修改属性的值
打印输出还是2，属性 a 的值不能被改变
解析:writable:false 可以看作为属性不可改变, 在严格模式 (“use strict”;) 下, 引擎会抛出 TypeError 的异常，这表示我们无法修改一个不可写的属性
configurable: 只要属性是可配置的，就可以使用 defineProperty(...)方法来修改属性描述符
注意⚠️
在 false 情况下，如果修改，不管是不是严格模式，都会抛出 TypeError 的错误
在这种情况下，我们仍可以将可写性的状态由 true 改为false
delete属性也会被禁止(delete myObject.a;)
emumerable: 可枚举，如果将它设置为 false，则这个属性将不会出现在枚举中，但可以正常访问他
属性描述符上面有介绍，最后介绍下访问描述符
定义对象时，加入访问描述符：
正常情况下，访问 p.age 输出 18
但是设置 p.age=101 后：
就会抛出错误
index.html:65 Uncaught Error: invalid value
at Object.set age [as age] (index.html:65)
at index.html:71
访问描述符的作用：
get : 每次获取属性时候调用 例如 console.log(p.age) 这时候会调用 get
set : 每次设置属性的时候调用 例如 p.age = 101 他们两个甚至可以完全无关
特别提示，它们两个的调用逻辑一定要捋清楚，耦合度太高容易进入死循环
著名的 Vue 框架在 2.x 版本就借此实现的响应式～
例如 :
只需要通知所有订阅这个数据改变的组件进行更新，并且传递新的值～
上面只是伪代码，但是大致思想如此
如果感觉写得不错，欢迎点个在看，推荐到朋友圈
另外开源项目 Palantir 目前已经接入微前端，微前端框架正在编写中～
仓库地址：
https://github.com/JinJieTan/PalantirPalantir仓库地址
欢迎加入～ 我们的大群体，以及交流群，公众号回复：加群
即可加群
