带你了解变量提高闭包做用域

变量提高（声）

当浏览器开辟出供代码执行的栈内存后，代码并无自上而下当即执行，而是继续作了一些事情：把当前做用域中全部带var/function关键字的进行提早的声明和定义 =>变量提高机制

• 带var的只是提早声明（declare） “var a;” 若是只声明没有赋值，默认值是undefined
• 带function的不只声明，并且还定义了（defined） “a=13”定义其实就是赋值，准确来讲就是让变量和某个值进行关联

1.带var和不带var的区别

//=>在全局做用域下的区别
/* * 不带var的：至关于给全局对象window设置了一个属性a * window.a = 13; */
a = 13;
console.log(a); //=>window.a

/* * 栈内存变量存储空间 * b * 带var的：是在全局做用域下声明了一个变量b（全局变量），可是在全局下声明的变量也一样至关于给window增长了一个对应的属性（只有全局做用域具有这个特色） */
var b = 14; //=>建立变量b & 给window设置了属性b
console.log(b); //=>14
console.log(window.b); //=>14
复制代码

闭包做用域

1. 建立函数

   • 开辟一个堆内存
   • 把函数体中的代码当作字符串存储进去
   • 把堆内存的地址赋值给函数名/变量名
   • 函数在哪建立，那么它执行时候所须要查找的上级做用域就是谁

2. 函数执行

   • 造成一个全新的私有做用域、执行上下文、私有栈内存（执行一次造成一个，多个之间也不会产生影响）
   • 形参赋值 & 变量提高
   • 代码执行（把所属堆内存中的代码字符串拿出来一行行执行）
   • 遇到一个变量，首先看它是否为私有变量（形参和在私有做用域中声明的变量是私有变量），是私有的就操做本身的变量便可，不是私有的则向上级做用域中查找...一直找到全局做用域为止 =>做用域链查找机制
   • 私有变量和外界的变量没有必然关系，能够理解为被私有栈内存保护起来了，这种机制其实就是闭包的保护机制

3. 关于堆栈内存释放问题（以谷歌webkit内核为例子）

   函数执行就会造成栈内存（从内存中分配的一块空间），若是内存都不销毁释放，很容易就会致使栈内存溢出（内存爆满，电脑就卡死了），堆栈内存的释放问题是学习JS的核心知识之一

   • 堆内存释放问题

   //=>建立一个引用类型值，就会产生一个堆内存
   //若是当前建立的堆内存不被其它东西所占用了（浏览器会在空闲的时候，查找每个内存的引用情况，不被占用的都会给回收释放掉），则会释放
   let obj = {
      name : 'zhufeng'
   };
   let oop = obj;
   //此时obj和oop都占用着对象的堆内存，想要释放堆内存，须要手动解除变量和值的关联（null：空对象指针）
   obj = null;
   oop = null;
   复制代码

   • 栈内存释放

     //=>打开浏览器造成的全局做用域是栈内存
     //=>手动执行函数造成的私有做用域是栈内存
     //=>基于ES6中的let/const造成的块做用域也是栈内存
     //=>....
     
     /* * 全局栈内存：关掉页面的时候才会销毁 * 私有栈内存： * 1.通常状况下，函数只要执行完成，造成的私有栈内存就会被销毁释放掉（排除出现无限极递归、出现死循环的模式） * 2.可是一旦栈内存中的某个东西（通常都是堆地址）被私有做用域之外的事物给占用了，则当前私有栈内存不能当即被释放销毁（特色：私有做用域中的私有变量等信息也保留下来了） =>市面上认为的闭包：函数执行造成不能被释放的私有栈内存，这样的才是闭包 */
     function fn(){
         //...
     }
     fn(); //=>函数执行造成栈内存，执行完成栈内存销毁
     
     function X(){
         return function(){
             //...
         }
     }
     let f=X(); //=>f占用了X执行造成的栈内存中的一个东西（返回小函数对应的堆），则X执行造成的栈内存不能被释放了
     复制代码

​

let/const和var的区别

1.let和const不存在变量提高机制

建立变量的六种方式中：var/function有变量提高，而let/const/class/import都不存在这个机制

2.var容许重复声明，而let是不容许的

在相同的做用域中（或执行上下文中）

• 若是使用var/function关键词声明变量而且重复声明，是不会有影响的（声明第一次以后，以后再遇到就再也不重复声明了）
• 可是使用let/const就不行，浏览器会校验当前做用域中是否已经存在这个变量了，若是已经存在了，则再次基于let等从新声明就会报错

//=>在浏览器开辟栈内存供代码自上而下执行以前，不只有变量提高的操做，还有不少其它的操做=>“词法解析”或者“词法检测”：就是检测当前即将要执行的代码是否会出现“语法错误 SyntaxError”，若是出现错误，代码将不会再执行（第一行都不会执行）
console.log(1); //=>这行代码就已经不会再被执行了
let a = 12;
console.log(a);
let a = 13;  //=>Uncaught SyntaxError: Identifier 'a' has already been declared
console.log(a);
复制代码

//=>所谓重复是：无论以前经过什么办法，只要当前栈内存中存在了这个变量，咱们使用let/const等重复再声明这个变量就是语法错误
console.log(a);
var a = 12;
let a = 13; //=>Uncaught SyntaxError: Identifier 'a' has already been declared
console.log(a);
复制代码

3.let能解决typeof检测时出现的暂时性死区问题（LET比VAR更严谨）

es6.ruanyifeng.com/#docs/let

// console.log(a); 
//=>Uncaught ReferenceError: a is not defined

// console.log(typeof a); 
//=>"undefined" 这是浏览器BUG，本应该报错由于没有a（暂时性死区）

console.log(typeof a); 
//=>Uncaught ReferenceError: Cannot access 'a' before initialization
let a;
复制代码