一、带var和不带var的区别

带var需要变量提升，不带var的时候没有变量提升
在全局作用域下，都会储存在window里边(给GO添加了一个属性)，属性名就是此变量，属性值就是变量值

【判断一个对象到底有没有这个属性名】：用"属性名" in 对象，如果返回值是false 说明就是不存在，如果是ture说明就是存在

 var a = 100;
        b = 200;
        //判断一个对象有没有该属性
        console.log('a' in window); //ture
        console.log('b' in window); //ture
        console.log('c' in window); //false

二、let/const && var 的区别

let/const 这俩没有变量提升，只是在声明一个变量
let 不可以重复声明（词法分析不允许）//会报错 Identifier 'num' has already been declared

let/const 会产生一个块级上下文，而var不会（ie没有块级上下文这个概念）
let 声明的变量可以重新赋值（指针可改）

const 声明的变量不可以重新赋值（和值关联的指针不可改），在变量声明的时候需要给一个初始值
在全局上下文中，基于var的声明的变量是直接放在GO（window）中，而基于let/const声明的变量是放在VO（G）中

暂时性死区

在 ECMAScript 2015 之前，typeof 总能保证对任何所给的操作数返回一个字符串。即便是没有声明的标识符，typeof 也能返回 'undefined'。使用 typeof 永远不会抛出错误。但在加入了块级作用域的 let 和 const 之后，在其被声明之前对块中的 let 和 const 变量使用 typeof 会抛出一个 ReferenceError。块作用域变量在块的头部处于“暂存死区”，直至其被初始化，在这期间，访问变量将会引发错误。

 //暂时性死区
console.log(typeof a); //不let/const就会出现引用错误
let a;

三、作用域链扩展练习题

在私有领域中，如果没有定义这个私有变量，就会到上一级作用域进行查找，
如果都没有，继续进行查找，知道查找到window为止

如果此变量声明的时候用到了let/const，就相当于给VO添加了一个这样的变量

如果声明的时候用了var function 或者压根没声明就相当于给GO添加了一个属性

（也相当于给window添加了一个属性）

【思考题】

console.log(b);
function fn(){
    b=13;
    console.log(b);    
}
fn();
console.log(b);

【答案】

console.log(b);//b is not defined
function fn(){
    b=13; // 不是私有变量，向上查找，直到window都没有，给window添加一个属性 window.b=13;
    console.log(b);//13
}

fn();
console.log(b);// 13

【思考题】

console.log(a,b);
var a=12,
b=12;
function fn(){
    console.log(a,b);
    var a=b=13;
    console.log(a,b);
}
fn();
console.log(a,b);

函数底层运行机制

1、私有上下文

函数执行，就会形成一个全新的私有上下文，然后进栈执行

私有上下文，首先会有一个AO(私有变量对象-->形参变量和函数体内声明过的变量)，来存储私有变量

代码执行之前会做哪些事？

初始作用域链：<自己的上下文（执行产生的），函数的作用域（创建时候声明的）>
初始this

初始arguments
形参赋值

变量提升
代码执行

2、代码演示：

var x=[12,23];
function fn(x){
x[0]=100;
x=[100];
x[1]=200;
console.log(x);
}
fn(x);
console.log(x);

四、练习题（私有变量和全局变量）

var a=b=13和var a=13,b=13的区别

var a = b = 13
var a = 13;
b = 13;


var a = 13, b = 13;
var a = 13;
var b = 13;

1）

var a=12,b=13,c=14;
function fn(a){
   console.log(a,b,c); 
   var b=c=a=20;
   console.log(a,b,c);
}
fn(a);
console.log(a,b,c);

2）

/* 
 传进来的参数如果是引用数据类型，在函数里面虽然是私有变量，
 但是更改的还是那个引用地址，所以全局下的变量也会发生变化
*/


var ary=[12,13];
function fn(ary){
   console.log(ary);
   ary[0]=100;
   ary=[100];
   ary[0]=0;
   console.log(ary);
}
fn(ary);
console.log(ary);

【答案】：

[12,13]
[0]
[100,13]

五、上级作用域：

上级作用域:

当前函数执行，形成一个私有作用域A，这个A的上级作用域是谁，跟它在哪执行无关，跟它在哪定义（创建）有关系，在哪创建，它的上级作用域就是谁

简而言之：上级作用域和函数在哪执行无关，和函数在哪定义有关

var a=2;
function fn(){
   console.log(a);
}
fn();
function sum(){
  var a=3;
  fn();
}

sum();

1、作用域练习题

var n=10;
function fn(){
    var n=20;
    function f(){
        n++;
        console.log(n);
    }
    f();
    return f;
}
var x=fn();
x();
x();
console.log(n);

答案】：打印：21、22、23、10

2、堆栈内存小科普

1）js中的内存分为：堆内存和栈内存

【堆内存】：只要用来存储引用数据类型的值（对象存的是键值对，函数存的是字符串）

【栈内存】：供js运行的环境（函数执行），存基本数据类型的值

2）堆栈内存的释放问题

我们每次给变量存值或者执行函数的时候都会占用内存空间，如果一直这样下去，日积月累，电脑总会装不下的，所以内存是需要释放的。

①堆内存的释放：

常见的浏览器释放方式主要有以下两种：

谷歌浏览器是标记方式，每隔一段时间就会检测一下当前作用域中的内存，是否被占用，如果没有被占用，就会释放掉。
ie和火狐等浏览器是采用计数方法，当前作用域中如果一个空间地址被占用一次，就会累加一，如果减少一次占用就会减1，直到0的时候，说明已经没有被占用了，就释放了。

堆内存释放：让所有引用这个堆内存的变量赋值为null，堆内存地址不在被占用，浏览器在空闲的时候就会把堆内存释放

var obj={name:"li",age:45};
var obj2=obj;
obj=null;
obj2=null;

②栈内存释放：

销毁：全局栈内存，只有当页面关闭的时候才会被释放
销毁：函数执行完成，一般情况下都会被销毁掉

function fn(x){
   return x+3;
}
fn(1);

不销毁：

被嵌套的函数内部引用了外部函数的形参或者变量

var function fn(){
    var num=2;
    return function(){
       console.log(num);
    };
};
var f=fn();

var ary=[];
function fn(){
    var num=2;
    ary=function(){
       console.log(num);
    };
};
var f=fn();

不立即销毁,（当函数执行完毕之后销毁）

function fn(x){
   return function(y){
      return x+y;
   }
}

fn(1)(2);

六、闭包

定义：一般指的是一个不销毁的私有作用域，用来保护私有变量

function fn(i){
    return function (n){
       console.log(n+(++i));
    }
}
var f=fn(2);
f(3);
fn(5)(6);
fn(7)(8);
f(4)

/*
      闭包什么时候产生?
        1. 函数嵌套函数
        2. 被嵌套的函数内部引用了外部函数的形参或者变量
        3. 外部函数被调用

      优点:
        1. 延长了局部变量的生命周期
        2. 可以通过闭包实现一些高级一点的功能
    */

1、闭包的作用：

【保护】：保护里面的私有变量不受外界的干扰.
【保存】：形成不销毁的作用域，可以把里面的变量保存下来，

// 实现一个功能：调用一次函数就 + 1
function fn() {
  var num = 0
  num++
  return num
}
fn()
fn()
fn()
var num = fn()
console.log(num)

升级

// 实现一个功能：调用一次函数就 + 1
// var closure = { num: 1 }
function fn() {
  var num = 1
  function fn1() {
    num++
    return num
  }
  return fn1
}
var addNumFn = fn()
var num1 = addNumFn()
console.log(num1)
var num2 = addNumFn()
console.log(num2)
var num3 = addNumFn()
console.log(num3)

了解

var closure = { num: 1 }
function fn2() {
  closure.num++
  return closure.num
}

var num4 = fn2()
console.log(num4)
var num5 = fn2()
console.log(num5)
var num6 = fn2()
console.log(num6)

①闭包在实战中的应用

【1】闭包之私有变量的保护应用

【jquery】通过window添加属性暴漏到全局

(function(){
    function jquery(){
    }
    //把jquer 这个方法通过window添加属性暴漏到全局
    window.jquery=window.$=jquery;
})()

在使用的时候： jquery() 或者$()

【2】私有变量之保存机制-选项卡案例再忆

【选项卡案例原版】

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul,
        ol {
            list-style: none;
        }

        .main {
            width: 500px;
            margin: 0 auto;
        }

        ul>li {
            width: 100px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            border: 1px solid #333;
            margin-right: 10px;
            display: inline-block;
            position: relative;
            top: 1px;
        }

        .main>div {
            height: 300px;
            line-height: 300px;
            border: 1px solid #333;
            text-align: center;
            display: none;
        }

        .main li.current {
            background: darkcyan;
            border-bottom-color: darkcyan;

        }

        .main div.current {
            background: darkcyan;
            display: block;
        }
    </style>
</head>

<body>
    <div class="main" id="main">
        <ul>
            <li class="current">音乐</li>
            <li>电视</li>
            <li>综艺</li>
        </ul>
        <div class="current">音乐内容</div>
        <div>电视内容</div>
        <div>综艺内容</div>
    </div>
</body>

</html>
<script>
    var main = document.getElementById("main");
    var lis = main.getElementsByTagName("li");
    var divs = main.getElementsByTagName("div");

    for (var i = 0; i < lis.length; i++) {
        lis[i].index = i;
        lis[i].onclick = function () {
            var index = this.index;
            change(index);
        }
    }

    function change(index) {
        for (var i = 0; i < lis.length; i++) {
            lis[i].className = "";
            divs[i].className = "";
        }
        lis[index].className = "current";
        divs[index].className = "current";
    }
</script>

②、回忆当初里面的i 为啥是3

1、【作用域方式去思考】

当我们触发点击事件的时候，这个函数执行，形成私有作用域，在这个私有作用域里面，并没有私有变量i，所以就会向上级作用域进行查找，此时上级作用域就是全局作域里面的i，当我们发生点击时间的时候，此时for 循环早已完成，i早就是3

作用域：

window 全局作用域
函数执行形成私有作用域

 for (var i = 0; i < lis.length; i++) {
        lis[i].onclick = function () {
           // 这里的i为啥会变成3？当我们触发点击事件的时候，这个函数执行，形成私有作用域，
           // 在这个私有作用域里面，并没有私有变量i，所以就会向上级作用域进行查找，此时上级作用域就是
           // 全局作用域里面的i，当我们发生点击时间的时候，此时for 循环早已完成，i早就是3
            change(i);
        }
    }

2、【同步异步事件去思考】

【同步事件】：当一件事件做完之后，再继续下一件事情

【异步事件】：当一件事件还没有做完，不再等待，直接去做下一个事件。所有的事件都是异步编程。

【 举列子 】：比如你想吃着泡面去刷剧。你先打开开关去烧水，这个时候我就站在那等，直到水烧好了，把面泡好了，我再去看电视。这个是 同步事件 。我把烧水的开关打开，我就去刷剧了，一边刷剧，一边等着烧水，水烧好了，我再去关掉.... 这个就是 异步事件****

 for (var i = 0; i < lis.length; i++) {
        lis[i].onclick = function () {
            change(i);
        }
    }

for循环是同步事件，执行完i=3；点击事件是异步事件，当我们点击页面上的按钮的时候，这个for循环早已经执行完了。

lis[0].onclick = function () {
            change(i);
}

lis[1].onclick = function () {
            change(i);
}
lis[2].onclick = function () {
            change(i);
}

3、解决方法：

1）自定义属性

2）闭包

 for (var i = 0; i < lis.length; i++) {
    // 之前i找到的上级作用域是window,现在我们手动增加一层作用域，用一个闭包的形式，里面把点击事件赋值
    //给了外面的元素，被占用，形成不销毁的作用域.n是私有变量，当点击页面上的元素的时候，就会找闭包作用域
    //中的私有变量n
    
    (function(n){
       lis[n].onclick = function () {
            change(n);
        }
    })(i)
        
    }

for (var i = 0; i < lis.length; i++) {
//每次for循环，就给li绑定一个点击事件，并且点击的事件的值是return里面的小函数，形成了不销毁的作用域
当我们点击li的时候，里面的小函数就会执行，变量i就是自执行函数里面的私有变量
            lis[i].onclick=(function(i){
                return function(){
                    change(i);
                }
             })(i)      
    }

3）let

   for (let i = 0; i < lis.length; i++) {
        lis[i].onclick=function(){
            change(i);
        }
    }

块级作用域：在es6语法中，用{} 括起来的,里面有const 或者let 都是块级作用域:

在块级作用域外面访问不到里面的变量
块级作用域也有作用域链（块级作用域也可以进行嵌套）

{
    console.log(a);
    let a=8;
    console.log(a);
}
console.log(a);

{
    let a=2;
    {
        let b=3;
        console.log(a);
    }
}

console.log(a);

第十二章 var let/const 闭包