菜鸟学前端
本文:https://www.jianshu.com/p/b7116525273b
文章目录
- var
- let和const
- 写不动了
- 参考
说实话,在看到这个之前,我只知道 var
,以前也只用过这玩意。
后面那俩都不知道是干啥用的。
感谢同桌的提示。
记!
var
var
是 ES5
提出的。用于声明变量。
什么是
ES5
?
ES5
全称ECMAScript5
,即 ES5,是ECMAScripts的第五次修订(第四版因为过于复杂废弃了),又称ECMAScript2009,于 2009 年完成标准化。
var num = 1;
var str = 'a';
var fun = function(){};
var obj = {};
var bean = new ABC(); /* 需要提前声明过ACB这个类型 */
var
就是一切,想是啥就可以是啥,而且是 弱类型。就算是赋值完了还可以赋值为其它类型的值。
当然因为是重复赋值,肯定只有最后一次有效。
var any = 1;
any = 'a';
any = function(){};
any = {};
any = new ABC(); /* 需要提前声明过ACB这个类型 */
any = false;
console.log(any);
// print
false
var
还可以重复声明,就是说即使你声明过变量any
,还可以再次声明 any
。
同样的,因为是同一个变量名,后者肯定会覆盖前者。
上面那段代码还可以这么写。
var any = 1;
var any = 'a';
var any = function(){};
var any = {};
var any = new ABC(); /* 需要提前声明过ACB这个类型 */
var any = false;
console.log(any);
// print
false
var
还可以 变量提升 !!!啥是变量提升? 额,大概是把自己变牛逼了。
你看,它可先使用,后声明。
console.log(any);
var any = false;
// print
undefined
后来才了解到有个什么预解析过程,会提前加载这个变量。
类似于如下:
var any;
console.log(any);
any = false;
// print
undefined
这样一来,结合以上特征,代码开始渐渐奇怪起来。
for(var index = 0;index < 10; index++ ){
/* do something */
}
...
/* n 多代码之后 */
...
/* 脑抽了,突然想声明个index用来做某个标记位 */
var index;
if (index) {
console.log('already init !!!');
console.log('index value:' + index);
} else {
/* init something */
console.log('init index');
index = 1;
}
// print
already init !!!
index value: 10
唉,啥情况,哪来的10???
大家可能说,上面那个for
循环的锅。
但是在多人协作的情况下,代码没报错,执行结果却不是你想要的。
而且这种情况下,排查是个非常困难的事,因为真不知道谁在哪个地方突然声明了一个一样的变量。
而且再极端一些,那个for
循环假设只在某些条件下才执行。
那么刚才那个代码就成了,你这个bug偶尔出现,偶尔消失。
let和const
let
和 const
都是 ES6 提出的。一个用于声明变量,一个用于声明常量。
什么是
ES6
?
ES6, 全称ECMAScript 6.0
,即 ES6,是ECMAScripts的第六次修订,又称 ES2015,于2015年06 月发版,是 JavaScript 的下一个版本标准。
ES6
中有了块级作用域的概念,let
和 const
都是块级作用域。以 {}
代码块作为作用域范围,只能在代码块里面使用,不存在变量提升,只能先声明再使用,否则会报错。
if (true) {
let a = 'let';
var b = 'var';
}
console.log(b); // var
console.log(a); // Uncaught ReferenceError: a is not defined
console.log(c); // Uncaught ReferenceError: c is not defined
let c = 'c'
在代码块内,在声明变量之前,该变量都是不可用的。
这在语法上,称为“暂时性死区”(temporal dead zone,简称 TDZ),在同一个代码块内,不允许重复声明。只要块级作用域内存在let命令,它所声明的变量就“绑定”(binding)这个区域,不再受外部的影响。不同代码块是可以重复声明的。
let a = 'let a'
if (true) {
let a = 'let if a';
console.log(a); // print 'let if a'
let a = 'next same let'
console.log(a); // Uncaught SyntaxError: Identifier 'a' has already been declared
}
console.log(a); // print 'let a'
const 声明的是一个只读常量,在声明时就需要赋值。(如果 const 的是一个对象,
对象所包含的值是可以被修改的。抽象一点儿说,就是对象所指向的地址不能改变,而变量成员是可以修改的。)
const any = 'abc';
const obj = {};
除了不可重复赋值的问题,其它和 let
作用域类似,功能类似。
写不动了
写不动了。。。后面有想法了再慢慢了解和补充。。
参考
谈谈ES5和ES6的区别
ES6的let和const
var、let、const的区别