[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);