使用VS Code開發TypeScript--定義變量推薦使用let

使用VS Code開發TypeScript--定義變量推薦使用let

目錄

• 做用域規則

• JavaScript的嚴格模式

• let與var的區別

做用域規則

一直以來咱們都是經過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。

參考資料

• Javascript 嚴格模式use strict詳解
• Javascript 嚴格模式詳解
• 變量聲明