JavaScript （7）

闭包

首先来简述什么是闭包

    <script>
        var local="变量";
        function foo(){
            console.log(local);
        }
    </script>

假设上面三行代码在一个立即执行函数中（为简明起见，我就不写立即执行函数了，影响理解）。

三行代码中，有一个局部变量 local，有一个函数 foo，foo 里面可以访问到 local 变量。这就是一个闭包.

「函数」和「函数内部能访问到的变量」的总和，就是一个闭包。

为什么有的人认为闭包是需要函数套函数呢？

是因为需要局部变量，所以才把 local 放在一个函数里，如果不把 local 放在一个函数里，local 就是一个全局变量了，达不到使用闭包的目的——隐藏变量

    <script>
        //闭包
        var local="变量";
        function foo(){
            console.log(local);
        }

        function ce1(){
            var local="变量";
            function foo(){
                return local;
            }
        }

        function ce2(){
            var local="变量";
            return local;
        }

        function ce3(){
            var local="变量";
            function foo(){
                //修改局部变量的值
                return local;
            }
            return foo;
        }
    </script>

「函数」和「函数内部能访问到的变量」

闭包是 JS 函数作用域的副产品。

正是由于 JS 的函数内部可以使用函数外部的变量，所以这段代码正好符合了闭包的定义。

原型和原型链

prototype

在传统的 OOP 中，首先定义“类”，此后创建对象实例时，类中定义的所有属性和方法都被复制到实例中。在 JavaScript 中并不如此复制，而是在对象实例和它的构造器之间建立一个链接（它是__proto__属性，是从构造函数的prototype属性派生的），之后通过上溯原型链，在构造器中找到这些属性和方法。

1. 每个函数上面都有一个属性(prototype)指向了函数的原型对象(Person.prototype)。

function Person() { }

console.log(Person.prototype);

即使你只定义了一个空函数，也存在一个prototype的属性。

例子尽管我们什么都不做，但是浏览器已经在内存中创建了两个对象：Person(函数)和Person.prototype，其中，我们称Person为构造函数，因为我们后面要用到这个函数来new对象，Person.prototype称为Person的原型对象，简称原型。

1. 每个实例上面都有一个隐式原型(proto)指向了函数的原型对象，如本例子中的p1对象有一个隐式原型也指向了Person.prototype对象 

 2.每个实例上面都有一个隐式原型(proto)指向了函数的原型对象，如本例子中的p1对象有一个隐式原型也指向了Person.prototype对象

3.实例访问属性或者方法的时候，遵循以为原则：

3.1如果实例上面存在，就用实例本身的属性和方法。

3.2如果实例上面不存在，就会顺着__proto__的指向一直往上查找，查找就停止。

 4.每个函数的原型对象上面都有一个constructor属性，指向了构造函数本身。

我们根据这4条规则绘制成了上述的关系图，这里我们可以看出Person的原型Person.prototype有一个属性constructor又指向Person构造函数本身。

原型链 

对象在寻找某一属性时，如果自身属性没找到就去他对应的原型对象去找。若在原型上面找到对应的属性则停止，否则继续去原型的原型找对应的属性，这样构成了一条原型链。上一节中Person的原型其实还有一属性__proto__，他指向了上一级Object的原型对象。

console.log(Person.prototype.__proto__ === Object.prototype); //true

这时候来了一个Object对象，它是JavaScript的顶级对象，同样也有自己的原型Object.protoype，这时候Person对象以及它的原型，Object对象已经对应的原型关系如下图所示。

 将Object和Person联系起来的关键是Person.prototype的属性__proto__，它指向了Object.prototype，它将两者打通，构成一个链式关系。同时你也看到Object的prototye也指向了Object.prototype，所以console.log(Person.prototype.proto === Object.prototype)输出的额结果是true。

    <script>
        //原型
        // var arr1 = [1,2,2,9,7];
        // var arr2 = [1,2,2,9,7,1,1];
        // arr1.sort(function(a,b) {
        //     return a - b ;
        // });
        // arr2.sort(function(a,b){
        //     return a - b;
        // });
        // console.log(arr1);
        // console.log(arr2);
        // console.log(arr1 === arr2);
        // console.log(arr1.sort === arr.sort);

        //数组中的这个公共的方法sort是怎么产生的？
        var arr1 = [1,0,0,8,6];
        var arr2 = [1,0,0,5,6,1,1];
        arr1.getSum = function() {
            var sum = 0 ;
            for(var i = 0; i < this.length; i++){
                sum += this[i]; 
            }
        }
        console.log(arr1.getSum());
        console.log(arr2.getSum());

        // 如何让arr2也具有getSum()方法？
        // 给arr2声明创建一个与arr1一样的getSum()方法。
        // 上面的解决方法虽然可以解决我们的问题，但是我们或把代码重复编写。
        // 如何在不重复编写代码的情况下使arr2也具有getSum()方法？
        // 将getSum定义为原型方法

        var arr1 = [1,0,0,8,6];
        var arr2 = [1,0,0,5,6,1,1];
        //将
        Array.prototype.getSum=function() {
            var sum = 0;
            for (var i = 0; i < this.length;i++){
                
            }
        }

        function Person(stuid,stuname,stuage){
                    this.stuid=stuid;
                    this.stuname=stuname;
                    this.stuage=stuage;
                    this.getperinfo=function(){
                        alert("函数对象");
                }
            }
            var per1=new Person(1001,"zhangsan",23);
            per1.getperinfo();
            Person.prototype.test1=function(){
                alert("原型对象声明的方法");
            }
            var per2=new Person(1002,"lisi",24);
            per2.test1();
    </script>

 

总结：

1. 每一个构造函数都有一个原型对象
2. 构造函数名称.prototype属性就可以得到构造函数对应的原型对象。
3. 每一个原型对象中有2个属性constructor / __proto__
4. 原型对象的constructor属性是用来得到原型对象对应的构造函数
5. 原型对象的__proto__属性是用来得到原型对象的原型对象。
6. Object.protoype顶级原型对象。
7. 可以通过构造函数创建出实例对象【new  构造函数()】
8. 每一个实例对象都有一个 __proto__属性用来得到创建当前实例对象的构造函数对应的原型对象。