码迷,mamicode.com
首页 > Web开发 > 详细

JS作用域

时间:2021-02-26 13:02:57      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:示例   通过   区别   命名空间   script   效率   内容   strong   大括号   

什么是作用域 ?
作用域:一个变量可以生效的范围。 变量不是在所有地方都可以使用的,而这个变量的使用范围就是我们要说的作用域。
注意:在JavaScript中,划分作用域也是用大括号划分的, 但是在 JS 之中能够有效限定作用域的大括号只有函数大括号!

  • 全局作用域(不再任何函数内)

全局作用域是最大的作用域
在全局作用域中定义的变量可以在任何地方使用
页面打开的时候,浏览器会自动给我们生成一个全局作用域 window
这个全局作用域会一直存在,直到页面关闭才会销毁
请看下面示例代码:

    var a = 10;
    console.log(a);  // 输出结果: 10
    function foo(){
        console.log(a);  // 输出结果: 10
    }
    foo()

当变量 a 声明时,没有被函数大括号包裹, 那么这个变量我们称之为 全局变量

这个全局变量在任何地方都可以访问。

  • 局部作用域(在函数内部)
    同样的,以下内容也是所需要了解的:

局部作用域就是在全局作用域下面开辟出来的一个相对小一些的作用域
在局部作用域中定义的变量只能在这个局部作用域内部使用
在 JS 中只有函数能生成一个局部作用域,别的都不行
每一个函数,都是一个局部作用域
请看下面示例代码:

    function foo(){
        var a = 10; //在大括号之中声明的变量只能在这个大括号之中使用;
        console.log(a); // 输出结果: 10
    }
    foo();
    console.log(a); // 报错 => ReferenceError: a is not defined
    通过上面示例代码可以看出:

在函数大括号之中声明的变量,这种变量我们称之为 局部变量 !

局部变量只能在声明它的作用域之中使用。

声明变量时不使用 var 关键字声明:
注意!这是一个不规范的声明方式!不要使用!不要使用!不用使用!

使用之后导致的结果就是:一个局部变量的声明,在全局中也可以被访问了!( 这样的声明叫做 伪全局变量 )


    function foo(){
        a = 10; // 此时声明变量 a 没有使用var关键字声明
        console.log(a); // 10
    }
    foo();
    console.log(a); // 输出 10,不报错了;

为什么报错了?
当把局部变量变成伪全局变量:
你会发现:

1.生命周期变长,造成一定的负面影响;
2.占据了全局命名空间,造成不可预知的错误

全局变量和局部变量的区别:
解释一下生命周期和命名空间

生命周期(这个变量在内存之中存活的时间)
你啥时候可以访问!

  • 全局变量:生命周期是和程序同步的, 程序不关闭,变量就一直存在;
    导致的结果就是会让程序变得更重! 如果可能,还是少设计一点全局变量.

  • 局部变量:生命周期是和函数执行同步的,函数执行结束变量就被删除了;
    全局变量多了,可能真的会影响到我们程序的运行效率,上面说的伪全局变量就是这个道理。

命名空间(变量名命名的唯一性)

  • 全局变量:命名空间是唯一的,一个页面只有一个
    var count = 10;
    function foo(){
        // 我的代码 : 我的私人领域;
        // 程序的懒惰原则:函数的大括号之中如果已经有了查找结果,那么就不会继续再查找了;
        // 就近原则;
        var count = 0;
        console.log(count);  // 运行结果:0
    }
    foo();
    console.log(count);  // 运行结果:10

为了解决全局之中的命名空间是唯一的这个问题,我们可以把这个变量放在局部,那么就不会占用全局的命名空间了。

  • 局部变量:命名空间一个作用域一个
    可以用匿名函数来解决命名空间的问题

总结
1、全局不能访问局部
2、局部可以拿到全局

JS作用域

标签:示例   通过   区别   命名空间   script   效率   内容   strong   大括号   

原文地址:https://www.cnblogs.com/xiaoxuJS/p/14447346.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!