对于(function(){}())和function(){}实例的作用域分析(里面有很多问题……)

  今天在群里看到一个问题,让我纠结了好一会。下面是我的分析,感觉里面还有很多问题,关于作用域还是不太理解,希望大家看到问题第一时间反馈给我,看到实在受不了的地方说几句都没关系,谢谢。

  请看题:

1.对象字面量中fn1函数是立即执行的函数表达式。

复制代码
            $(function(){
                var number = 2;
                var obj = {
                    number: 4,
                    fn1: (function(){
                        this.number *= 2;
                        number = number*2;
                        var number = 3;
                        return function(){
                            this.number *= 2;
                            number *= 3;
                            alert(number);
                        }
                    })()
                };
                var f = obj.fn1;
                alert(number); /* 2 */
                f(); /* 9 */
                obj.fn1(); /* 27 */ /* 因为是自执行的,number值是可以保存下来的 */
                alert(window.number); /* NaN */ 
          alert(obj.number);
/* 8 */ }) </script>
复制代码

  输出2, 9,27, NaN, 8。

  分析:

  首先看fn1这个函数,是立即执行的函数表达式,所以var f = obj.fn1的时候,已经访问fn1函数下的内容了。在立即执行函数表达式fn1中,this.number为NaN,因为在此访问不到自己的属性和方法(这个我也说不太清楚为什么,求解……);number = number * 2为NaN,因为number是undefined,这是根据预解析的缘故,会先定义var number; number= number *2; number = 3。接下来又定义了var number = 3,在该作用域中和内部作用域中,number暂时都是为3的。在return function(){}中,因为外部立即执行的函数表达式,所以this.number是有效的(求解……),number = number *3是根据外部作用域number值决定的。

  alert(number);输出2,因为预解析的缘故。

  f();输出9,因为外部number为3,所以3*3 = 9。

  obj.fn1();输出27,因为是立即执行函数,所有具有保存变量值的作用,number值是9,再用9*3 = 27,。

  alert(window.number);输出NaN,因为是在加载后输出,要让window.number有效,只能在局部作用域内才可以。

  alert(obj.number);输出8,因为fn1中this.number失效,return function()中this.number有用,所以只执行return 函数中的this.number *= 2。

2.对象字面量中fn1函数不是立即执行的函数表达式

复制代码
            $(function(){
                var number = 2;
                var obj = {
                    number: 4,
                    fn1: function(){
                        this.number *= 2;
                        number = number*2;
                        var number = 3;
                        return function(){
                            this.number *= 2;
                            number *= 3;
                            alert(number);
                        }
                    }
                };
                var f = obj.fn1();
                alert(number); /* 2 */
                f(); /* 9 */
                obj.fn1()(); /* 9 */ /* 这个和上面作用域不一样了,因为不是表达式,不是立即执行的,在新的作用域又全都是新的 */
                alert(window.number); /* NaN */
                alert(obj.number); /* 16 */

            })
复制代码

  输出2, 9, 9, NaN,16。

  分析:

  首先看fn1这个函数,它是一个函数引用(需调用才会执行),所以var f = obj.fn1()(后面需接括号)的时候,已经访问fn1函数下的内容了。在立即执行函数表达式fn1中,this.number为有效的,在一般函数可以访问到自己的属性和方法;number = number * 2为NaN,因为number是undefined,这是根据预解析的缘故,会先定义var number; number= number *2; number = 3。接下来又定义了var number = 3。在return function(){}中,因为外部函数为一般函数,所以this.number是无效的(求解……),number = number *3是根据外部作用域number值决定的。

  alert(number);输出2,因为预解析的缘故。

  f();输出9,因为外部number为3,所以3*3 = 9。

  obj.fn1()();输出9,因为它和f()不在同一作用域中,它调用了fn1()初始化number = 3,后面再输出一个obj.fn1()()还是为9。

  alert(window.number);输出NaN,因为是在加载后输出,要让window.number有效,只能在局部作用域内才可以。

  alert(obj.number);输出16,因为fn1中this.number有用,return function()中this.number失效,所以只执行fn1函数中的this.number *= 2。

posted @   tattoos  阅读(1484)  评论(2编辑  收藏  举报
编辑推荐:
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
阅读排行:
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试?测试工程师会被淘汰吗?
点击右上角即可分享
微信分享提示