1.作用域
1.作用域(定义)
变量作用域:就是一个变量可以使用的范围。
2.作用域 (种类)
常见的作用域主要分为几个类型:
- 全局作用域、
- 函数作用域、
- 块状作用域、
- 动态作用域。
3.1全局作用域
变量在函数或者代码块{ }外定义,即为全局作用域。不过,在函数或者代码块{ }内未定义的变量也是拥有全局作用域的(不推荐)。
var carName = "Volvo";
//此处可以调用carName变量
function myFunction(){
//函数内可调用carName变量
}
上述代码中变量carName就是在函数外定义的,它是拥有全局作用域的。这个变量可以在任意地方被读取或者修改,当然如果变量在函数内没有声明(没有使用 var 关键字),该变量依然为全局变量。
//此处可以调用carName变量
function myFunction(){
carName = "Volvo";
//函数内可调用carName变量
}
以上实例中 carName 在函数内,但是拥有全局作用域,它将作为 global 或者 window 的属性存在。
在函数内部或代码块中没有定义的变量实际上是作为 window/global 的属性存在,而不是全局变量。换句话说没有使用 var 定义的变量虽然拥有全局作用域,但是它是可以被 delete 的,而全局变量不可以。
3.2函数作用域
在函数内部定义的变量,就是局部作用域。函数作用域内,对外是封闭的,从外层的作用域无法直接访问函数内部的作用域!
function bar(){
var testValue = 'inner';
}
console.log(testValue) //报错:ReferenceError:testValue is not defined
如果想读取函数内的变量,必须借助 return 或者闭包。
function bar(value){
var testValue = 'inner';
return testValue+value;
}
console.log(bar('fun')) //"innerfun"
这是借助return的方式,下面是闭包的方式:
function bar(value){
var testValue = 'inner';
var result = testValue+value;
function innser(){
return result
};
return innser();
}
console.log(bar('fun')) //"innerfun"
通俗的讲,return 是函数对外交流的出口,而 return 可以返回的是函数,根据作用域的规则,函数内部的子函数是可以获取函数作用域内的变量的。
说到这其实大家会想到嵌套函数的作用域问题,如果 inner 函数再嵌套函数呢?这就涉及到另一个概念:作用域链。
仔细观察上图,其实不难理解作用域链是什么,因为你可以按照原型链那样去理解。任何一个作用域链都是一个堆栈,首先先把全局作用域压入栈底,再按照函数的嵌套关系一次压入堆栈。在执行的时候就按照这个作用域链寻找变量。
3.3块状作用域
在其他编程语言中,块状作用域是很熟悉的概念,但是在JavaScript中不被支持,就像上述知识一样,除了全局作用域就是函数作用域,一直没有自己的块状作用域。在 ES6 中已经改变了这个现象,块状作用域得到普及。关于什么是块,只要认识
if(true){
let a = 1
console.log(a)
}
在这个代码中,if 后 { } 就是“块”,这个里面的变量就是拥有这个块状作用域,按照规则,{ }之外是无法访问这个变量的。ES6中的let。
3.4动态作用域
在 JavaScript 中很多同学对 this 的指向时而清楚时而模糊,其实结合作用域会对 this 有一个清晰的理解。不妨先来看下这段代码:
window.a = 3
function test () {
console.log(this.a)
}
test.bind({ a : 2 })() //2
test() //3