JavaScript作用域原理(三)——作用域根据函数划分

简介: 函数在java、C#等语言中,变量i只会在for循环语句中有定义,循环结束,i也就被销毁了。但在JavaScript中,变量i是定义在scope3()活动对象中的,因此在它定义开始,就可以在函数内部访问它。

一、一个for实例


<p id="scope3" style="color:red"></p>


var pscope3 = document.getElementById('scope3');
        function scope3() {
            for(var i=0; i<10; i++){ 
            }
            echo(pscope3,  i);
        }
        scope3();


1、函数在java、C#等语言中,变量i只会在for循环语句中有定义,循环结束,i也就被销毁了。但在JavaScript中,变量i是定义在scope3()活动对象中的,因此在它定义开始,就可以在函数内部访问它。

2、打印出的i为“10”。

3、函数scope3等效于下面的代码:


function scope3() {
            var i;
            for(i=0; i<10; i++){ 
            }
            echo(pscope3,  i);
        }


二、私有作用域的匿名函数


function anonymous() {
            var position = 'in anonymous';
            (function(){
                for(var i=0; i<10; i++){ 
                }
                echo(pscope3, position);//打印显示"in anonymous"
            })();
            //pscope3.innerHTML += i;//报错
        }
        anonymous();


1、匿名函数可以用来模仿块级作用域,避免上面的那个问题。

2、在for循环外部插入了一个私有作用域。在匿名函数中定义的任何变量,都会在执行结束时被销毁。

3、上面的那句注释掉的话,取消注释的话,就会显示错误信息:“ReferenceError: i is not defined”。

4、作用域的关系大致如下:


image.png

5、position是定义在anonymous函数中的,但可以在匿名函数中打印出来,因为anonymous的作用域包住了匿名函数,在匿名函数中找不到position定义,就往外找。

 

三、try语句catch部分的特殊情况


function capture() {
            var ex = 'in capture';
            try{  
                i;
            }catch(ex){
                var position= 'in catch';
                echo(pscope3, ex); //ReferenceError: i is not defined
                var ex = 'is catching';
                echo(pscope3, position);//in catch
                echo(pscope3, ex);//is catching
            }
            echo(pscope3, position);//in catch
            echo(pscope3, ex); //in capture 不是catch中赋的值
            echo(pscope3, window.ex); //undefined
        }
        capture();


1、catch的一个参数ex与capture函数下的局部变量ex同名。

2、catch中先打印ex,是错误信息,然后赋值为“is catching”,打印出来,但很奇怪,catch外面打印的ex是“in capture”,并不是里面覆盖的值。

3、position在catch中定义,但是可以在catch的外面打印出来。

4、window.ex输出的是undefined,也就是说ex不是全局的,因此可以推出catch后面的大括号是普通语句块的性质。

5、ex的性质可以视为唯一一个把catch语句块当做块作用域的变量,是catch语句块的局部变量。

相关文章
|
15天前
|
JavaScript
JS实现多条件搜索函数
JS封装的多条件搜索
|
5月前
|
JavaScript 前端开发
js的作用域作用域链
【10月更文挑战第29天】理解JavaScript的作用域和作用域链对于正确理解变量的访问和生命周期、避免变量命名冲突以及编写高质量的JavaScript代码都具有重要意义。在实际开发中,需要合理地利用作用域和作用域链来组织代码结构,提高代码的可读性和可维护性。
|
1月前
|
JavaScript 前端开发 Java
深入理解 JavaScript 中的 Array.find() 方法:原理、性能优势与实用案例详解
Array.find() 是 JavaScript 数组方法中一个非常实用和强大的工具。它不仅提供了简洁的查找操作,还具有性能上的独特优势:返回的引用能够直接影响原数组的数据内容,使得数据更新更加高效。通过各种场景的展示,我们可以看到 Array.find() 在更新、条件查找和嵌套结构查找等场景中的广泛应用。 在实际开发中,掌握 Array.find() 的特性和使用技巧,可以让代码更加简洁高效,特别是在需要直接修改原数据内容的情形。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一
|
1月前
|
监控 JavaScript 前端开发
MutationObserver详解+案例——深入理解 JavaScript 中的 MutationObserver:原理与实战案例
MutationObserver 是一个非常强大的 API,提供了一种高效、灵活的方式来监听和响应 DOM 变化。它解决了传统 DOM 事件监听器的诸多局限性,通过异步、批量的方式处理 DOM 变化,大大提高了性能和效率。在实际开发中,合理使用 MutationObserver 可以帮助我们更好地控制 DOM 操作,提高代码的健壮性和可维护性。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
MutationObserver详解+案例——深入理解 JavaScript 中的 MutationObserver:原理与实战案例
|
2月前
|
JavaScript 前端开发
JavaWeb JavaScript ③ JS的流程控制和函数
通过本文的详细介绍,您可以深入理解JavaScript的流程控制和函数的使用,进而编写出高效、可维护的代码。
87 32
|
1月前
|
JavaScript 前端开发 Java
详解js柯里化原理及用法,探究柯里化在Redux Selector 的场景模拟、构建复杂的数据流管道、优化深度嵌套函数中的精妙应用
柯里化是一种强大的函数式编程技术,它通过将函数分解为单参数形式,实现了灵活性与可复用性的统一。无论是参数复用、延迟执行,还是函数组合,柯里化都为现代编程提供了极大的便利。 从 Redux 的选择器优化到复杂的数据流处理,再到深度嵌套的函数优化,柯里化在实际开发中展现出了非凡的价值。如果你希望编写更简洁、更优雅的代码,柯里化无疑是一个值得深入学习和实践的工具。从简单的实现到复杂的应用,希望这篇博客能为你揭开柯里化的奥秘,助力你的开发之旅! 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一
|
5月前
|
JavaScript 前端开发 API
Vue.js响应式原理深度解析:从Vue 2到Vue 3的演进
Vue.js响应式原理深度解析:从Vue 2到Vue 3的演进
171 17
|
5月前
|
自然语言处理 JavaScript 前端开发
[JS]作用域的“生产者”——词法作用域
本文介绍了JavaScript中的作用域模型与作用域,包括词法作用域和动态作用域的区别,以及全局作用域、函数作用域和块级作用域的特点。通过具体示例详细解析了变量提升、块级作用域中的暂时性死区等问题,并探讨了如何在循环中使用`var`和`let`的不同效果。最后,介绍了两种可以“欺骗”词法作用域的方法:`eval(str)`和`with(obj)`。文章结合了多位博主的总结,帮助读者更快速、便捷地掌握这些知识点。
61 2
[JS]作用域的“生产者”——词法作用域
|
5月前
|
JavaScript 前端开发 Java
[JS]同事:这次就算了,下班回去赶紧补补内置函数,再犯肯定被主管骂
本文介绍了JavaScript中常用的函数和方法,包括通用函数、Global对象函数以及数组相关函数。详细列出了每个函数的参数、返回值及使用说明,并提供了示例代码。文章强调了函数的学习应结合源码和实践,适合JavaScript初学者和进阶开发者参考。
70 2
[JS]同事:这次就算了,下班回去赶紧补补内置函数,再犯肯定被主管骂
|
5月前
|
缓存 前端开发 JavaScript
JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式
本文深入解析了JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式(Hash路由和History路由)、优点及挑战,并通过实际案例分析,帮助开发者更好地理解和应用这一关键技术,提升用户体验。
195 1
下一篇
oss创建bucket