2018-12-20

---

闭包前言--异步编程

进程：进程是操作系统分配资源(时间片)的最小单位
线程：线程是进程中一个概念 (线程是程序执行的最小单元)
CPU：单核的CPU，同一时间只能运行一个线程，平常我们的电脑上多个软件看似并发的运行(但其实不是，只是各个线程的时间切换很快，我们无法察觉而已)。
浏览器是多进程多线程的，js引擎是单线程的(同一时间只能做一件事情)，js引擎是浏览器的一个线程。

---

回调函数:

    一般回调函数都是一个匿名函数
    我们只想要定义回调函数  不需要调用
    最终函数会被js引擎自动调用(带条件)
        条件: 时间到了   用户触发了一些行为
同步回调函数
    立马执行   只有等同步回调函数执行完毕  后续代码才可以继续执行
    arr.map(function(item,index,arr){})
异步回调函数
    setTimeout(function(){},time)

---

生命周期

作用域的生命周期
---函数定义时被创建
---浏览器关闭时被销毁
执行上下的生命周期
---函数调用时被创建
---函数调用完毕闭包被释放，下一轮垃圾回收机制运行时被销毁
闭包的生命周期
---闭包被创建的前提条件：函数嵌套，内部函数使用了外部函数的变量
---外部函数被调用时，闭包被创建
---当内部函数设置为null时，闭包被释放，下一轮垃圾回收机制运行时被销毁

setTimeout(function(){
},time)

1.当js引擎遇到定时器时，会通知异步线程来管理定时器，js继续向下解析定时器以外的代码。
2.通知异步线程后，异步线程等待定时器设置的time时间后，将定时器中的函数放进异步队列中。
3.js引擎(主线程)执行完所有的同步操作，主线程空闲后就去异步队列中轮询，并将异步队列中的回调函数取出来执行。

---

异步编程面试题

<script>
   for(var i=0;i<5;i++){
       setTimeout(function () {
           console.log(i)
       },1000)
   }
</script>

解析：
1.js引擎第一次解析到setTimeout处，通知异步线程来管理当i=0时的function(回调函数)，暂且称作f0,异步线程需等待1s钟将回调函数放到异步队列中
2.js引擎继续解析，发现又是一个setTimeout，于是执行第一步一样的步骤(f1~f4)
3.js执行代码的速度远远小于1s,当异步线程还没有将回调函数放入异步队列中时，js引擎已经将代码执行完毕，那么它就是队列中轮询，没有回调函数就空轮询，直到1s后，异步线程将回调函数放入队列中，js引擎就将回调函数取出来执行。(注意：队列是先进先出，每个回调函数进队列的时间间隔可忽略不计，因为时间间隔很短，差不多同时)。
4.还值得注意的是，回调函数中并没有对i进行声明，所以根据作用域链的规则，i的值使用的是全局的变量i(也就是for中定义的i)），当回调函数还没有进队列时，for中变量i已经变为了5
5.最终1s后输出5个5.
--
改造一：

<script>
   for(var i=0;i<5;i++){
       setTimeout(function () {
           console.log(i)
       },1000*i)
   }
</script>

解析：解析方法与前面一致，当这里的time变为了1000*i,于是每次的时间间隔不同了(0s,1s,2s,3s,4s),时间间隔为1s,第一个因为是等待0s，所以可以很快的输出，剩下的隔1s输出一个5.

--

IIFE(立即可执行函数表达式)

IIFE的组成部分：
1.第一个()中包含的是匿名函数function(){}
2.第二个()包含的是外部变量来传参(实参)，传给匿名函数的形参，当js引擎遇到最后一个()时，那么IIFE就立即被执行。
--
IIFE的特点：
当函数变为立即可执行函数表达式(IIFE)时，外部是不能访问IIFE的，这样避免了外界对IIFE中变量的访问，也保证了IIFE中的变量不会污染全局。
--
改造二：

<script>
   for(var i=0;i<5;i++){
       (function(j){    //相当于 var j = i;
        setTimeout(function () {
           console.log(j)           //1s后输出0,1,2,3,4
       },1000)
       })(i)              //到最后的()处，就开始执行立即可执行函数的代码 
   }

解析：
1.js引擎首先解析到for循环，i=0,将i的值传递给IIFE的形参j,j的值为0，遇到setTimeout后，异步线程拿着回调函数等待1s，1s后将函数放到异步队列中。
2.因为IIFE的特性，IIFE中的变量是不会污染全局的，所以j的值每次都是i传给它的值，在异步队列中会产生5个回调函数，各个回调函数中的j值都不相同。
3.1s后，输出0,1,2,3,4

---

闭包

闭包的创建时间：
当外部函数的执行上下文被创建时(外部函数被调用时)
--
创建闭包的必要条件：
1.函数嵌套
2.内部函数有使用外部函数的变量
( //下面两句是装逼时使用的:)
1.函数产生了嵌套,内部函数使用了外部函数的变量 就会产生闭包
2.当函数可以记住并访问自己的作用域链时就会产生闭包
)
--
闭包存放的位置：
闭包放在内部函数的作用域中(在执行上下文还没有被创建时)
--
闭包的作用：
延长变量的生命周期
--
闭包的缺点：
闭包一般不会主动销毁，那么它所带来的问题：
1.内存泄露(被占用   无法释放)
2.内存溢出(使用的内存比分配的内存多)
销毁闭包的方法：
将内部函数置为null.
红色警报：下面这句话非常重要：
闭包和内部函数是一一对应的关系(外部函数每被调用一次就产生一个闭包，切记！！切记！！)

---

闭包面试题：

<script type="text/javascript">
  /*
   说说它们的输出情况
   */

  function fun(n, o) {    
    console.log(o)
    return {   
      fun: function (m) {
        return fun(m, n)
      }
    }
  }
  var a = fun(0)   //产生c0闭包，n=0
  a.fun(1)        
  a.fun(2)
  a.fun(3)   //undefined,0,0,0

  var b = fun(0).fun(1).fun(2).fun(3)   //undefined,0,1,2

  var c = fun(0).fun(1)
  c.fun(2)
  c.fun(3)   //undefined,0,1,1
</script>

解析：
1.fun(0)调用完后，返回一个对象：
{
fun: function (m) {
return fun(m, n)
}
}
并且将这个对象的引用地址赋值给a
2.这道题满足闭包的必要条件--函数嵌套，内部函数使用了外部函数的变量，所以当外部函数时(fun(0))被调用时,闭包n已经产生，保存在内部函数的作用域中。
3.这题的注意点：每次调用外部函数时，都会产生一个闭包，每个闭包都是不同的；每次调用内部函数时，都会产生一个执行上下文环境，每个执行上下文环境是不同的。
解析图：

image.png
第一个输出：
全部是对象a对内部函数fun的调用，所以永远都是使用的A0闭包，那么n的值永远都是0，所以答案是undefied,0,0,0
第二个输出：
相当于以下形式
/*
对象a = fun(0)
对象b = 对象a.fun(1)
对象c = 对象b.fun(2)
对象d = 对象c.fun(3)
/
所以答案是：undefuned,0,1,2
第三个输出：
相当于以下形式
/
对象a = fun(0)
对象b = 对象a.fun(1)
对象b = 对象b.fun(2)
对象b = 对象b.fun(3)
*/
所以答案是：undefined,0,1,1

---

鸡肋闭包

变量得到作用域链与闭包同时存在

<script>
   function wrap() {
         var a="a-val";
         function inner() {
             console.log(a);   //变量a通过作用域链与闭包都能找到
         }
         inner();    //return inner;
     }
     wrap();
</script>

---

原型&原型链

原型.png 经典的原型链图谱.jpg
规则：
---显示原型：所有的函数都有一个显示原型
---隐式原型：所有的对象都有一个隐式原型
---所有对象的隐式原型指向其构造函数的显示原型
---大写的Function构造函数的proto(隐式原型)指向本身的prototype(显示原型)
---所有原型对象看成一个{},所有的原型对象的proto指向object.prototype
---object.prototype__proto__(object.prototype的隐式原型)
恒等于(===)null,null(原型链的头)
---所有的原型对象都有一个constructor属性指向原函数

---

原型链(原型)的作用

原型   服务于属性的查找与设置

--
属性查找：
---先在属性的直接对象中找，如果找到直接返回
如果找不到,上原型链上面找(只有隐式原型链，没有显示原型链)，如果找到就返回
如果在隐式原型链上没有找到对应的显示原型，就返回undefined

image.png

--
属性设置
---永远只影响对象的直接属性，跟原型链没关系
如果对象中有此属性则直接将此属性的属性值改掉
如果对象中没有此属性则将此属性添加至对象中

 <script>
        Object.prototype.name="siri";   //所有的对象都可以继承Object.prototype的属性和方法
        var obj = {

        }
         //obj对象中没有name属性，所以obj.name操作是将name属性及属性值添加至obj对象中，此过程并没有影响原型链
        obj.name = "tom";      
        console.log(obj);
        console.log(Object.prototype);
    </script>

image.png

方法重写

默认的数组的原型链：
arr.proto ——>Array.prototype
Array.prototype__proto__ ——>Object.prototype
Object.prototype__proto__ ——>null
Array.prototype ——>Object.prototype——>null就是原型链

 <script>
        var arr = [1,2,3]
        //方法的重写，原本的toString方法被改写掉了
        console.log(arr.toString());   
        console.log(Object.prototype.toString.call(arr));
    </script>

image.png

怎么判断一个对象是不是数组？(面试题)

--
使用isArray()API来判断

 //isArray()API兼容移动端不太友好
        var arr = [1,2,3];
        console.log(Array.isArray(arr));

--
使用Object.prototype.toString()方法来判断

//使用Object.prototype.toString()方法
        function isArray(obj){
            //调用toString()方法的返回值是[object type],type视传入的参数而定
           return Object.prototype.toString.call(obj).indexOf("Number") === 8;
        }
        console.log(isArray(12) );

--
使用instanceof来判断

 /*
        使用instanceof来判断
        a(对象) instanceof b(构造函数)
        */
        console.log([] instanceof Array);   //true

---

instanceof的深度解析
a(对象) instanceof b(构造函数)：查找构造函数的显示原型(b.prototype)是否出现在a的隐式原型链上(a.proto)
注意点：instanceof的对象(也就是a)一般不写基本数据类型来判断
--
改写instanceof规则

 <script>
        function Person(){

        }
        var p = new Person()
        p.__proto__ = Array.prototype;      //将p的隐式原型(b.__proto__)指向Array的显示原型(Array.prototype)
        console.log(p instanceof Array);   //true
        console.log(p instanceof Person);   //false
    </script>