JS全局作用域与局部作用域

1、什么是作用域

通常来说,一段程序代码中所用到的名字不总是有效和可用的,而限定这个名字的可用性的代码范围就是这个名字的作用域。通俗易懂一点就是一个变量能被使用的地方就叫做这个变量的作用域。

2、全局作用域

全局作用域贯穿整个javascript文档,在所有函数声明或者大括号之外定义的变量,都在全局作用域里。一旦你声明了一个全局变量,那么你在任何地方都可以使用它,包括函数内部。事实上,JavaScript默认拥有一个全局对象window,声明一个全局变量,就是为window对象的同名属性赋值。

注:若变量在函数内部没有声明(未使用var关键字),该变量为全局变量。全局变量在页面关闭后销毁。
 

3、局部作用域 

局部作用域包括函数作用域与块级作用域(ES6新增)。

JavaScript中,任何定义在函数体内的变量或者函数都将处于函数作用域中,这些变量也无法被在函数外部使用。(闭包除外)

变量在函数内声明,变量属于局部作用域。

局部变量:只能在函数内部访问。

局部变量只作用于函数内,所以不同的函数可以使用相同名称的变量。

局部变量在函数开始执行时创建,函数执行完后局部变量会自动销毁。

//ES5

var uname = '111'

function fn () {
    console.log(uname)//undefined
    if(false) {
        var uname = '456'
}
}


//ES6

var uname = '111'

function fn () {
    console.log(uname)//111
    if(false) {
        let uname = '456'
}
}

在上述例子中,es5的uname打印为undefined的原因是因为var声明的变量提升了,那什么是变量提升呢?


4、变量的声明提升与函数的声明提升        

        4.1 变量的提升提升

        使用 var 关键字声明的变量,会在所有的代码执行之前被声明。(但是不会赋值)

        全局变量即使是写在最下面,也相当于在所有代码之前的最上面声明的变量。

        4.2函数的声明提升   

        使用函数声明形式创建的函数 :function 函数名() {};

        它会在所有代码执行之前就被创建。所以可以在函数声明之前被调用

5、作用域链

只要是代码,就有一个作用域,写在函数内部的就叫做局部作用域;

如果函数中还有函数,那么在这个作用域中又可以诞生一个作用域;

当在函数作用域中操作一个变量的时候,会先在自身作用域中查找,如果有就直接使用,如果没有就向上级作用域中寻找。如果全局作用域中也没有,那么就报错。

根据内部函数可以访问可以访问外部函数变量的这种机制,用链式查找决定哪些数据能被内部函数访问,就称为函数作用域链

作用域链:内部函数访问外部函数的变量,采取的是链式查找的方法来决定取那个结构,这种结构称之为作用域链

作用域链的原则:就近原则

(作用域链采用链式查找的方式,一层一层向上查找,先查找外面的嵌套的函数是否有所需内容,找到就输出相应的结果,如果没有再向上查找。就近原则

学习了这三个知识后,上面的例子为什么打印了undefined也很好理解了。这里其实是用var声明的变量会变量提升,在打印之前先在函数作用域声明了一个局部变量uname,于是在打印的时候根据作用域链,打印的uname为局部变量uname,但此时局部变量只是声明还没有赋值,因此这里打印为undefined。而在es6中新增了块级作用域,用let 可以声明块级别作用域的变量,此时的uname只在块级作用域(即if语句)中生效,以此打印的uname为全局变量uname。

//ES5

var uname = '111'

function fn () {
    console.log(uname)//undefined
    if(false) {
        var uname = '456'
}
}


//等价于上方代码

var uname = '111'

function fn () {
    var uname
    console.log(uname)//undefined
    if(false) {
        uname = '456'
}
}


//ES6

var uname = '111'

function fn () {
    console.log(uname)//111
    if(false) {
        let uname = '456'
}
}

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值