js高级 2

6 函数高级

原型与原型链

1. prototype属性，每个函数都有，默认指向一个object空对象（原型对象），原型对象中有属性constructor，指向函数对象也就是

   fun.prototype.constructor === fun    //true  构造属性和原型对象相互引用
   

2. 可以为原型对象添加属性（一般添加方法），函数的所有实例对象自动拥有原型中的属性（方法）

   var Fun = new fun()
   Fun.test() //这样就可以使用原函数中的方法了
   

3. 获取函数的prototype属性，可以使用fun(函数名).prototype

4. 为函数的prototype添加属性

   fun.prototype.test = function(){
       执行语句；
   }//这样就向fun函数中添加了test方法
   

显式原型和隐式原型

1. 显式原型：prototype
   隐式原型：__proto__
   

2. 每个函数function都有一个prototype，即显式原型（属性）

   每个实例对象都有一个proto，可称为隐私原型（属性）

   对象的隐式原型的值 等于 其对应构造函数的显式原型的值

   内存结构

3. 总结：

   • 所有引用类型（函数，数组，对象）都拥有__proto__属性（隐式原型)

   • 所有函数除了有_proto_属性之外还拥有prototype属性（显式原型）

   • 函数的prototype属性：在定义函数时自动添加的，默认值是一个空object对象

   • 对象的proto属性：创建对象时自动添加的，默认值为构造函数的prototype属性值

   • prototype也是一个对象，因此它也具有_proto_属性，默认指向一个空对象

• 程序员能直接操作显式原型，但不能直接操作隐式原型（ES6之前）
• 

原型链

1. 在访问对象属性时，首先在自身的属性中查找，若没有则沿着_proto_隐式原型向上查找，直到查找到，否则返回undefined

2. js在加载页面时会首先将一些方法加载进来，放在Object对象的prototype原型对象里面

3. 原型链属性。

   function Fn(){}
   Fn.prototype.a = '111'
   var fn1 = new Fn()
   console.log(fn1.a)//打印111
   var fn2 = new Fn()
   fn2.a = '222'//这一步其实是在为实例fn2添加属性a，不会出现在_proto_隐式原型中
   console.log(fn1.a, fn2.a)//打印111 222
   

4. 一般把方法定义在原型中，将属性通过构造函数定义在对象本省

5. 例题

instanceof

1. object instanceof constructor，用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上

执行上下文与执行上下文栈

• 变量提升与函数提升

  • 变量提升: 在变量定义语句之前, 就可以访问到这个变量(undefined)
  • 函数提升: 在函数定义语句之前, 就执行该函数
  • 先有变量提升, 再有函数提升

• 理解

  • 执行上下文: 由js引擎自动创建的对象, 包含对应作用域中的所有变量属性
  • 执行上下文栈: 用来管理产生的多个执行上下文
    • 执行上下文栈的地步永远是windows全局执行上下文
    • 函数调用时进栈，调用完成出栈

• 分类:

  • 全局: window
  • 函数: 对程序员来说是透明的

• 生命周期

  • 全局 : 准备执行全局代码前产生, 当页面刷新/关闭页面时死亡
  • 函数 : 调用函数时产生, 函数执行完时死亡

• 包含哪些属性:

  • 全局 :
    • 用var定义的全局变量 ==>undefined
    • 使用function声明的函数 ===>function
    • this ===>window
  • 函数（局部）
    • 用var定义的局部变量 ==>undefined
    • 使用function声明的函数 ===>function
    • this ===> 调用函数的对象, 如果没有指定就是window
    • 形参变量 ===>对应实参值
    • arguments ===>实参列表的伪数组

• 执行上下文创建和初始化的过程

  • 全局:

    • 在全局代码执行前最先创建一个全局执行上下文(window)
    • 收集一些全局变量, 并初始化
    • 将这些变量设置为window的属性

  • 函数:

    • 在调用函数时, 在执行函数体之前先创建一个函数执行上下文

    • 函数执行上下文：形参变量—其赋值—添加为执行上下问的属性；arguments—其赋值—添加为执行上下文属性；var定义局部变量—undefined，添加为执行上下文属性；function声明函数—赋值—添加为执行上下文属性；this—赋值为调用函数的对象，不指定情况下为windows

    • 收集一些局部变量, 并初始化

    • 将这些变量设置为执行上下文的属性

    • if(!(b in window)){
        var b
      }
      console.log(b) //这里输出undefind，之所以这样是因为这里b暴露，不分块级作用域类
      

作用域与作用域链

1. 区别作用域与执行上下文

   • 作用域: 静态的, 编码时就确定了(不是在运行时), 一旦确定就不会变化了
   • 执行上下文: 动态的, 执行代码时动态创建, 当执行结束消失
   • 联系: 执行上下文环境是在对应的作用域中的

2. 作用域例题，作用域在其函数定义时就确定了，不会因为递归或者引用而改变

闭包

1. 闭包是指有权访问另一个函数作用域中变量的函数，而变量所在的函数就是一个闭包函数

2. 作用：延伸变量的作用范围，延长变量的生命周期

3. 匿名函数（立即执行函数）又称小闭包，因为立即执行函数中的任何函数都可以使用它传入的参数变量；立即执行函数的this指向window

4. function fn(){
       var num = 10
       function fun() {
           num = num+1 //闭包这里必须要是用num才能在外部访问
       }
       return fun;
   }
   var f = fn();
   f();
   
   //闭包的经典例题
   var lis = document.querySelector('.nav').querySelectorAll('li')
   for(var i=0; i<lis.length; i++){
       (function (i) {
           lis[i].onclick = function(){
               console.log(i)//如果点击事件不执行，那么i一直存在不会销毁，内存泄露
           }
       })(i);
   }
   

5. 常见闭包

   • 将函数作为另一个函数的返回值
   • 将函数作为另一个函数的实参传入

6. 闭包函数执行几次，就产生几个闭包，且变量是不会销毁的

7. 闭包的生命周期：闭包在函数内部的函数提升完成后产生（函数定义执行后），在指向闭包对象的对象成为垃圾对象后死亡（f=null）

8. 闭包的应用

   * 具有特定功能的js文件

   * 将所有的数据和功能都封装在一个函数内部(私有的)

   * 只向外暴露一个包信n个方法的对象或函数

   * 模块的使用者, 只需要通过模块暴露的对象调用方法来实现对应的功能

   function myModule() {
     //私有数据
     var msg = 'My atguigu'
     //操作数据的函数
     function doSomething() {
       console.log('doSomething() '+msg.toUpperCase())
     }
     function doOtherthing () {
       console.log('doOtherthing() '+msg.toLowerCase())
     }
   
     //向外暴露对象(给外部使用的方法)
     return {
       doSomething: doSomething,
       doOtherthing: doOtherthing
     }
   }//这里代码写在一个js文件中，在html文件里调用它
   ----------------
   var a = myModule()
   var a.doSomething()
   

   (function () {
     //私有数据
     var msg = 'My atguigu'
     //操作数据的函数
     function doSomething() {
       console.log('doSomething() '+msg.toUpperCase())
     }
     function doOtherthing () {
       console.log('doOtherthing() '+msg.toLowerCase())
     }
   
     //向外暴露对象(给外部使用的方法)
     window.myModule2 = {
       doSomething: doSomething,
       doOtherthing: doOtherthing
     }
   })()//这样调用时返回值直接添加为window属性，可以直接调用不通过对象赋值
   ------------------
   myModule2.doSomething()
   myModule2.doOtherthing()
   

9. 闭包的缺点及解决方案

   1. 缺点

   ​ * 函数执行完后, 函数内的局部变量没有释放, 占用内存时间会变长

   ​ * 容易造成内存泄露

   2. 解决

   ​ * 能不用闭包就不用

   ​ * 及时释放

10. 内存溢出和内存泄露

    1. 内存溢出

       * 一种程序运行出现的错误

       * 当程序运行需要的内存超过了剩余的内存时, 就出抛出内存溢出的错误

    2. 内存泄露

       * 占用的内存没有及时释放

       * 内存泄露积累多了就容易导致内存溢出

       * 常见的内存泄露:

       ​ * 意外的全局变量

         \* 没有及时清理的计时器或回调函数//`启动循环定时器后需清理`**setInterval**需要clearInterval
       

       ​ * 闭包

  function fun(n,o) {
    console.log(o)
    return {
      fun:function(m){
        return fun(m,n)
      }
    }
  }
  var a = fun(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