JavaScript基础知识-作用域(action scope)

简介: 关于JavaScript基础知识中作用域的介绍。

作者:尹正杰
版权声明:原创作品,谢绝转载!否则将追究法律责任。

一.JavaScript源代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>作用域(action scope)</title>

    <script type="text/javascript">

        /**
         *  作用域(action scope):
         *      作用域指一个变量的作用范围。在JavaScript中一共有两种作用域,即全局作用域和函数作用域。
         *
         *  全局作用域:
         *      (1)直接写在script标签中的JS代码,都是全局作用域;
         *      (2)全局作用域在页面打开时创建,在页面关闭时销毁;
         *      (3)在全局作用域中,有一个全局对象window(它代表的是一个浏览器窗口,由浏览器创建),我们可以直接使用;
         *      (4)在全局作用域中,创建的变量都会作为window对象的属性保存;
         *      (5)在全局作用域中,创建的函数都会作为window对象的方法保存;
         *      (6)全局作用域中的变量都是全局变量,在页面的任意部分都可以访问到;
         *
         *  函数作用域:
         *      (1)调用函数时创建函数作用域,函数执行完毕以后,函数作用域销毁;
         *      (2)每调用一次函数就会创建一个新的函数作用域,他们之间时互相独立的;
         *      (3)在函数作用域中可以访问到全局作用域的变量,在全局作用域中无法访问到函数作用域的变量;
         *      (4)当在函数作用域操作一个变量时,它会先在自身作用域中寻找:
         *          a)如果有就直接使用;
         *          b)如果没用就向上一级作用域中寻找;
         *          c)如果全局作用域中依然没用找到,就会抛出"ReferenceError"异常;
         *      (5)在函数中要访问全局的变量,可以使用window对象来访问;
         */

        // 创建一个全局变量
        var x = 100;
        var y = 200;
        var z = 900;

        function foo() {
            var x = 300;
            var z = 500;

            function bar() {
                var x = 800;
                console.log("In bar, x = %d, y = %d, z = %d.",x,y,window.z);  // 注意,"windows.z"访问的是全局变量哟~
            }

            /**
             *  我们可以把return语句放在声明bar函数之前,因为使用function创建的函数对象会被提升优先级(即函数提前声明)。
             *
             *  但出于编程习惯,我不建议那样写,咱们自己知道就好,在函数内部,也有变量声明提前的概念。
             *
             *  这就是JavaScript中var,function等关键字的魅力所在。
             */
            return bar;

        }

        foo()();

        console.log("In Global, x = %d, y = %d, z = %d.",x,y,z);

        function outer(){
            console.log("In outer, y = %d",y);
            // 需要注意的是,在函数中,未使用var声明的变量都会成为全局变量哟!
            y = 999;  // 如果不用var关键字声明变量,相当于使用"window.y = 999;"
            console.log("In outer, y = %d",y);

            function inner() {
                // var x;  //下面使用"var x = 666",相当于在函数内部最开头做了一个变量声明提前,相当于隐式做了一个"var x;".
                console.log("In inner, x = %d",x);
                var x = 666;  // 此处使用了var关键字,因此会设计到变量的声明提前,当代码执行到这一行时仅是做赋值操作!
                console.log("In inner, x = %d",x);
            }

            return inner;
        }

        outer()()

        console.log("In Global, x = %d, y = %d, z = %d.",x,y,z);

    </script>
</head>
<body>

</body>
</html>

二.浏览器打开以上代码渲染结果

目录
相关文章
|
12天前
|
JavaScript 前端开发
js的作用域作用域链
【10月更文挑战第29天】理解JavaScript的作用域和作用域链对于正确理解变量的访问和生命周期、避免变量命名冲突以及编写高质量的JavaScript代码都具有重要意义。在实际开发中,需要合理地利用作用域和作用域链来组织代码结构,提高代码的可读性和可维护性。
|
11天前
|
自然语言处理 JavaScript 前端开发
[JS]作用域的“生产者”——词法作用域
本文介绍了JavaScript中的作用域模型与作用域,包括词法作用域和动态作用域的区别,以及全局作用域、函数作用域和块级作用域的特点。通过具体示例详细解析了变量提升、块级作用域中的暂时性死区等问题,并探讨了如何在循环中使用`var`和`let`的不同效果。最后,介绍了两种可以“欺骗”词法作用域的方法:`eval(str)`和`with(obj)`。文章结合了多位博主的总结,帮助读者更快速、便捷地掌握这些知识点。
23 2
[JS]作用域的“生产者”——词法作用域
|
13天前
|
前端开发 JavaScript 数据处理
CSS 变量的作用域和 JavaScript 变量的作用域有什么不同?
【10月更文挑战第28天】CSS变量和JavaScript变量虽然都有各自的作用域概念,但由于它们所属的语言和应用场景不同,其作用域的定义、范围、覆盖规则以及与其他语言特性的交互方式等方面都存在明显的差异。理解这些差异有助于更好地在Web开发中分别运用它们来实现预期的页面效果和功能逻辑。
|
12天前
|
JavaScript 前端开发
如何在 JavaScript 中实现块级作用域?
【10月更文挑战第29天】通过使用 `let`、`const` 关键字、立即执行函数表达式以及模块模式等方法,可以在JavaScript中有效地实现块级作用域,更好地控制变量的生命周期和访问权限,提高代码的可维护性和可读性。
|
20天前
|
JavaScript 前端开发
javascript的作用域
【10月更文挑战第19天javascript的作用域
|
25天前
|
JavaScript 前端开发
JavaScript 作用域
JavaScript 作用域是指程序中可访问的变量、对象和函数的集合。它分为函数作用域和局部作用域。函数作用域内的变量仅在函数内部可见,而全局作用域的变量在整个网页中均可访问。局部变量在函数执行完毕后会被销毁,而全局变量则在整个脚本生命周期中都存在。未使用 `var` 关键字声明的变量默认为全局变量。
|
1月前
|
JavaScript 前端开发
js作用域
js作用域
16 1
|
2月前
|
JavaScript 前端开发
js 变量作用域与解构赋值| 22
js 变量作用域与解构赋值| 22
|
2月前
|
缓存 JavaScript 前端开发
了解js基础知识中的作用域和闭包以及闭包的一些应用场景,浅析函数柯里化
该文章详细讲解了JavaScript中的作用域、闭包概念及其应用场景,并简要分析了函数柯里化的使用。
了解js基础知识中的作用域和闭包以及闭包的一些应用场景,浅析函数柯里化
|
2月前
|
JavaScript 前端开发
JavaScript 作用域
JavaScript 作用域
28 9