js中定义变量的三种方式：
ES5只有两种声明变量的方式：var和function，ES6还添加了两种常用的声明变量的方式：let和const。
const定义的变量不可以修改，且必须初始化。var定义的变量可以修改，但不初始化会输出undefined，不会报错。let用来声明局部变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效，而且有暂时性死区的约束。
(暂时性死区:在代码块内，使用let命令声明变量之前，该变量都是不可用的（不可赋值，不可访问等），这称为“暂时性死区”。)
const
1. 注意：在我们使用const声明常量时，总认为值一旦声明就不可改变，其实是有误解的；
2. 本质：
- const实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址不得改动。对于简单类型的数据（数值、字符串、布尔值），值就保存在变量指向的那个内存地址，因此等同于常量。
- 但对于复合类型的数据（主要是对象和数组），变量指向的内存地址，保存的只是一个指针，const只能保证这个指针是固定的，至于它指向的数据结构是不是可变的，就完全不能控制了。因此，将一个对象声明为常量必须非常小心。
示例1：
const foo = {};
// 为 foo 添加一个属性，可以成功
foo.prop = 123;
foo.prop // 123
// 将 foo 指向另一个对象，就会报错
foo = {}; // TypeError: "foo" is read-only
上面代码中，常量foo储存的是一个地址，这个地址指向一个对象。不可变的只是这个地址，即不能把foo指向另一个地址，但对象本身是可变的，所以依然可以为其添加新属性。
示例2：
const a = [];
a.push('Hello'); // 可执行
a.length = 0; // 可执行
a = ['Dave']; // 报错
上面代码中，常量a是一个数组，这个数组本身是可写的，但是如果将另一个数组赋值给a，就会报错。
如果真的想将对象冻结，应该使用Object.freeze方法。
const foo = Object.freeze({});
// 常规模式时，下面一行不起作用；
// 严格模式时，该行会报错
foo.prop = 123;
上面代码中，常量foo指向一个冻结的对象，所以添加新属性不起作用，严格模式时还会报错。
除了将对象本身冻结，对象的属性也应该冻结。下面是一个将对象彻底冻结的函数。
var constantize = (obj) => {
Object.freeze(obj);
Object.keys(obj).forEach( (key, i) => {
if ( typeof obj[key] === 'object' ) {
constantize( obj[key] );
}
});
};
es6之前怎么声明常量
-
假装是常量
var BASE_COLOR = '#FF0000'; -
Object.defineProperty();
var CST = {A:1};
Object.defineProperty(CST,'A',{
writable: false // 防止A被修改
})
Object.seal(CST);// 防止CST扩展其他属性
var (在了解let之前，最好先熟悉var的原理)
JavaScript有一个机制叫“预解析”，也可以叫“提升（Hoisting）机制”。
代码示例：
function val(a) {
if(a) {
var rabbit = 'Rabbit';
// ...执行其他代码
return rabbit;
} else {
// 在else里面同样也可以访问变量rabbit，其值为undefined
return null;
}
// 在这里也可以访问变量rabbit，其值也是undefined
}
可能刚开始接触JavaScript的人会认为，只有当a的值为true时才会创建变量rabbit，事实上，无论如何变量rabbit都会被创建。
在预编译阶段，JavaScript引擎会将上面的a函数修改成下面的写法：
function val(a) {
var rabbit;
if(a) {
var rabbit = 'Rabbit';
// ...执行其他代码
return rabbit;
} else {
return null;
}
}
变量rabbit的声明被提升至函数的顶部，而初始化操作（赋值等操作）依旧留在当a为true时才执行。
这意味着在else子句中也可以访问到rabbit变量，而且由于变量未初始化，所以其值为undefined。
原理： JavaScript在执行的过程中，会先检测一遍var声明，然后将var声明放在所有代码的最开头，而初始化（赋值等操作）则留在代码原来的位置才执行。所以最后会输出undefined。
var变量提升面试题示例：
<script>
var a =99; //全局变量a
f(); //f是函数，虽然定义在调用的后面，但是函数声明会提升到作用域的顶部
console.log(a); //a => 99
function f() {
console.log(a); //默认值undefined
var a =10;
console.log(a); //a => 10
}
</script>
结果如图：
let
在ES6之前(ES5)，我们都是用var来声明变量，而且JS只有函数作用域和全局作用域，没有块级作用域，所以{}限定不了var声明变量的访问范围。
注意：let不存在变量提升：let不像var那样会发生变量提升，所以，变量一定要在声明后使用，否则报错。
为什么需要块级作用域：
- 变量提升导致内层变量可能会覆盖外层变量。
- 用来计数的循环变量泄露为全局变量。
ES6新增的let是块级作用域，“块级作用域”也可以称为“词法作用域”。函数内部使用let定义后，对函数外部无影响。
let不允许在相同作用域内，重复声明同一个变量。
不能在函数内部重新声明参数。
ES6的块级作用域：
- ES6允许块级作用域的任意嵌套。外层作用域无法读取内层作用域的变量。
- 内层作用域可以定义外层作用域的同名变量。
- 块级作用域的出现使得立即执行函数不再需要。IIFE立即执行函数
立即执行函数：
(function() {
var i = 5;
})();
块级作用域：
{
let i = 5;
}
ES5与ES6的规定：
- ES5规定，函数只能在顶层作用域和函数作用域之外声明，不能在块级作用域中声明。
if (true) {
function func() {}
}
try {
function func() {}
} catch {
}
上面两种函数声明在ES5中都是非法的，但是浏览器没有遵守这一规定，还是支持在块级作用域中声明函数，因此以上两种情况实际都能运行，不会报错；但是，在严格模式下，还是会报错。
- ES6引入了块级作用域，明确允许在块级作用域中声明函数。
- ES6还规定，在块级作用域中，函数声明的行为类似于let，在块级作用域之外不可引用。
- ES6中，函数声明会提升到函数作用域的头部。
function func() {
console.log('out');
}
(function() {
if (false) {
function func() {
console.log(‘in’);
}
}
func();
})();
在ES5中输出：in
在ES6中输出：out
注意：但是，以上代码在Chrome中运行会报错。
考虑到环境导致的行为差异太大，应该避免在块级作用域内声明函数，若确实需要，也应该写成函数表达式，而不是函数声明语句。
注意：注意：ES6的块级作用域允许声明函数只在使用大括号的情况下成立，如果未使用大括号，会报错。
'use strict':
if (true) {
function func1() {} // 不报错
}
if (true)
function func2() {} // 报错
- ES6明确规定，若块作用域中存在let和const命令，则它们声明的变量，从一开始就形成了封闭作用域，凡是在声明之前就使用这些变量，就会报错。
- 在代码块内，使用let命令声明变量之前，该变量都是不可用的（不可赋值，不可访问等），这称为“暂时性死区”。
暂时性死区的本质：只要一进入当前作用域，所要使用的变量就已经存在了，但是不可获取，只有等到声明变量的那一行代码出现，才可以获取和使用该变量。
ES6规定暂时性死区和let、const语句不出现变量提升，主要是为了减少运行时错误，防止变量在声明前就使用该变量，从而导致意料之外的错误。这类错误在ES5中很常见。
扫一扫
1000
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
