JS高级原型、闭包

函数高级

原型(prototype)

函数的prototype属性

每个函数都有一个prototype属性, 它默认指向一个Object空对象(即称为: 原型对象)

原型对象中有一个属性constructor, 它指向函数对象

给原型对象添加属性(一般都是方法)

作用: 函数的所有实例对象自动拥有原型中的属性(方法)

原型链

1.原型链(图解)
原型链的本质是隐式原型链，因为原型链的形成是真正是靠proto 而非prototype
对象可以分为普通对象Object和函数对象Function()

访问一个对象的属性时，

• 先在自身属性中查找，找到返回
• 如果没有, 再沿着proto这条链向上查找, 找到返回
• 如果最终没找到, 返回undefined

2.构造函数/原型/实体对象的关系(图解)
 

原型链的属性问题

1. 读取对象的属性值时: 会自动到原型链中查找
2. 设置对象的属性值时: 不会查找原型链, 如果当前对象中没有此属性, 直接添加此属性并设置其值
3. 方法一般定义在原型中, 属性一般通过构造函数定义在对象本身上

constructor属性

var p = new Person();
//方法才有prototype,普通对象无prototype
console.log(Person.prototype); // Object{} 
console.log(p.prototype); // undifined

//任何对象都是有构造函数constructor，由构造函数创建的对象也可以获得构造函数的引用
//此处只是打印下列对象的构造函数是什么。
console.log(p.constructor); //function Person(){}  
console.log(Person.constructor); //function Function(){} 
console.log({}.constructor); // function Object(){}
console.log(Object.constructor); // function Function() {}
console.log([].constructor);  //function Array(){} 

instanceof

1.instanceof是如何判断的？

• 表达式: A instanceof B
• 如果B函数的显式原型对象在A对象的原型链上, 返回true, 否则返回false

2.Function是通过new自己产生的实例，所以有Function__proto__ === Function.prototype

闭包

什么是闭包

1.如何产生闭包?

• 当一个嵌套的内部(子)函数引用了嵌套的外部(父)函数的变量(函数)时, 就产生了闭包

2.闭包到底是什么?

• 使用chrome调试查看（新版chrome浏览器需要手动return 子函数才能看到）
• 理解一: 闭包是嵌套的内部函数(绝大部分人)
• 理解二: 包含被引用变量(函数)的对象(极少数人)
• 注意: 闭包存在于嵌套的内部函数中

3.产生闭包的条件?

• 函数嵌套
• 内部函数引用了外部函数的数据(变量/函数)

4.常见使用闭包情况

• 将函数作为另一个函数的返回值

• 将函数作为实参传递给另一个函数调用

    // 1. 将函数作为另一个函数的返回值
    function fn1() {
      var a = 2
      function fn2() {
        a++
        console.log(a)
      }
      return fn2
    }
    var f = fn1()
    f() // 3
    f() // 4
  
    // 2. 将函数作为实参传递给另一个函数调用
    function showDelay(msg, time) {
      setTimeout(function () {
        alert(msg)
      }, time)
    }
    showDelay('atguigu', 2000)

闭包的作用

1. 使用函数内部的变量在函数执行完后, 仍然存活在内存中(延长了局部变量的生命周期)
2. 让函数外部可以操作(读写)到函数内部的数据(变量/函数)

问题:

1. 函数执行完后, 函数内部声明的局部变量是否还存在? 一般是不存在, 存在于闭中的变量才可能存在
2. 在函数外部能直接访问函数内部的局部变量吗? 不能, 但我们可以通过闭包让外部操作它

闭包的生命周期

1. 产生: 在嵌套内部函数定义执行完时就产生了(不是在调用)

2. 死亡: 在嵌套的内部函数成为垃圾对象时

   function fn1() {
     //此时闭包就已经产生了(函数提升, 内部函数对象已经创建了)
     var a = 2
     function fn2 () {
       a++
       console.log(a)
     }
     return fn2
   }
   var f = fn1()
   f() // 3
   f() // 4
   f = null //闭包死亡(包含闭包的函数对象成为垃圾对象)

闭包的应用

闭包的应用2 : 定义JS模块

• 具有特定功能的js文件
• 将所有的数据和功能都封装在一个函数内部(私有的)
• 只向外暴露一个包信n个方法的对象或函数
• 模块的使用者, 只需要通过模块暴露的对象调用方法来实现对应的功能

闭包的缺点

1.缺点

• 函数执行完后, 函数内的局部变量没有释放, 占用内存时间会变长
• 容易造成内存泄露

2.解决

• 能不用闭包就不用
• 及时释放 （设置为Null）

      //代码片段一
      var name = "The Window";
      var object = {
        name : "My Object",
        getNameFunc : function(){
          return function(){
            return this.name;
          };
        }
      };
      alert(object.getNameFunc()());  //  the window
    
    
      //代码片段二
      var name2 = "The Window";
      var object2 = {
        name2 : "My Object",
        getNameFunc : function(){
          var that = this;
          return function(){
            return that.name2;
          };
        }
      };
      alert(object2.getNameFunc()()); //  my object

    <script type="text/javascript">
        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
    </script>