TS中let与JS中var异同

TS与JS简介

在进入正题之前，先简要介绍TS与JS。
JS编程语言的标准是ECMAScript，简称ES。ES5，也就是大家熟知的JavaScript，也称为“普通”的JavaScript，所有浏览器都支持ES5，旧版本浏览器至少支持ES3标准，2015年，ECMA国际组织发布了ES6，ES6则是下一个版本的JS。

TS(TypeScript)：是JS的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。TS扩展了JS的语法，任何现有的JS程序可以运行在TS环境中。

TS在JS基础上扩展了什么

类
接口
模块
lambda函数
。。。。。。

ES5的两种模式

正常模式与严格模式(strict mode)
顾名思义，严格模式使得JS在更严格的条件下执行。

设立“严格模式”的目的：
消除JS语法的一些不合理、不严谨之处，减少一些怪异行为；
消除代码运行的一些不安全之处，保证代码运行安全；
提高编译器效率，增加运行速度；
为未来新版本的JS做好铺垫。

ES6在ES5的基础上新增了哪些功能呢?

let命令，声明变量
const命令，声明只读常量
class命令，类的概念
import命令，声明命令
。。。。。。

JS严格模式

一、进入标志：

use strict

老版本浏览器会把它当做一行普通字符串，加以忽略。

二、调用

1、针对整个脚本文件

将"use strict"放在脚本文件的第一行，则整个脚本都将以“严格模式”运行，如果语句不在第一行，则无效。

　　<script>
　　　　"use strict";
　　　　console.log("这是严格模式。");
　　</script>

　　<script>
　　　　console.log("这是正常模式。");
　　</script>

2、针对单个函数

将"use strict"放在函数体的第一行，则整个函数以"严格模式"运行。

　　function strict(){
　　　　"use strict";
　　　　return "这是严格模式。";
　　}

　　function notStrict() {
　　　　return "这是正常模式。";
　　}

因为第一种调用方法不利于文件合并，所以更好的做法是：将整个脚本文件放在一个立即执行的匿名函数中。

(function (){

　　"use strict";

　　// some code here

})();

对于更详细的“严格模式”的说明，请参考：JS严格模式详解

let与var异同

let声明的变量作用域在定义他们的块中，以及在任何包含的子块中。这样，let的工作方式与var非常相似，主要区别在于var变量的作用域是整个封闭函数。

function varTest() {
  var x = 1;
  {
    var x = 2;  // same variable!
    console.log(x);  // 2
  }
  console.log(x);  // 2
}

function letTest() {
  let x = 1;
  {
    let x = 2;  // different variable
    console.log(x);  // 2
  }
  console.log(x);  // 1
}

在程序和函数的顶层，let不像var那样在全局对象上创建属性。例如:

var x = 'global';
let y = 'global';
console.log(this.x); // "global"
console.log(this.y); // undefined

在相同的函数或块范围内重新声明相同的变量会引发SyntaxError。

if (x) {
  let foo;
  let foo; // SyntaxError thrown.
}

您可能会在switch语句中遇到错误，因为重复声明同一个变量

let x = 1;
switch(x) {
  case 0:
    let foo;
    break;
    
  case 1:
    let foo; // SyntaxError for redeclaration.
    break;
}

但是，需要指出的是，嵌套在case子句中的块将创建一个新的块作用域词法环境，它不会产生上面所示的重新声明错误。

let x = 1;

switch(x) {
  case 0: {
    let foo;
    break;
  }  
  case 1: {
    let foo;
    break;
  }
}

不像用var声明的变量，它将从未定义的值开始，让变量在其定义被求值之前不会被初始化。let在初始化之前访问变量会导致一个ReferenceError。从块的开始到处理初始化，变量都处于“暂时死区”。

function do_something() {
  console.log(bar); // undefined
  console.log(foo); // ReferenceError
  var bar = 1;
  let foo = 2;
}

总结

ES6的let让JS真正拥有了块级作用域，虽然增加了很多约束，但都是为了代码更规范更安全。

感谢您的阅读，有错误请指正。

TS中let与JS中var异同

猜你喜欢