js学习重点难点知识总结 （巩固闭包、原型、原型链）

学习重点知识总结

 

1.闭包知识点巩固

       闭包函数：

                   1.可以实现函数外部访问函数内部的变量

                    2.在JavaScript只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成“定义在一个函数内部的函数”。
               用途：

                    1.可以读取函数内部的局部变量
                    2.让这些变量始终保存在内存当中（延长局部变量的生命周期）

   闭包出现的场景:

        1:函数外部能访问函数内部的变量

        2:在立即执行函数

        3:闭包可以保留变量在内存里面( 给节点集合绑定事件,获取每个节点的索引值 )

        4:柯里化函数

 

//面试题:  一个函数的调用   fn(2)(3)(4)      得到的结果位24;   这个函数是怎样写的??

    function fn(a){

        return function(b){

            return function(c){

                console.log(a * b * c);

            }

        }

    }

    fn(2)(3)(4);

    //柯里化函数   ->  使用闭包.

 

    闭包影响:

        1、由于闭包会使得函数中的变量都被保存在内存当中，内存会消耗很大，所以不能够滥用闭包，否则会造成网页性能的问题.在IE中可能导致内存泄漏   

        2、闭包会在函数外部，改变函数内部的的变量值。你会把原本的私有变量变成公用变量，这样是不行的。所以不要随便改变父级函数内部变量的值

       

                不要刻意的使用闭包，尽量少使用闭包。

                闭包就会开辟内存，可能造成内存泄漏

    拓展:js 垃圾回收机

        1:函数在执行的时候.在内存中开辟空间,存储函数的变量,如果函数执行完毕.则开辟的内存开始释放.在次调用函数,变量则继续初始化重复上面的步骤.

        2:如果函数内部的变量被相关引用的情况.则变量不会被收回.

 

面试相关：

        什么是闭包:

            1:函数外部能访问函数内部的变量

            2:闭包延长了函数内部变量的生命周期,使变量一值在内存中不被销毁

 

实例讲解：

    目的:再函数外部访问函数内部的变量.

     function fn(){

        var a = 10;

         return function(){         //在fn里面return出一个函数(闭包函数)

            a++

             return a;

         }

     }

     var n = fn();

     console.log(n());

 

     function fn(){

         var a = 10;

         a++

      console.log(a);

      }

     fn();

     fn();

     fn();

     fn();

     fn();

2.面向对象回顾

   思考: 多次实例化对象的时候.里面所用到的方法是否一致.

                     function person(name,age){

                        this.name = name;

                        this.age = age;

                        this.eat = function(){

                        }

                        this.sleep = function(){}

                    }

                    var p1 = new person('ws','10');

                    var p2 = new person('x','30');

                    console.log(p1.eat == p2.eat);  //false     只要new  都回在内存中开辟一块空间.

            prototype:

                    存储公共的属性和方法

                    扩展属性和方法

                    节省内存

                    实现继承!!!!!!!!!!

                 例如：function person(name,age){

                        this.name = name;

                        this.age = age;

                    }

                    // person.prototype.eat = function(){}

                    // person.prototype.sleep = function(){}

                    person.prototype = {

                        eat:function(){},

                        sleep : function(){}

                    }

3.作用域问题

        局部作用域（函数作用域）

        全局作用域

        作用域链: 变量以链式查找的方式.首先先访问自身.,如果自身找不到当前变量,会向父级函数查找.

4.原型链问题

 

//p1.work();     //  实例化对象能直接访问构造函数prototype上的方法。

    //console.dir(Person);  //构造函数里面的方法存在在prototype上面

    //打印p1  观察 在实例化对象里面 方法放在哪里了？？？？？？？

    //console.dir(p1);    //实例化对象的方法存放在__proto__上面

    /*

        分析：

            因为p1 是构造函数Person构造出来的。

            Person方法放在prototype

            实例化对象p1的方法放在__proto__

            猜想：Person.prototype  和 p1.__proto__   是否指向的是同一个对象。

            Person.prototype == p1.__proto__        //true

            Person.prototype  和 p1.__proto__ 向的是同一个原型对象

            p1.__proto__.eat()   p1实例化对象 通过__proto__  访问构造函数Person.prototype指向的原型对象

            p1.__proto__.__proto__.eat();

 

原型链：实例对象与原型对象的链接称作原型链。表示方式__proto__  

                原型链的查找过程：

                    实例化对象首先在查找自身的属性，如果有则直接返回，

                    如果没有当前属性，通过__proto__访问 构造这个对象的构造函数的prototype原型对象上查找。    

                    如果当前构造函数仍然没有，通过__proto__开始向Object.protoptype 查找/

 

prototype  和 __proto__   和 constructor(构造器)  之间的关系？？？

            只有函数上面才存在prototype 指向 的是一个原型对象

               

            对象里面存在__proto__  指构造函数prototype指向的原型对象。

            constructor 构造器 指向的是 构造 实例化对象的构造函数