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'
}
}