《深入理解javascript原型和闭包系列》 知识点整理(转)

深入理解javascript原型和闭包系列 对原型和闭包等相关知识的讲解，由浅入深，通俗易懂，每个字都值得细细研究。

一、一切都是对象

1. typeof操作符输出6种类型：string boolean number undefined function object
2. 数组、null object都是object类型
3. 对象：若干属性的集合。js中，数组是对象，函数是对象，对象是对象
4. 函数和对象的关系：
    1. 函数生成对象：通过new构造函数生成实例对象
    2. 函数是一种对象：
        1. 所有的函数都有一个prototype（原型）属性，是一个对象，这个对象中默认的存在一个constructor属性指向函数本身。
        2. 每个对象都有一个隐藏的属性:`__proto__`，指向创建这个对象的构造函数的prototype
        3. 函数也是对象，当然也有`__proto__`属性，指向Function.prototype(大写Function的原型)
        4. 总结：
            1. 自定义构造函数(也是对象)的`__proto__`指向Function.prototype;
            2. Object.`__proto__`也指向Function.protorype;
            3. Function.`__proto__`指向Function.prototype(Function这个对象，当然是被Function函数自身创建的，所以指向自身的prototype)
        5. Function.prototype这个对象，是被Object创建的对象，它的隐藏`__proto__`属性，指向Object.prototype，最后，Object.prototype指向Null！

二、 继承

1. 访问一个对象的属性时，先在基本属性中查找，如果没有找到，沿着`__proto__`这个属性（指向构造函数的prototype）往上找
2. 实际应用中如何区分一个属性是自有的还是在原型中的呢？——obj.hasOwnProperty(proName)

3.每个函数都有call、apply方法，length、arguments等属性，肯定是继承的，都是继承自Function.prototype

4. 原型的灵活性：

在Java和C#中，你可以简单的理解class是一个模子，对象就是被这个模子压出来的一批一批月饼。
        压个啥样，就得是个啥样，不能随便动，动一动就坏了。
        而在javascript中，就没有模子了，月饼被换成了面团，你可以捏成自己想要的样子。

三、执行上下文

1. **一段代码**在正真一行一行执行前，浏览器事先做了准备工作：
    1. 对变量的**声明**，但不赋值，赋值是在执行到赋值语句时进行的
    2. 直接对this进行**赋值**
    3. 函数：
        1. 函数声明：function foo(){}        //把函数名赋值了！
        2. 函数表达式： var foo = function(){}  //由于是var的变量，与第一种情况一样，只声明，不赋值
    4. 总结：
        1. var出来的变量，函数表达式，只声明，不赋值，默认undefined
        2. this：赋值
        3. 函数声明：赋值

2. 执行**代码段**前的这个准备工作，就叫做执行上下文/上下文环境/执行环境
3. 这个**代码段**其实又分为三种情况：
    1. 全局代码
    2. eval()
    3. 函数【重点↓】

4. 函数代码段中的执行上下文有这些数据：
    1. var 出来的变量只声明，没赋值
    2. this和函数声明已经赋值
    3. 特殊的地方：
        1. arguments变量和函数的参数都已经被赋值

function foo(x){
                    console.log(arguments);
                    console.log(x);
                }
                foo(10);
                //在进入函数体内部开始执行之前，函数体内部的arguments和参数x已经被赋值了

　　　2. **自由变量的取值作用域：赋值**

5. 由此可知，函数每调用一次，都会产生一个新的执行上下文环境，因为不同的调用可能会有不同的参数传入

6. 函数在定义的时候（不是调用的时候），就已经确定了函数体内部**自由变量**的**作用域**

        var a =10;
        function fn(){
            console.log(a);
            //本函数在创建的时候就决定了这个a要取值的作用域：全局作用域
        }
 
        function bar(f){
            var a = 20;
            f();
        }
 
        bar(fn);    //10

7. 关于this的一点小问题

        var obj  = {
          x:10,
          fn:function(){
               function f(){
                 console.log(this);
                 console.log(this.x);
               }
               f();
          }
        };
        obj.fn();    //this指window
        /*
            obj.fn保存了指向
                    function(){
                       function f(){
                         console.log(this);
                         console.log(this.x);
                       }
                       f();
                   }
            的指针，加一个():   =>obj.fn()表示开始调用：
                function f(){
                         console.log(this);
                         console.log(this.x);
                       }
                f();
            这个f函数在window环境调用执行，所以this指向window
        */

8. 上下文环境的执行顺序
    1. 执行全局代码时，会产生一个全局上下文环境。
    2. 每次调用函数时，会产生函数内部的执行上下文环境。
    3. 当函数调用完成时，这个上下文环境以及其中的数据都会被消除，再重新回到全局上下文环境。
    4. 处于活动状态的执行上下文环境只有一个。

            var a=10;
            function bar(x){
                var b = 5;
                fn(x+b);
            };
            function fn(y){
                var c = 5;
                console.log(y+c);
            };
 
            bar(10);
            ----------------解析----------------------
            /*
            1. 产生全局上下文执行环境,该声明的声明，该赋值的赋值
                1. a = 10 ； fn = function();  bar  = function()
 
            2. 到调用bar(10)函数时，进入bar函数内部，产生函数内部的执行上下文环境，该声明的声明，该赋值的赋值
                1. b = 5; x = 10; arguments = [10]
 
            3. 接着调用fn函数，进入fn函数内部，产生函数内部的执行上下文环境，该声明的声明，该赋值的赋值
                2. c = 5 ; y = 15;
 
            4. fn函数执行完毕，它对应的上下文执行环境都会被销毁，里面保存的数据都没有了
            5. bar函数同样如此，它对应的上下文执行环境都会被销毁，数据清除
            */

四、自由变量和作用域

1. 作用域：javascript除了全局作用域之外，只有函数可以产生作用域。所以，在声明变量时，全局代码要在代码前端声明，函数中要在函数体一开始就声明好。除了这两个地方，其他地方都不要出现变量声明。而且建议用“单var”形式。
2. 作用域就是一个地盘，最大的用处就是隔离变量，使不同作用域下相同的变量名不会产生冲突
3. 每个函数都会创建自己的作用域，作用域在函数**定义**的时候就已经确定了，而不是在调用的时候确定

        var a = 10,b=20;
 
        function fn(x){
            var a =100, c = 300;
 
            function bar(x){
                var a = 1000,d = 4000;
                console.log(x);
                console.log(a);
                console.log(b);
                console.log(c);
                console.log(d);
            }
 
            bar(100);
            bar(200);
        }
 
        fn(10);
        ----------------------解析：--------------------------
        /*
 
        1. 产生全局上下文执行环境,该声明的声明，该赋值的赋值
            1. a = 10;  b=20; fn = function();  
 
        2. 到调用fn(10)函数时，进入fn函数内部，产生函数内部的执行上下文环境，该声明的声明，该赋值的赋值
            1. a = 100 ; c = 300 ; x = 10 ; arguments = [10]  ; bar = function()
 
        3. 到调用bar(100)函数时，进入bar函数内部，产生函数内部的执行上下文环境，该声明的声明，该赋值的赋值
            1. a = 1000 ; d = 4000 ; x = 100;
        4. 到调用bar(200)函数时，进入bar函数内部，产生函数内部的执行上下文环境，该声明的声明，该赋值的赋值
            1. a = 1000 ; d = 4000 ; x = 200;
            2. 与bar(100)函数相比较，同一个作用域，不同的调用，产生不同的执行上下文环境
 
        5. 总结：
            1. 作用域只是一个“地盘”，一个抽象的概念，其中没有变量。
            2. 要通过作用域对应的执行上下文环境来获取变量的值。
            3. 同一个作用域下，不同的调用会产生不同的执行上下文环境，继而产生不同的变量的值。
            4. 作用域中变量的值是在执行过程中产生的确定的，而作用域却是在函数创建时就确定了。
            5. 所以，如果要查找一个作用域下某个变量的值，就需要找到这个作用域对应的执行上下文环境，再在其中寻找变量的值。
 
        */

4. 自由变量：在函数内部中使用的变量x，却没有在函数内部声明，也就是在其他作用域中声明的，对这个函数来说，x就是自由变量

        var x= 10;
 
        function fn(){
            var b = 20;
            console.log(x+b);
            //x就是自由变量
        }
        /*
            1. b从本作用域中取，x就要到另外的作用域中取,
            2. 是到fn的父级作用域取吗？不是的！
        */
        --------------------分割线---------------------------
 
        var x=  10;
 
        function fn(){
            console.log(x);
        }
 
        function show(f){
            var x = 20;
 
            function foo(){
                f();    //10
            }
            foo();
        }
 
        show(fn);
        //因此：要到创建这个函数的那个作用域中取值——是“创建”，而不是“调用”，切记切记。
        //创建fn函数的作用域是window，所以，x = 10；
        /*
            总结一下：
                1. 先在当前作用域查找变量x，没有找到则继续；
 
                2. 如果当前作用域是全局作用域，则证明x未定义，结束；否则继续；
 
                3. 不是全局作用域，那就是函数作用域，将**创建该函数的作用域**作为当前作用域；
 
                4. 跳到第一步循环……
 
        */

5. 必须多次重复强调：要去**创建**这个函数的作用域取值，而不是“父作用域”。

五、最后的闭包：

1. 一般情况下，当一个函数被调用完成之后，其执行上下文环境将被销毁，其中的变量也会被同时销毁。
2. 但有些情况下，函数调用完，其执行上下文环境没有销毁，其中的变量也还在内存中，这就是闭包的核心内容。

        function fn(){
            var max = 10 ; 
 
            return function bar(x){
                if(x>max){console.log(x);}
            };
        }
 
        var f1 = fn(),max = 100 ;
 
        f1(15);
 
        ----------------解析：---------------------
        /*
        1. 执行所有代码前，先生成全局上下文执行环境，该声明的声明，该赋值的赋值
            1. fn = function() ; f1 = undefined ; max = 100;
 
        2. 执行fn()函数，进入fn函数的上下文执行环境，声明、赋值
            1. max = 10 ； bar = function() ;
            2. 执行fn函数里的语句，把bar函数return出去，赋值给fn
 
        3. 【重点】此时，fn函数执行完毕了，按理来说，fn的上下文执行环境应该被销毁，变量从内存清除，但在这里不能这么做！！
            1. 因为执行fn函数的过程中返回了一个bar函数，这个bar函数的特别之处在于， 它创建了一个自己独立的作用域。
            2. 在bar函数内部，有一个max自由变量，如果自己没有，就要到创建这个函数的作用域中找，就是fn函数作用域中的max
            3. 所以，这个max不能被销毁，fn函数的上下文执行环境不能被销毁，依然存在于执行栈中。
 
        4. 也就是说，执行完var f1 = fn() ,max  = 100;之后，全局上下文环境将变为活动状态，但是fn()上下文环境依然会在执行上下文栈中。
        5. 创建bar函数是在执行fn函数时创建的。fn()早就执行结束了，但是fn()执行上下文环境还存在与栈中，里面的变量声明、赋值都还在，
        6. 因此bar(15)时，max可以查找到。如果fn()上下文环境销毁了，那么max就找不到值了。
        */

六、上下文环境和作用域的关系

1. 上下文环境：就是一个对象，里面保存了许多属性，所有变量都在这个对象里面存着。对于函数来说，上下文环境是在调用函数的时候创建

2. 作用域：是一个地盘，一个抽象的概念，规定了变量起作用的范围。除了全局作用域之外只有函数才能创建作用域，作用域在函数定义时确定，而不是在函数调用时确定。
3. 关系：
    1. 要通过作用域对应的执行上下文环境来获取变量的值。
    2. 同一个作用域下，不同的调用会产生不同的执行上下文环境，继而产生不同的变量的值。
    3. 作用域中变量的值是在执行过程中产生的确定的，而作用域却是在函数创建时就确定了。 
    4. 如果要查找一个作用域下某个变量的值，就需要找到这个作用域对应的执行上下文环境，再在其中寻找变量的值。

 

 

标签: JavaScript,