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真正擁有了塊級作用域，雖然增加了很多約束，但都是爲了代碼更規範更安全。



感謝您的閱讀，有錯誤請指正。