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。 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值