[JavaScript]var let 和 const

轉載聲明：本文全文轉載自

後盾人 http://houdunren.gitee.io/note/js

共同點

var/let/const共同點是全局作用域中定義的變量，可以在函數中使用

var hd = 'hdcms';
function show() {
	return hd;
}
console.log(show());

函數中聲明的變量，只能在函數及其子函數中使用

function hd() {
  var web = "後盾人";

  function show() {
    console.log(web);
  }
  show(); //子函數結果: 後盾人
  console.log(web); //函數結果: 後盾人
}
hd();
console.log(web); //全局訪問: hd is not defined

函數中聲明的變量就像聲明瞭私有領地，外部無法訪問

var web = "hdcms.com";
function hd() {
  var web = "houdunren.com";
  console.log(web); //houdunren.com
}
hd();
console.log(web); //hdcms.com

var

使用var聲明的變量存在於最近的函數或全局作用域中，沒有塊級作用域的機制。

沒有塊作用域很容易污染全局，下面函數中的變量污染了全局環境

function run() {
	web = "houdunren";
}
run();
console.log(web); //houdunren

沒有塊作用作用域時var也會污染全局

for (var i = 0; i < 10; i++) {
  console.log(i);
}
console.log(i);

使用let有塊作用域時則不會

let i = 100;
for (let i = 0; i < 6; i++) {
  console.log(i);
}
console.log(i);

下例中體驗到var沒有塊作用域概念，do/while定義的變量可以在塊外部訪問到

var num = 0;

function show() {
  var step = 10;
  do {
    var res = 0;
    console.log(num = step++);
    res = num;
  } while (step < 20);
  console.log(`結果是${res}`);
}
show();

var全局聲明的變量也存在於 window對象中

var hd = "houdunren";
console.log(window.hd); //houdunren

以往沒有塊任用時使用立即執行函數模擬塊作用域

(function() {
  var $ = this.$ = {};
  $.web = "後盾人";
}.bind(window)());
console.log($.web);

有了塊作用域後實現就變得簡單多了

{
  let $ = (window.$ = {});
  $.web = "後盾人";
}
console.log($.web);

let

與 var 聲明的區別是 let/const 擁有塊作用域，下面代碼演示了塊外部是無法訪問到let聲明的變量。

• 建議將let在代碼塊前聲明
• 用逗號分隔定義多個
  let存在塊作用域特性，變量只在塊域中有效

if (true) {
    let web = 'hdcms',url = 'houdunren.com';
    console.log(web); //hdcms
}
console.log(web); //web is not defined

塊內部是可以訪問到上層作用域的變量

if (true) {
  let user = "向軍大叔";
  (function() {
    if (true) {
      console.log(`這是塊內訪問：${user}`);
    }
  })();
}
console.log(user);

每一層都是獨立作用域，裏層作用域可以聲明外層作用域同名變量，但不會改變外層變量

function run() {
  hd = "houdunren";
  if (true) {
    let hd = "hdcms";
    console.log(hd); //hdcms
  }
  console.log(hd); //houdunren
}
run();

const

使用 const 用來聲明常量，這與其他語言差別不大，比如可以用來聲明後臺接口的URI地址。

• 常量名建議全部大寫
• 只能聲明一次變量
• 聲明時必須同時賦值
• 不允許再次全新賦值
• 可以修改引用類型變量的值
• 擁有塊、函數、全局作用域
  常量不允許全新賦值舉例

try {
  const URL = "https://www.houdunren.com";
  URL = "https://www.hdcms.com"; //產生錯誤
} catch (error) {
  throw new Error(error);
}

改變常量的引用類型值

const INFO = {
  url: 'https://www.houdunren.com',
  port: '8080'
};
INFO.port = '443';
console.log(INFO);

下面演示了在不同作用域中可以重名定義常量

const NAME = '後盾人';

function show() {
  const NAME = '向軍大叔';
  return NAME;
}
console.log(show());
console.log(NAME);