使用VS Code开发TypeScript--定义变量推荐使用let
使用VS Code开发TypeScript--定义变量推荐使用let
目录
作用域规则
一直以来我们都是通过var关键字定义JavaScript变量。
var a = 10;
大家都能理解,这里定义了一个名为a值为10的变量。
我们也可以在函数内部定义变量:
function f() {
var message = "Hello, world!";
return message;
}
并且我们也可以在其它函数内部访问相同的变量。
function f() {
var a = 10;
return function g() {
var b = a + 1;
return b;
}
}
var g = f();
g(); // returns 11;
上面的例子里,g可以获取到f函数里定义的a变量。 每当g被调用时,它都可以访问到f里的a变量。 即使当g在f已经执行完后才被调用,它仍然可以访问及修改a。
对于熟悉其它语言的人来说,var声明有些奇怪的作用域规则。 看下面的例子:
function f(shouldInitialize: boolean) {
if (shouldInitialize) {
var x = 10;
}
return x;
}
f(true); // returns '10'
f(false); // returns 'undefined'
有些读者可能要多看几遍这个例子。 变量x是定义在if语句里面,但是我们却可以在语句的外面访问它。 这是因为var声明可以在包含它的函数,模块,命名空间或全局作用域内部任何位置被访问,包含它的代码块对此没有什么影响。 有些人称此为var作用域或函数作用域。 函数参数也使用函数作用域。
这些作用域规则可能会引发一些错误。 其中之一就是,多次声明同一个变量并不会报错:
function sumMatrix(matrix: number[][]) {
var sum = 0;
for (var i = 0; i < matrix.length; i++) {
var currentRow = matrix[i];
for (var i = 0; i < currentRow.length; i++) {
sum += currentRow[i];
}
}
return sum;
}
这里很容易看出一些问题,里层的for循环会覆盖变量i,因为所有i都引用相同的函数作用域内的变量。 有经验的开发者们很清楚,这些问题可能在代码审查时漏掉,引发无穷的麻烦。
JavaScript的严格模式
除了正常运行模式,ECMAscript 5添加了第二种运行模式:"严格模式"(strict mode)。顾名思义,这种模式使得Javascript在更严格的条件下运行。
"严格模式"体现了Javascript更合理、更安全、更严谨的发展方向,包括IE 10在内的主流浏览器,都已经支持它,许多大项目已经开始全面拥抱它。
另一方面,同样的代码,在"严格模式"中,可能会有不一样的运行结果;一些在"正常模式"下可以运行的语句,在"严格模式"下将不能运行。掌握这些内容,有助于更细致深入地理解Javascript,让你变成一个更好的程序员。
进入"严格模式"的标志,是下面这行语句:
"use strict";
老版本的浏览器会把它当作一行普通字符串,加以忽略。
在TypeScript中,let、const语句需要严格模式,因此,在TypeScript(ts)文件的第一行应该是:
"use strict";
或者把文件tsconfig.json的"target"改为:
"target": "es5"
这样才能保证使用let语句正确。否者,出现:"Block-scoped declarations (let, const, function, class) not yet supported outside strict mode" 错误。
let与var的区别
在TypeScript中,定义变量要用关键字var或者let。let是一种新的var,let和var的区别就是let使js实现了它的块级作用域,即词法作用域或块作用域(注:let可以看成var,它定义的变量被限制在特定范围中才能使用,离开这个范围就自动销毁)。
for (var i = 0; i < 10; i++) {
setTimeout(function() { console.log(i); }, 100 * i);
}
上面代码执行结果:
10
10
10
10
10
10
10
10
10
10
改为let之后:
for (let i = 0; i < 10 ; i++) {
setTimeout(function() {console.log(i); }, 100 * i);
}
执行结果:
0
1
2
3
4
5
6
7
8
9
这才是我们希望的结果,因此我们推荐在TypeScript中定义变量尽量使用let。
参考资料
使用VS Code开发TypeScript--定义变量推荐使用let的更多相关文章
- 感受typescript定义变量和数据类型的神奇魔力
变量和数据类型 你的Javascript能力到达瓶颈?那是因为你还不会typescript.掌握TS,让你的开发更加准确简洁. 今天的学习中,我们接着从TS的数据类型和变量入手,感受它们的奇妙魔力. ...
- [Tool] 使用Visual Studio Code开发TypeScript
[Tool] 使用Visual Studio Code开发TypeScript 注意 依照本篇操作步骤实作,就可以在「Windows」.「OS X」操作系统上,使用Visual Studio Code ...
- Visual Studio Code开发TypeScript
[Tool] 使用Visual Studio Code开发TypeScript [Tool] 使用Visual Studio Code开发TypeScript 注意 依照本篇操作步骤实作,就可以在 ...
- VS Code开发TypeScript
TypeScript是JaveScript的超集,为JavaScript增加了很多特性,它可以编译成纯JavaScript在浏览器上运行.TypeScript已经成为各种流行框架和前端应用开发的首选. ...
- 遨游TypeScript海洋之定义变量和数据类型
变量和数据类型 熟悉JavaScript的小伙伴都知道,typescript是JavaScript的超集,也就是说它包含JavaScript.所以我觉得,只要你想拥有更佳的模块管理,让你的开发更佳严谨 ...
- 关于typescript之定义变量和数据类型那点事
变量和数据类型 JavaScript虽说深受万千程序员喜爱,却有着对于企业大规模开发很难管理的缺陷.这时候,TypeScript的优势便体现出来.接下来,我们会先接触在TypeScript中定义变量相 ...
- 使用Visual Studio Code搭建TypeScript开发环境
使用Visual Studio Code搭建TypeScript开发环境 1.TypeScript是干什么的 ? TypeScript是由微软Anders Hejlsberg(安德斯·海尔斯伯格,也是 ...
- 打造TypeScript的Visual Studio Code开发环境
打造TypeScript的Visual Studio Code开发环境 本文转自:https://zhuanlan.zhihu.com/p/21611724 作者: 2gua TypeScript是由 ...
- 使用 VS Code 搭建 TypeScript 开发环境
使用 VS Code 搭建 TypeScript 开发环境 TypeScript 是 JavaScript 的超集,TypeScript 只是增强了 JavaScript 而非改变了 JavaScri ...
随机推荐
- 手写总结:synchronized 和 lock 区别
1. synchronized 是jvm 层次的(可以会造成死锁), lock 可以写代码控制,一般在异常时在 finally 里可以 unlock 释放锁 2. lock 细度更细,synchro ...
- java IO 实例分析
初学java,一直搞不懂java里面的io关系,在网上找了很多大多都是给个结构图草草描述也看的不是很懂.而且没有结合到java7 的最新技术,所以自己来整理一下,有错的话请指正,也希望大家提出宝贵意见 ...
- DOM动态添加表格
var table=document.createElement("table"); table.border=1; var b=document.createElement(&q ...
- C++拾遗(七)函数相关(2)
内联函数 内联函数与常规函数的区别在于: 1.常规函数:在执行调用指令时,先存储该指令的内存地址,将函数参数复制到堆栈,然后跳转到被调用函数起点的内存单元,执行函数,将返回值放 入寄存器,最后跳回到一 ...
- Y - Design T-Shirt(第二季水)
Description Soon after he decided to design a T-shirt for our Algorithm Board on Free-City BBS, XKA ...
- CSS各种选择器
一.选择器 1.元素选择器 li{}最常用.最基本 2.派生选择器 li strong { } 标签间用空格分隔.定义了li标签中的strong标签的样式,css1中上下文选择器.css2中派生选择器 ...
- tomcat可以访问到软链接设置
tomcat/conf/context.xml设置<Context allowLinking="true"> 就可以啦.
- jquery1.9学习笔记 之选择器(基本元素一)
所有选择器("*") 描述:选择所有元素 注意:大多数情况下,这个选择器极其的慢,尤其是在作用于自身时. 例子: 查找文档中的每个元素.然后追加一个<script>或& ...
- 不要依赖hibernate的二级缓存
一.hibernate的二级缓存 如果开启了二级缓存,hibernate在执行任何一次查询的之后,都会把得到的结果集放到缓存中,缓存结构可以看作是一个hash table,key是数据库记录的id ...
- Microsoft OLE DB Provider for SQL Server 错误 '80040e21'
我的是因为数据库满了,正在向服务商申请增加数据库容量 原文地址:Microsoft OLE DB Provider for SQL Server 错误 '800作者:欧阳IT记事本 昨天打开网站还正常 ...