基础——重中之重之js的变量的声明

在现在这个浮躁的前端圈，人们盲目学着所谓火热的框架，都多多少少疏忽了基础，但任其框架万变，都万变不离其宗——js尔。

本系列课程着重讲解js中基础，一些容易忽略的知识。

js的变量声明

说起变量声明大家都是十分熟悉的，在js声明一个新变量可以用var,const或者let, 他们属于js里面的操作符,接下来我们来依次聊一下他们

0.无操作符的情况

在js里面也是支持直接把变量直接赋值不需要声明的,如:

a = 1;
console.log(a); // 1
console.log(window.a) // 1

这种情况,会创建一个全局变量, 在严格模式(严格模式是es5出的, ie10之前不支持)下会报错,项目中极其不推荐这样做,很容易导致变量覆盖引发不可预知的bug,
目前前端的ide多数会自动检测(如webstorm),给予一个弱警告,推荐配置eslint

1.var

js是弱类型语言,var声明的变量无需指定类型, 也可以只声明不赋值,如果只声明会保存一个特殊的值——undefined,如下:

var a;
console.log(a === undefined); // true

提升

var声明变量会导致提升情况, 如下面的代码

console.log(a === undefined); // true
var a;
console.log(b === undefined); //uncaught referenceerror: b is not defined

变量提升是js引擎解释执行代码前所做的工作,或者说js编译时，顺便提一下,在《你不知道的javascript上卷》1.1节中，作者有提到js是编译语言，并给出了解释，
尽管我们把js归为“动态”和“解释执行”的语言，有兴趣的可以去看一下。下面再给出两个例子

//eg.1
a = 1;
var a;
console.log(a); // 1;

如果从直觉上看,认为js执行时是由上而下一行一行执行力的, 我们会认为结果是undefined,再看一个例子

//eg.2
console.log(a);
var a = 1;

你猜结果如何? referenceerror或者是1? 结果其实undefined。
当你看到var a = 1可能认为这是一个声明, 对于js而言, 其实是两个步骤, 声明var a和赋值a = 1,但第一步在编译阶段进行的。
所以上面两个例子的处理流程为

var a;
a = 1;
console.log(a);

var a;
console.log(a);
a = 1;

全局作用域下声明变量会绑定在全局对象上(window)

未测试node.js

var a = 1;
console.log(window.a); // 1;

顺便提一下, 带有id的dom元素为将其绑定在window上,key为id,如

 

<script > console.log(window.testid === document.getelementbyid('testid')); // true </script>

2.let

let是var的兄弟，在es6中引入的新关键字，把变量隐式地劫持在了其作用域（通常是{...}中）,如:

if (true) {
    let a = 1;
}
console.log(a); // referenceerror

let循环

for循环是let发挥优势的典型例子, 这里相对于var减少了副作用,如:

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

for (let j = 0; j < 10; j++) {
}
console.log(j); // referenceerror

let不存在var一样的变量提升

这个特性是需要稍微注意的

console.log(a); //referenceerror
let a = 1;

typeof 不再是绝对安全的操作

以前我们判断一个变量存不存在会用到 typeof, 因为即使变量不存在也不会报错, 但如果用了let就不一样了, 如:

console.log(typeof a); // undefined
console.log(typeof b); //uncaught referenceerror: b is not defined
let b;

这个属于暂时性死区(tdz), 即只要进入当前块级作用域，所使用的变量已经存在了，但在声明之前都属于死区，不可进行操作。

全局作用域下声明变量不会绑定在全局对象上(window)

let a = 1;
console.log(window.a); // undefined;

3.const

const也是es6引入的新关键词, 它除了拥有let上面介绍的特性外,还有两条特性:

1.const声明的变量是不可修改的。
2.const声明的变量必须是其作用域内未定义过的

const a = 1;
a = 2; //uncaught typeerror: assignment to constant variable.

var a = 1;
const a = 2; //uncaught syntaxerror: identifier 'a' has already been declared

关于项目中使用

目前国内的占比还是不能肆意妄为的使用es6的特性的, 不过有类似babel之类的转换器,可以让我们写代码时可以用es6的一些新特性,兼容问题交给转换器来做。
不过我们要明白一点，转换器不是真正意义上的做到完美，他能做得是一些语法糖的兼容，js引擎的跨度不是全都能由代码补丁解决的，举个例子，es5新增对象属性劫持
是没办法在ie8以下实现的，（ps：司徒正美用ie独自支持的vbscript在avalon.js中实现了, vbscript不算js）。
如果项目中配了babel，只是让我们的代码更规范，减少错误，我们代码中的用到的let,const在babel中都会变成var, 类似这样的语法糖兼容起来要么是无法做到的,
要么兼容起来需要极大量代码的,最后折中处理了。
这里说一个在不支持let的环境里模拟其作用域特性的代码

// 模拟 let a = 1;
try {
    throw 1;
} catch (a) {
    console.log(a); // 1
}
console.log(a); // uncaught referenceerror: a is not defined

代价就是这么大, ┑(￣д ￣)┍