JS学习之闭包、this关键字、预解释、作用域综合

最新推荐文章于 2022-01-21 13:37:18 发布

转载最新推荐文章于 2022-01-21 13:37:18 发布 · 130 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/cataway/p/4878350.html

本文详细解析了一段JavaScript代码中涉及的作用域、闭包及变量提升等概念，通过具体示例帮助读者理解JavaScript中复杂的执行上下文。

 1     var num = 2;//window.number=2
 2     var obj = {
 3         num: 4, //obj.number=4
 4         fn: (function () {
 5             this.num *= 2; //自执行函数this是window的num，这里window的num=2*2=4
 6             num = num * 2; //undefiend
 7             var num = 3;
 8             return function () {
 9                 this.num *= 2;
10                 num *= 3;
11                 alert(num);
12             }
13         })(),
14         db2: function () {
15             this.num *= 2
16         }
17     };
18 
19     var fn = obj.fn1;
20     alert(num);// 4
21     fn();// window.num=8  弹出9
22     obj.fn();//  obj.num=8  弹出9*3=27
23 
24     alert(window.num); // 8
25     alert(obj.num);   // 8

从头到尾一步步分析上面的代码执行步骤：
window下的预解释：
    var num; var obj; var fn;
window下的代码执行:
    num=2;
    obj=xxxfff000;
    [开辟一个堆内存xxxfff000]
        num:4
        fn:自执行函数的返回值
            形成一个不销毁的私有作用域-A
            A下的预解释：
                var num;
            A下的代码执行：
                this.num*=2;//window.num=4
                num*=2;//num=undefined*2=NaN
                num=3;
                return function(){.} xxxfff111
        fn:function(){//上级作用域就是A
            this.num*=2;
            num*=3;
            console.log(num);
        } xxxfff111

    fn=obj.fn; //fn=xxxfff111
    console.log(num);//4
    fn();
        xxxfff111()行成一个私有的作用域
        预解释：无
        代码执行:
            this.num*=2;//window.num=8
            num*=3;//让上级作用域A中的num=9
            console.log(num);//9
    obj.fn();
        xxxfff111()行成一个私有的作用域
        预解释：无
        代码执行:
            this.num*=2;//obj.num=8
            num*=3;//让上级作用域A中的num=27
            console.log(num);//27
    console.log(window.num);//8
    console.log(obj.num);//8