• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

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。 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
webstorm 开发typeScript基础设置发布时间:2022-07-18
下一篇:
记一次使用微软大佬出品的《typescript》发布时间:2022-07-18
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap