JavaScript 变量声明:var、let、const
1. 概述
1.1 说明
在ES5 声明变量的方法:var
命令和function
命令。
在ES6 声明变量的方法:var
命令、function
命令、let命令、const
命令、import
命令、class
命令。
以下内容主要是对 let 、var 、const 命令的理解与记录。
1.2 let 命令
1.2.1 let 说明
let命令的声明变量用法类似于var,如 let a =10;(声明了一个变量:变量名为a,值为10)。但let所声明的变量,只在let命令所在的代码块内有效,即let用于声明一个块级作用域的变量。
以下代码解析:在函数test中的if代码块中使用let进行声明变量;在if代码快中调用所声明变量可以获取正确的值,而在if代码块外调用所声明变量则会报错。
function test() {
if (true) {
let x = 1;
console.log(x); //
}
console.log(x); // Uncaught ReferenceError: x is not defined
}
test();
for循环的计数器
for (let x = 0; x < 5; x++) {
setTimeout(function() {
console.log(x); // 0 1 2 3 4
}, 100);
}
console.log(x);// Uncaught ReferenceError: x is not defined
1.2.1 let 特性
详见 var 与 let 的对比。
- 块级作用域
- 不允许在相同作用域内,重复声明同一个变量
- 暂时性死区
1.3 var 命令
1.3.1 var 说明
使用var进行声明变量。var a =10;(声明了一个变量:变量名为a,值为10)。在ES6之前,JavaScript没有块级作用域,只有全局作用域和函数作用域。变量提升即是将变量声明提升到它所在作用域的最开始的部分。
//全局作用域
console.log(global); // undefined
var global = 'global';
console.log(global); // global
//函数作用域
function test () {
console.log(x); // undefined
var x = 1;
console.log(x); //
}
test();// 调用函数
以上代码中var声明的变量在不同作用域中进行了变量提升(在当前作用域下,在声明变量之前进行了调用,返回了变量值为undefined)。以上代码等同于以下代码:
var global; // 变量提升,全局作用域范围内,此时只是声明,并没有赋值
console.log(global); // undefined
global = 'global'; // 此时才赋值
console.log(global); // global function test () {
var x; // 变量提升,函数作用域范围内
console.log(x);// undefined
x = 1;// 此时才赋值
console.log(x);//
}
test();
for循环的计数器
for (var x = 0; x < 5; x++) {
console.log(x); // 0 1 2 3 4
setTimeout(function() {
console.log(x); // 5 5 5 5 5
}, 100);
}
console.log("***************");
console.log(x);//
1.3.2 省略 var
在javascript中,若省略var关键字而直接赋值,那么这个变量为全局变量,哪怕是在function里定义的。
function a() {
x = 2;
}
function b() {
console.log(x);//
}
a();
b();
1.4 let 与 var
- 作用域的区别
var : 没有块级作用域,因为变量提升的特性,其声明变量的作用域为整个函数或全局范围。
let : 拥有块级作用域的特性,其声明的变量作用域范围从声明处一直到当前块级语句({}包含)的结尾【或一直延伸到函数结尾(在函数内)或全局结尾】。
function testVar() {
if (true) {
// 变量提升
console.log(x); // undefined
var x = 1;
console.log(x); //
}
// 作用域在整个函数作用域中
console.log(x); //
}
function testLet() {
if (true) {
// 不存在变量提升
console.log(y); // Uncaught ReferenceError: y is not defined
let y = 1;
console.log(y); //
}
// 作用域仅在if语句块中
console.log(y); // Uncaught ReferenceError: y is not defined
}
testVar();
testLet();
- 重复声明
var : 允许在相同作用域内,重复声明同一个变量。
let : 不允许在相同作用域内,重复声明同一个变量。
function test() {
var x=1;
var x=2;
var x=3;
console.log(x);//
let y=1;
let y=2;
console.log(y);//Uncaught SyntaxError: Identifier 'y' has already been declared
}
test();
- 顶层对象的属性(window)
var : 在全局作用域声明的变量,会作为widnow对象的成员。
let : 在全局作用域声明的变量,不会作为window对象的成员。
var x = 1;
let y = 1;
//var声明的变量附加到window对象上
console.log(window.x); //
//let声明的变量没有附加到window对象上
console.log(window.y); // undefined
- 暂时性死区
var : 不存在暂时性死区。
let : 存在暂时性死区【在代码块内,使用let
命令声明变量之前,该变量都是不可用的。这在语法上,称为“暂时性死区”(temporal dead zone,简称 TDZ)】。
var a = 123;
if (true) {
a = 'abc';
console.log(a);// abc
var a;
console.log(a);// abc
}
var x = 123;
if (true) {
x = 'abc'; // Uncaught ReferenceError: x is not defined
let x;
}
备注:ES6 明确规定,如果区块中存在let
和const
命令,这个区块对这些命令声明的变量,从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量,就会报错
1.5 const 命令
1.5.1 const 说明
使用const进行声明变量所定义的是一个只读的常量,一旦声明,常量的值就不能改变。const a =10;(声明了一个常量变量:变量名为a,值为10)。
const x = 1;
x = 2; // Uncaught TypeError: Assignment to constant variable
1.5.2 const 特性
- 块级作用域(与let命令相同)
- 不允许在相同作用域内,重复声明同一个变量(与let命令相同)
- 暂时性死区(与let命令相同)
- 在全局作用域声明的变量,不会作为window对象的成员
- 当用const声明的常量为值类型(e.g. String、Number)时,修改此常量的值会报错;但当声明的常量为引用类型(e.g. Array、Object)时,只可以修改此常量的成员
// 1.const声明一个数组
const x = [1, 2, 3];
console.log(x); // => [1, 2, 3]
x[0] = "a"; // 修改数组的第一个元素的值
console.log(x); // ['a', 2, 3] // 2.const声明一个对象
const obj = {};
obj.name = 'objName';
console.log(obj.name); // objName
JavaScript 变量声明:var、let、const的更多相关文章
- JavaScript变量声明var,let.const
var声明变量的作用域限制在其声明位置的上下文中 var x = 0; // x是全局变量,并且赋值为0. console.log(typeof z); // undefined,因为z还不存在. f ...
- javaScript 变量提升 var let const,以及JS 的解析阶段和执行阶段
我们先来看一道面试题,大家猜想一下,下面这段代码,打印出来的结果是什么 var name = 'World!'; (function () { if (typeof name === 'undefin ...
- JavaScript变量声明与变量声明提前
JavaScript变量声明 JavaScript中存储数据的容器称为变量.用关键字和标识符创建新变量的语句,称为变量声明.可以通过关键字var进行变量声明,在ES6中增加了let.const关键字声 ...
- javascript变量声明 及作用域
javascript变量声明提升(hoisting) http://openwares.net/js/javascript_declaration_hoisting.html 可能要FQ一下 java ...
- 【转】javascript变量声明 及作用域
javascript变量声明提升(hoisting) javascript的变量声明具有hoisting机制,JavaScript引擎在执行的时候,会把所有变量的声明都提升到当前作用域的最前面. 先看 ...
- javascript变量声明及作用域总结
javascript变量声明及作用域总结 一.总结 一句话总结:还是得好好看书,光看视频是不得行的,浅学无用,要相互印证,要真正理解才有用,比如<Javascript权威指南> 书 1.j ...
- JavaScript 变量声明提升
JavaScript 变量声明提升 一.变量提升的部分只是变量的声明,赋值语句和可执行的代码逻辑还保持在原地不动 二.在基本的语句(或者说代码块)中(比如:if语句.for语句.while语句.swi ...
- JavaScript变量声明及赋值
1.变量声明 var a; //声明一个变量 a var b,c,d; //同时申明多个变量时,变量名之间用逗号隔开 console.log(a); //在控制台显示变量a的值,输出为undefine ...
- 浅谈JavaScript变量声明提升
前段时间阿里实习生内推,一面就被刷了,也是郁闷.今天系统给发通知,大致意思就是内推环节不足以了解彼此,还可以参加笔试,于是赶紧再投一次.官网流程显示笔试时间3月31日,时间快到了,开始刷题.网上搜了一 ...
随机推荐
- vue 修改数据界面没有及时更新nextTick
使用场景:有些时候,我们使用vue修改了一些数据,但是页面上的DOM还没有更新,这个时候我们就需要使用到nextTick. vm.$nextTick( [callback] ) 说明: 将回调延迟到下 ...
- c提高第六次课 文件读取
一.基本概念1.文件分类 普通文件:存放在硬盘中的文件 设备文件:屏幕.键盘等特殊文件 文本文件:ASCII文件,每个字节存放一个字符的ASCII码,打开文件看到的是文本信息 二进制文件:数据按其在内 ...
- 泛型与object
一.泛型通俗的理解就是限制list集合里面的数据类型 比如List<int>,就限制LIST里面必须是int,这样放入其他就有报错(保证了安全),然后从 list里取元素,就不需要强制转化 ...
- METO CODE 223 拉力赛
传送门 继续水板子题... #include <bits/stdc++.h> #define ll long long using namespace std; inline int re ...
- poj-3177(无向图缩点)
题意:给你n个点,m条边的无向联通图,问你最少增加几条边,使得这个图每对点至少有两条路径 解题思路:考虑每个环内的点必定有>=2条路径,所以先把这个无向图中的环去掉,用并查集缩环,然后剩下的图一 ...
- windows无法完成安装,若要在此计算机上安装,请重新启动安装
当出现如上提示的时候,不要重启,按下shift+f10 会打开命令窗口,先输入cd oobe 进入到C:\windows\system32\oobe文件夹,输入msoobe回车然后输入msoobe即可 ...
- 用 hugo 和 netlify 搭建blog【转】
用 hugo 和 netlify 搭建blog - kok的笔记本 Releases · gohugoio/hugo · GitHub 测试baidu 测试163
- <Android基础> (七)内容提供器
第七章 内容提供器 7.1 内容提供器(Content Provider) 主要应用于在不同的应用程序之间实现数据共享功能.允许一个程序访问另一个程序中的数据,同时还能保证被访数据的安全性. 7.2 ...
- java 11 实现RFC7539中指定的ChaCha20和Poly1305两种加密算法, 代替RC4
实现 RFC 7539的ChaCha20 and ChaCha20-Poly1305加密算法 RFC7748定义的秘钥协商方案更高效, 更安全. JDK增加两个新的接口 XECPublicKey 和 ...
- Security+ 认证考过经验分享 802分飘过
PART 1/考前准备 1.针对与新人.学生建议看每一节直播课程,老师会结合自己的工作工作经验讲解课程,可以帮助学生理解知识. 2.备考期间建议官方指导手册至少看两遍以上,我在结合自己的做题库时发现有 ...