杂货小铺之ES6+ 🥪 Const

es.png

• const

📖 不能被改变的叫做常量

1. ES5中使用Object.defineProperty(obj, prop, descriptor)定义常量；
   🌻 obj 要定义属性的对象
   🌻 prop 要定义或修改的属性的名称或 Symbol
   🌻 descriptor 要定义或修改的属性描述符

// writable 是否可以修改，默认为false
Object.defineProperty(window,'a',{
  value: '哈哈哈',
  writable: false
})
console.log(a); // 哈哈哈
a = '啦啦啦';
console.log(a); // 哈哈哈

2. const除了具有let的块级作用域和不会变量提升的特性之外，还具有定义的常量不能被改变的特性；

const a = 'hello world';
console.log(a);
a = 'hello pp';
console.log(a); // 报错：Uncaught TypeError: Assignment to constant variable.

// 在代码块中尝试对a进行修改，导致浏览器报错，这就说明const定义的变量是不能被修改的，它是只读的

换一种方式

const a;
a = 'hello pp';
console.log(a); // 报错：Uncaught SyntaxError: Missing initializer in const declaration

🔎 :
const声明的常量必须进行初始化，不然会抛出异常Uncaught SyntaxError: Missing initializer in const declaration

3. 如果用const定义一个对象呢？

const  obj = {
  name: 'xiaoming',
  age: 13
};
console.log(obj); // {name: "xiaoming", age: 13}
obj.like = 'code';
console.log(obj); // {name: "xiaoming", age: 13, like: "code"}

const 定义的obj居然被改变了，这是咋回事呢？请各位看官莫急呦👀

🌻叮～小葵花mama课堂开课啦🌻
我们现在需要了解一下JS中的变量是如何存储的，主要有两种方式堆内存和栈内存
🌻 栈：栈内存主要用于存储各种基本类型的变量，包括Boolean、Number、String、Undefined、Null
🌻 堆：堆内存主要负责像对象Object这种变量类型的存储

栈&&堆.png
❄️❄️❄️❄️❄️❄️❄️
基本了解了一下堆和栈，下面我们来举两个🌰来唠唠基本数据类型和引用数据类型

基本数据类型：
📖 Number、String、Boolean、null、undefined，基本数据类型是按照值访问的，因为可以直接操作保存在变量中的实际值

var a = 10;
var b = a;
b = 20;
console.log(a); // 10

🔎 :
b只是保存了a复制的一个副本。所以，b的值改变，对a没有影响，虽然两个变量的值相等，但是两个变量保存了两个不同的基本数据类型值

基本数据类型赋值过程.png

引用数据类型：
📖 Object、Array、Data、Function等。javascript的引用数据类型是保存在堆内存中的对象。与其他语言不同的是，你不可以直接访问堆内存里空间中的位置和操作堆内存空间，只能操作对象在栈内的引用地址，所以，引用类型数据在栈内存中保存的实际上是对象在堆内存中的引用地址

var obj1 = new Object();
var obj2 = obj1;
obj2.name = "我叫obj2";
console.log(obj1.name); // 我叫obj2

🔎 :
obj1赋值给obj2，实际上是这个堆内存对象在栈内存的引用地址复制了一份给obj2，他们指向的是同一个堆内存对象，实际改变的也是堆内存对象。

引用数据类型赋值过程.png

🌈 通过上面了解对基本数据类型和引用数据类型不同的存储方式后，就可以解释为什么const定义基本数据类型不能够被重新赋值，但是引用数据类型却可以，下面我们来看一下数组

const arr = [1,2,3];
arr.push(4);
console.log(arr); // 1 2 3 4 
// arr也属于引用数据类型，内容是存储在堆内存里面的，所以会发生改动

🔎 :
那么const声明的常量不发生改动到底指的是什么呢？其实指的是变量所指向的内存地址不能改动，地址里面存的内容发生了改变

❄️❄️❄️❄️❄️❄️❄️
🤔 那我们来思考一下有没有什么办法可以让对象也不发生改变？我们来看一下

const  obj = {
  name: 'xiaoming',
  age: 13,
};
console.log(obj); // {name: "xiaoming", age: 13}
obj.like = 'code';
console.log(obj); // {name: "xiaoming", age: 13, like: "code"}

使用 Object.freeze(obj), 只能传对象不能传数组

const  obj = {
  name: 'xiaoming',
  age: 13,
};
console.log(obj); // {name: "xiaoming", age: 13}
Object.freeze(obj);
obj.like = 'code';
console.log(obj); // {name: "xiaoming", age: 13}

再增加一层

const  obj = {
  name: 'xiaoming',
  age: 13,
  skill: {  // 再增加一层
    name: 'code',
    year: 1
  }
};
console.log(obj); // {age: 13, name: 'xiaoming', skill: {name: "code", year: 2}}
Object.freeze(obj); // 只能做浅层冻结
obj.like = 'code';
obj.skill.year = 2;
console.log(obj); // {age: 13, name: 'xiaoming', skill: {name: "code", year: 2}}

以上是对const的一个小小的总结～