064_let关键字
1. 在ES2015之前, JavaScript只有兩種類型的作用域: 全局作用域和局部(函數)作用域。
2. ES2015引入了兩個重要的JavaScript新關鍵詞: let和const。
3. let和const都是用來聲明變量的。
4. let和const這兩個關鍵字在JavaScript中提供了塊作用域(Block Scope)變量和常量。
5. 塊作用域
5.1. 通過var關鍵詞聲明的變量沒有塊作用域。
5.2. var在塊{}內聲明的變量可以從塊之外進行訪問。和在塊外聲明變量沒什么兩樣, 還是是全局變量。因此一般不在塊中使用var聲明變量, 在全局使用var聲明變量就可以了。
5.3. 實例
{var a = 5; // 給a初始化為5 } document.write('a = ' + a + "<br />"); // 輸出a = 55.4. 可以使用let關鍵字聲明擁有塊作用域的變量。
5.5. let在塊{}內聲明的變量無法從塊外訪問。
5.6. 實例
{let b = 10;// let在塊內聲明的變量, 只能在塊內訪問。document.write('b = ' + b + "<br />"); // 輸出b = 10 } // 塊外不能訪問b, 訪問b, 報錯6. 循環作用域
6.1. 循環中使用var聲明的變量是全局變量。
for(var i = 1; i <= 3; i++){document.write('i = ' + i + "<br />"); } document.write('i = ' + i + "<br />"); // 輸出i = 4 document.write('i = ' + window.i + "<br />"); // 輸出i = 4var obj = {id: 1001, name: 'zs'}; for(var item in obj){document.write('item = ' + item + "<br />"); } document.write('item = ' + item + "<br />"); // 輸出item = name document.write('item = ' + window.item + "<br />"); // 輸出item = name6.2. 循環中使用let聲明的變量, 在循環外不能訪問。
for(let j = 1; j <= 3; j++){document.write('j = ' + j + "<br />"); } // 不能訪問jfor(let key in obj){document.write('key = ' + key + "<br />"); } // 不能訪問key7. 函數作用域
7.1. 在函數內聲明變量時, 使用var和let很相似。它們都有函數作用域:
function myFunction1() {var bookName = "Effective Java"; // 函數作用域document.write('bookName = ' + bookName + "<br />"); // bookName = Effective Java } myFunction1(); // document.write('bookName = ' + bookName + "<br />"); // 訪問bookName會報錯 function myFunction2() {let mobileName = "huawei"; // 函數作用域document.write('mobileName = ' + mobileName + "<br />"); // mobileName = huawei } myFunction2(); // document.write('mobileName = ' + mobileName + "<br />"); // 訪問mobileName會報錯8. 全局作用域
8.1. 如果在塊外聲明聲明, 那么var和let也很相似。它們都擁有全局作用域:
var c = 15; // 全局作用域 let d = 20; // 全局作用域9. html中的全局變量
9.1. 使用JavaScript的情況下, 全局作用域是JavaScript環境。
9.2. 在html中, 全局作用域是window對象。
9.3. 通過var關鍵詞定義的全局變量屬于window對象:
var c = 15; document.write('c = ' + c + "<br />"); // c = 15 document.write('c = ' + window.c + "<br />"); // c = 159.4. 通過let關鍵詞定義的全局變量不屬于window對象, 屬于JavaScript環境:
let d = 20; document.write('d = ' + d + "<br />"); // d = 20 document.write('d = ' + window.d + "<br />"); // d = undefined10. 重新聲明
10.1. 允許在程序的任何位置使用var重新聲明JavaScript變量:
var I = 'I_01'; // 允許 var I = 'I_02'; // 允許 function myFn01(){var II = 'II_01'; // 允許var II = 'II_02'; // 允許 }10.2. 在相同的作用域, 通過let重新聲明一個var變量是不允許的:
var III = 'III_01'; // 允許 let III = 'III_02'; // 不允許function myFn02(){var III = 'III_01'; // 允許let III = 'III_02'; // 不允許 }10.3. 在相同的作用域, 通過var、let重新聲明一個let變量是不允許的:
let IV = 'IV_01'; // 允許 var IV = 'IV_02'; // 不允許 function myFn03(){let IV = 'IV_01'; // 允許var IV = 'IV_02'; // 不允許 }let V = 'V_01'; // 允許 let V = 'V_02'; // 不允許 {let V = 'V_01'; // 允許let V = 'V_02'; // 不允許 } function myFn04(){let V = 'V_01'; // 允許let V = 'V_02'; // 不允許 }11. 提升
11.1. 通過var聲明的變量會提升到頂端。
p = 120; var p; document.write('p = ' + p + "<br />"); // p = 12011.2. 通過let定義的變量不會被提升到頂端。
11.3. 在聲明let變量之前就使用它會導致ReferenceError。
// q = 125; 報錯 let q;12. 例子
12.1. 代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>let關鍵字</title></head><body><script type="text/javascript">{var a = 5; // 給a初始化為5}document.write('a = ' + a + "<br />"); // 輸出a = 5{let b = 10;// let在塊內聲明的變量, 只能在塊內訪問。document.write('b = ' + b + "<br />"); // 輸出b = 10}// 塊外不能訪問b, 訪問b, 報錯for(var i = 1; i <= 3; i++){document.write('i = ' + i + "<br />");}document.write('i = ' + i + "<br />"); // 輸出i = 4document.write('i = ' + window.i + "<br />"); // 輸出i = 4var obj = {id: 1001, name: 'zs'};for(var item in obj){document.write('item = ' + item + "<br />");}document.write('item = ' + item + "<br />"); // 輸出item = namedocument.write('item = ' + window.item + "<br />"); // 輸出item = namefor(let j = 1; j <= 3; j++){document.write('j = ' + j + "<br />");}// 不能訪問jfor(let key in obj){document.write('key = ' + key + "<br />");}// 不能訪問keyfunction myFunction1() {var bookName = "Effective Java"; // 函數作用域document.write('bookName = ' + bookName + "<br />"); // bookName = Effective Java}myFunction1();// document.write('bookName = ' + bookName + "<br />"); // 訪問bookName會報錯function myFunction2() {let mobileName = "huawei"; // 函數作用域document.write('mobileName = ' + mobileName + "<br />"); // mobileName = huawei}myFunction2();// document.write('mobileName = ' + mobileName + "<br />"); // 訪問mobileName會報錯var c = 15;document.write('c = ' + c + "<br />"); // c = 15document.write('c = ' + window.c + "<br />"); // c = 15let d = 20;document.write('d = ' + d + "<br />"); // d = 20document.write('d = ' + window.d + "<br />"); // d = undefinedp = 120;var p;document.write('p = ' + p + "<br />"); // p = 120// q = 125; 報錯let q;</script></body> </html>12.2. 效果圖
總結
以上是生活随笔為你收集整理的064_let关键字的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 063_提升Hoisting
- 下一篇： 065_const关键字