本文主要講解一下var
與let
在使用上的一些區(qū)別闲询。
變量申明提升
var
允許變量申明提前;但let
不允許(即let必須申明之后才能使用
)
console.log(num);
var num = 10;
// 輸出結(jié)果: undefined
console.log(num2);
let num2 = 20;
// 報(bào)錯(cuò)
塊級(jí)作用域
在ES6之前荞下,只有函數(shù)存在塊級(jí)作用域一說(shuō)(外部無(wú)法直接
訪問(wèn)函數(shù)內(nèi)部的變量)婶芭。在ES6中谆棱,由{}
號(hào)包裹的區(qū)域就形成了一個(gè)塊級(jí)作用域褒脯,let
申明的變量绎签,只在當(dāng)前{}
號(hào)內(nèi)有效。
for(var i = 0; i < 5; i++) {
}
console.log(i);
// 輸出結(jié)果為:5
for(let j = 0; j < 5; j++) {
}
console.log(j);
// 報(bào)錯(cuò)
變量重新申明
var
允許重新定義某個(gè)變量;在同一個(gè)塊級(jí)作用域內(nèi),let不允許重新申明荔棉!
var num = 10;
var num = 20;
console.log(num);
// 輸出結(jié)果:20
// 同一塊級(jí)作用域
{
var num2 = 30;
let num2;
// 報(bào)錯(cuò)闹炉,提示num2已經(jīng)被申明
}
// 不同塊級(jí)作用域
{
let result = 1;
{
let result = 2;
}
console.log(result);
}
暫時(shí)性死區(qū)
網(wǎng)上很多資料對(duì)其解釋的比較繞,其實(shí)壓根就不需要太在意這些概念润樱。
秉持一個(gè)原則:let必須先申明再使用渣触!
let必須先申明再使用!
let必須先申明再使用壹若!
重要的事情說(shuō)三遍P嶙辍!店展!就可以避免該問(wèn)題养篓。
let color = 'red';
function getColor() {
color = 'green';
let color;
return color;
}
getColor();
// 報(bào)錯(cuò),雖然不同塊級(jí)作用域壁查,可以重新申明變量觉至,但是不允許在未申明之前直接使用
window對(duì)象
另外一個(gè)小的細(xì)節(jié)點(diǎn),那就是window
對(duì)象睡腿。
var a = 1;
window.a // 輸出結(jié)果為:1
let b = 2;
window.b // 輸出結(jié)果:undefined
const(具有l(wèi)et一樣的特性)
const
申明變量時(shí)语御,需要注意2點(diǎn):
-
申明后必須直接初始化
,不能留在以后賦值席怪,否則報(bào)錯(cuò); -
const申明的變量并不是固定不變的
針對(duì)第二點(diǎn)应闯,單獨(dú)說(shuō)明如下:
const MAX = 100;
MAX = 200;
// 報(bào)錯(cuò),普通變量用const申明后挂捻,無(wú)法再修改
const Student = {
name: '小紅'
};
Student.name = '小明'; // 可以修改
Student = {}; // 報(bào)錯(cuò)
根據(jù)上面兩個(gè)例子可知:const
申明的變量,如果是普通變量碉纺,確實(shí)無(wú)法再修改;但如果是引用類(lèi)型的變量(數(shù)組、對(duì)象),則可以修改骨田。也就是說(shuō)耿导,const申明的變量是不變的,指的是變量所指向的內(nèi)存地址的不變
态贤。