ES2015 笔记(1) var, let, const, scope

本篇简单介绍var, let, const 的用法


近日来随着前端发展越来越强大,虽然 jQuery 已经相当方便了

然而Angular 已经壮大,使用到 jQuery 的机会变的越来越少

相较之下在若使用Angular的情况下,需要去了解JavaScript如何运行就更的更重要了

开始ES2015学习虽然有点慢了,但做对的事永达不嫌晚

所以就来写几篇有关于ES2015的笔记

首先就先来介绍最常用的var

var

我们都知道这个是为了声明变量用的,但不声明变量也是可以使用的,但记得要给初使值

这样的程序是可以正常运行的

console.log(x === undefined); // true 
var x = 3;

这是因为JavaScript有提升变量(Hoisting)的概念

简单来讲就是为了解决这样的顺序声明问题所以才产出的概念

这样的程序会被转化成

var x;
console.log(x === undefined); // true 
x = 3;

但如果你是这样写,就会出问题了 ,然而这跟Hoisting无关的错误

console.log(x === undefined); //x is not defined
x = 3;

let

有了var,为何需要let呢?

两者有点差异,通常在非function区块用var声明的为全域变量,然而let则为区域变量

let变量不能重复声明

let x=1;
show ();
console.log(x); //1
function show(){
	let x=2;
	console.log(x); //2
}

在这个例子,外层的x 为区域变量

show里面的x则与外层的x变量互不相扰

let x=1;
show ();
console.log(x); //2
function show(){
	x=2;
	console.log(x); //2
}

但若改成这样,因为show为外层的子区域,所以在show里可以用到并更改到x的值

另一个var 与 let 的最大差异为以下常见的例子

var list = document.getElementById("list");

for (var i = 1; i <= 5; i++) {
  var item = document.createElement("li");
  item.appendChild(document.createTextNode("Item " + i));

  item.onclick = function (ev) {
    console.log("Item " + i + " is clicked.");
  };
  list.appendChild(item);
}

话不多说先来看结果

还记得我们提过的Hoisting吗?

会造成这样的原因是因为程序被转译了

var list = document.getElementById("list");
var i;
for (i = 1; i <= 5; i++) {
 ....

所以变量 i 变成了全域变量

我们去click的时候,Access到的是全域变量的 i

所以把 var 改成 let 即可解决这样的灵异事件

而let 较为大家所推崇还有另一个原因

如果今天是多人开发项目,像这种for each var i, j 的写法很容易变成了全域变量而影响到别人

所以用 let 可以保证大家所用的变量都会是区域变量不会去影响到别人

const

最后要讲的是constant (常数值)

跟C#一样,但用法其实跟 let 也很像,也是区域变量的概念

只是有一点点不一样的地方是

必须在声明时就给值,以及它是只读的,一旦声明给值后,就不能再被指定值了