堆栈内存开辟及销毁、let、const

js中的堆内存的创建和释放

JS引擎中的内存分类：

栈内存（作用域）供js代码执行的环境，保存基本数据类型

堆内存：存储引用数据类型

堆内存的创建和销毁

创建：

创建一个对象、数组、函数、等引用数据类型，浏览器都会分配一块堆内存地址，存储引用数据类型的数据；

var obj = {
  name: '你好',
  age: 10,
  courses: ['高级前端', '前端架构师', 'UI设计师']
}; // 每创建一个引用数据类型，浏览器都会开辟一个堆内存，并把这个堆内存地址给obj变量


// 此时obj相当于引用了这一块堆内存，
var obj2 = obj; // 此时obj2也引用了这一块堆内存

堆内存释放

让所有引用堆内存空间地址的变量赋值为null即可（没有变量占用这个堆内存了，浏览器会在空闲的时候把它释放掉）

obj = null; // 将obj指向空对象指针null
obj2 = null; // 将obj2指向空对象指针null

js中的栈内存开辟和释放

栈内存（作用域）：供js代码执行的环境，也是用来保存基本数据类型的

栈内存的创建：

当浏览器打开时，首先会开辟形成一个顶层的栈内存，就是全局作用域；函数执行时，也会开辟一个供函数代码执行的栈内存（私有作用域）

function add(a, b) {
  var total = 0;
  total = a + b;
  return total;
}

函数每一次执行，都会形成一个全新的栈内存，即每次函数执行都是在一个全新的环境里面执行，所以函数每次执行都是互相独立的；

add(1, 2);
add(1, 3);
add(1, 2);

function fe() {
  return {
    zf: 'zhufeng'
  }
}
var o1 = fe(); //
var o2 = fe();
console.log(o1 === o2); // false fe执行几次，救护创建几个对象，所以o1和o2是两个不同的堆内存，没有任何关系。

栈内存销毁：

全局栈内存：当页面关闭时才会销毁

函数的私有作用域：一般函数执行完成后，栈内存自动销毁。但是有一些特殊情况需要注意；

栈内存不销毁的情形

函数栈内存：正常情况下，函数执行会形成一个栈内存（作用域），当函数执行完成就会自动销毁。但是函数执行完成后，当前形成的栈内存中，某些内容被栈内存以外的变量占用了，此时栈内存不能释放（一旦释放外面找不到原有的内容了）。栈内存不销毁，保存在栈内存中的数据也不会被销毁

1 函数返回值被占用


function fe() {
  return {
    name: "你好"
  }
}
var obj = fe(); // 函数fe执行形成一个不销毁的栈内存，里面定义的对象被外部obj变量占用，因而作用域不销毁

fe(); // 他们正常形成栈内存，但是执行后会被销毁

2.函数内部的引用数据类型被外部占用，函数执行的作用域不销毁。

var x = null;

function fn() {
  x = {
    name: 'j'
  }
};
fn(); // 此时x占用着fn的作用域中对象{name: 'j'}

把值保存在全局作用域

var count = 0; // count保存在全局作用域
btn.onclick = function () {
  count++; // 操作全局变量
  btn.innerHTML = count;
};

自定义不销毁的私有作用域

btn.onclick = (function () {
  var count = 0; // count的值保存在
  return function () {
    btn.innerHTML = count;
  }
})();

自定义不销毁的函数作用域2

(function () {
  var count = 0; // count保存在自执行函数形成的私有作用域中
  btn.onclick = function () {
    count++;
    this.innerHTML = count;
  }
})();

块级作用域


{
  let count = 0; // let 会把花括号变成块级作用域，等效于私有作用域，count的值保存在块级作用域中
  btn.onclick = function () {
    count++;
    this.innerHTML = count;
  }
}

let & const

let const 是ES6新增关键字，用于声明变量

let 用来声明普通变量

const 用于声明常量

let & const 和var的区别

let const不存在变量提升，对于使用let const声明的变量，只能在定义后使用


console.log(a); // 报错：a is not defined
let a = 0;

console.log(b); // 报错：b is not defined
const b = 12;

2. let const 不能重复声明变量(重复声明var或者function声明的也不行)

var n = 1;
var n;
var n = 2;

let n = 1; // 报错：a has already been declared

3. let const 在全局声明的变量或者常量不会像window上增加属性

var num = 100;
console.log('num' in window); // true in 运算符，检测对象是否有某个属性
let css = 'css3';
console.log('css' in window); // false

4. let const 在代码块中会出现，会形成块级作用域，并且出现暂时性死区；

if (condition) { 条件的花括号中使用let const 就会形成块级作用域 }


let num1 = 2;
if (true) {
  let num1 = 4;
  console.log(num1); // 4
}


for(...) { for 循环中的代码块 }


for (var i = 0; i < 12; i++) {
  console.log('var 没有块级作用域')
}
console.log(i); // var 会把i泄露成全局变量

for (let j = 0; j < 3; j++) {
  console.log('let j j不会泄露出去')
}
console.log(j); // Uncaught ReferenceError: j is not defined

利用 {}形成块级作用域


{
  let a = 1;
  console.log(a); // a是块级作用域中
}


{
  let m = 12; // m所处的块级作用域是下面的块级作用域的上级作用域，同样遵从作用域链的查找规则
  {
    console.log(m);
  }
}

暂时性死区（TDZ: temporary dead zone）

在代码块中，用let const声明的变量，不能再声明之前使用。

let q = 12;
if (true) {
  console.log(q); // 这个变量q已经被let锁定在块级作用域中，
  let q = 14;
}

const 声明变量的细节问题

1. const声明时必须赋值

let m;
var m;
const m; // 报错：Missing initializer in const declaration

2. 值一旦被定义，不能被修改

const num = 12;
num = 15; 报错：

3. 如果const声明的常量是一个引用数据类型，那么常量带表的引用地址不能改变，但是堆内存中的内容是可以修改的。

const ary = [1, 2, 3];
ary.push('33');
console.log(ary);

// ary = [1, 3, 5]; // 报错：

原生JS进阶教程（2）

堆栈内存开辟及销毁、let、const

let & const