每个变量都有一个起作用的范围, 这个范围就是变量的作用域. 在 TypeScript 语言中变量作用域划分是以函数为标准的.
函数作用域演示
我们来举个例子, 现在要制作一个整形的方法, 然后在函数里用 var 定义一个 yangzi 的变量, 我们再函数的外部读取这个变量, 你会发现是读取不到的.
- function zhengXing():void{
- var yangzi = '刘德华'
- console.log(yangzi)
- }
- zhengXing()
- console.log(yangzi)
认识全局变量和局部变量
现在我们对函数的作用域有了一点了解, 那么到底什么是全局变量, 什么又是局部变量那? 这个问题很多面试中都会提问, 所以跟你的前途息息相关.
局部变量: 函数体内定义的变量就是局部变量.
全局变量: 函数体外 定义的变量就是全局变量.
我们改造上边的程序, 把 yangzi 办理移动到全局, 然后再进行输出.
- var yangzi = '刘德华'
- function zhengXing():void{
- console.log('潇潇纪整形成了'+yangzi+'的样子')
- }
- zhengXing()
- console.log(yangzi)
这时候 yangzi 变量是全局的, 所以在函数内也可以调用, 在函数外也可以调用.
局部变量和全局变量重名
当局部变量与全局变量重名的时候, 在函数体内是局部变量起作用; 如果重名, 就有变量提升, 这是一个坑, 小伙伴们必须要注意
还是上边整形的例子, 技术胖是想整形成刘德华, 但是函数体内部声明了一个马德华. 虽然一字之差, 但是样子可是完全不同的. 我们来看代码如何实现:
- var yangzi:string = '刘德华'
- function zhengXing():void{
- var yangzi:string = '马德华'
- console.log('潇潇纪整形成了'+yangzi+'的样子')
- }
- zhengXing()
- console.log(yangzi)
这回你会发现, 技术胖并没有变成刘德华而是变成了马德华. 那你说我我想变成刘德华, 我在函数没声明新变量前打印到控制台行不行?
- var yangzi:string = '刘德华'
- function zhengXing():void{
- console.log('潇潇纪整形成了'+yangzi+'的样子')
- var yangzi:string = '马德华'
- console.log('潇潇纪整形成了'+yangzi+'的样子')
- }
- zhengXing()
- console.log(yangzi)
代码改造成了这样, 但是你会发现, 我们输出的结果如下:
潇潇纪整形成了 undefined 的样子
产生这个结果的原因就是变量提升, 他的真实代码是这样的.
- var yangzi:string = '刘德华'
- function zhengXing():void{
- var yangzi:string
- console.log('潇潇纪整形成了'+yangzi+'的样子')
- yangzi = '马德华'
- console.log('潇潇纪整形成了'+yangzi+'的样子')
- }
- zhengXing()
- console.log(yangzi)
也就是当内部声明了和全局的变量同名时, 就会出现变量提升的效果, 声明语句会提升到函数的第一句. 这就是著名的变量提升效果.
let 关键字变量的作用域
在早期 JavaScript 的变量作用域只有全局和局部, 并且是以函数划分的, 但在其他语言中, 作用域的划分是以一对大括号作为界限的.
所以, JavaScript 就遭到了无数开发者的吐槽, 甚至说 JavaScript 不适合开发大型语言, 容易内存溢出. JavaScript 团队意识到了这一点, 在 ES6 中推出了 let 关键字.
使用 let 关键字的变量就是一个块级作用域变量. 希望大家在实际工作中多使用 let 来声明你的变量, 让你的程序更有条例. 来看一端程序:
- function zhengXing():void{
- var yangzia:string = '刘德华'
- {
- let yangzib:string = '小沈阳'
- console.log('潇潇纪整形成了'+yangzib+'的样子')
- }
- console.log('潇潇纪整形成了'+yangzia+'的样子')
- console.log('潇潇纪整形成了'+yangzib+'的样子')
- }
- zhengXing()
来源: http://www.qdfuns.com/note/43692/02437982b0e75c247d948c9a95b50d82.html