TypeScript学习笔记--函数的变量作用域(06)

1）函数划分

ts代码

// 变量的作用域，函数划分
function plastic():void{
    var appearance:string = '刘德华'
    console.log(appearance);
}

plastic()
console.log(appearance);

编译一下，然后运行node

可以看出第一个appearance打印出了刘德华，第二个打印出错。

2）全局变量-局部变量

现在把appearance提出来作为全局变量，ts代码变成下面的样子

// 全局变量局部变量
var appearance:string = '刘德华'
function plastic():void{
    console.log('技术胖整形成了'+appearance+'的样子');
}
plastic()
console.log(appearance);

编译一下，然后运行node 

3）小坑—变量重名引发的变量提升

全部变量和局部变量重名的时候是什么效果，ts代码

// 重名之变量提升
var appearance:string = '刘德华'
function plastic():void{
    var appearance:string = '马德华'
    console.log('技术胖整形成了'+appearance+'的样子');
}
plastic()
console.log(appearance);

编译运行之后

 

可见重名的时候会使用局部变量。现在我们再局部变量定义之前打印一下看看，ts代码

// 重名之变量提升超前打印
var appearance:string = '刘德华'
function plastic():void{
    console.log('技术胖整形成了'+appearance+'的样子');
    var appearance:string = '马德华'
    console.log('技术胖整形成了'+appearance+'的样子');
}
plastic()
console.log(appearance);

编译运行之后 

发现变成了undefined，这个时候就涉及到变量提升的概念，实际上代码变成这个样子了。

 

4）小坑—let变var

demo06.ts

function plastic():void{
    var appearance1:string = '刘德华'
    {
        let appearance2:string = '小沈阳'
        console.log('技术胖1整形成了'+appearance2+'的样子');
    }
    console.log('技术胖2整形成了'+appearance1+'的样子');
    console.log('技术胖3整形成了'+appearance2+'的样子');

}

plastic()

编译成js代码是这样子的demo06.js

function plastic() {
    var appearance1 = '刘德华';
    {
        var appearance2 = '小沈阳';
        console.log('技术胖1整形成了' + appearance2 + '的样子');
    }
    console.log('技术胖2整形成了' + appearance1 + '的样子');
    console.log('技术胖3整形成了' + appearance2 + '的样子');
}
plastic();

运行node demo06.js，控制台打印

E:\miaov\tsDemo>node demo06.js
技术胖1整形成了小沈阳的样子
技术胖2整形成了刘德华的样子
技术胖3整形成了小沈阳的样子

分析一下，我们看一下let的特性

ES6 新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。

 按理说技术胖3打印的是会报错的，可是没有，都是因为编译的时候appearance2 = '小沈阳'前面变成了var。

不理解的话继续看，我们把js代码修改一下（注意下面是js代码）

运行报错

如果还不清楚，可以继续这样测试一下

 ts代码

function plastic():void{
    var appearance1:string = '刘德华'
    console.log('技术胖01整形成了'+appearance2+'的样子');

    {
        console.log('技术胖02整形成了'+appearance2+'的样子');
        let appearance2:string = '小沈阳'
        console.log('技术胖1整形成了'+appearance2+'的样子');
    }
    console.log('技术胖2整形成了'+appearance1+'的样子');
    console.log('技术胖3整形成了'+appearance2+'的样子');

}
plastic()

编译运行

这都是因为appearance变量提升的原因所以打印出来是undefined。