JavaScript变量声明var,let.const及区别浅析


Posted in Javascript onApril 23, 2018

var声明变量的作用域限制在其声明位置的上下文中

var x = 0; // x是全局变量,并且赋值为0。
console.log(typeof z); // undefined,因为z还不存在。
function a() { // 当a被调用时,
 var y = 2;  // y被声明成函数a作用域的变量,然后赋值成2。
 console.log(x, y);  // 0 2 
 function b() {    // 当b被调用时,
  x = 3; // 全局变量x被赋值为3,不生成全局变量。
  y = 4; // 已存在的外部函数的y变量被赋值为4,不生成新的全局变量。
  z = 5; // 创建新的全局变量z,并且给z赋值为5。 
 }     // (在严格模式下(strict mode)抛出ReferenceError)
 b();   // 调用b时创建了全局变量z。
 console.log(x, y, z); // 3 4 5
}
a();          // 调用a时同时调用了b。
console.log(x, z);   // 3 5
console.log(typeof y); // undefined,因为y是a函数的本地(local)变量。

let 声明的变量只在其声明的块或子块中可用,var的作用域是整个封闭函数

function varTest() {
 var x = 1;
 if (true) {
  var x = 2; // 同样的变量!
  console.log(x); // 2
 }
 console.log(x); // 2
}
function letTest() {
 let x = 1;
 if (true) {
  let x = 2; // 不同的变量
  console.log(x); // 2
 }
 console.log(x); // 1
}

在 ECMAScript 2015 中,let绑定不受变量提升的约束,这意味着let声明不会被提升到当前执行上下文的顶部。
在块中的变量初始化之前,引用它将会导致 ReferenceError(而使用 var 声明变量则恰恰相反,该变量的值是 undefined )
当在块中使用时,let将变量的作用域限制为该块。注意var的作用域在它被声明的函数内的区

var a = 1;
var b = 2;
if (a === 1) {
 var a = 11; // the scope is global
 let b = 22; // the scope is inside the if-block
 console.log(a); // 11
 console.log(b); // 22
} 
console.log(a); // 11
console.log(b); // 2

const 常量必须在声明的同时指定它的值.

const声明创建一个值的只读引用。但这并不意味着它所持有的值是不可变的(如引用内容是对象),只是变量标识符不能重新分配一个常量不能和它所在作用域内的其他变量或函数拥有相同的名称

// 注意: 常量在声明的时候可以使用大小写,但通常情况下全部用大写字母。 
// 定义常量MY_FAV并赋值7
const MY_FAV = 7;
// 报错
MY_FAV = 20;
// 输出 7
console.log("my favorite number is: " + MY_FAV);
// 尝试重新声明会报错 
const MY_FAV = 20;
// MY_FAV 保留给上面的常量,这个操作会失败
var MY_FAV = 20; 
// 也会报错
let MY_FAV = 20;
// 注意块范围的性质很重要
if (MY_FAV === 7) { 
  // 没问题,并且创建了一个块作用域变量 MY_FAV
  // (works equally well with let to declare a block scoped non const variable)
  let MY_FAV = 20;
  // MY_FAV 现在为 20
  console.log('my favorite number is ' + MY_FAV);
  // 这被提升到全局上下文并引发错误
  var MY_FAV = 20;
}
// MY_FAV 依旧为7
console.log("my favorite number is " + MY_FAV);
// 常量要求一个初始值
const FOO; // SyntaxError: missing = in const declaration
// 常量可以定义成对象
const MY_OBJECT = {"key": "value"};
// 重写对象和上面一样会失败
MY_OBJECT = {"OTHER_KEY": "value"};
// 对象属性并不在保护的范围内,下面这个声明会成功执行
MY_OBJECT.key = "otherValue";
// 也可以用来定义数组
const MY_ARRAY = [];
// It's possible to push items into the array
// 可以向数组填充数据
MY_ARRAY.push('A'); // ["A"]
// 但是,将一个新数组赋给变量会引发错误
MY_ARRAY = ['B']

下面介绍下在javascript中有三种声明变量的方式:var、let、const。

var 声明全局变量,换句话理解就是,声明在for循环中的变量,跳出for循环同样可以使用。

for(var i=0;i<=1000;i++){ 
var sum=0; 
sum+=i; 
} 
alert(sum);

声明在for循环内部的sum,跳出for循环一样可以使用,不会报错正常弹出结果

let:声明块级变量,即局部变量。

在上面的例子中,跳出for循环,再使用sum变量就会报错,有着严格的作用域,变量只作用域当前隶属的代码块,不可重复定义同一个变量,不可在声明之前调用,必须先定义再使用,会报错,循环体中可以用let

注意:必须声明'use strict';后才能使用let声明变量否则浏览并不能显示结果,

const:用于声明常量,也具有块级作用域 ,也可声明块级。

const PI=3.14;

它和let一样,也不能重复定义同一个变量,const一旦定义,无法修改。

总结

以上所述是小编给大家介绍的JavaScript变量声明var,let.const及区别浅析,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
网页开发中的容易忽略的问题 javascript HTML中的table
Apr 15 Javascript
JavaScript判断密码强度(自写代码)
Sep 06 Javascript
js中hash和ico的关联分析
Feb 05 Javascript
jQuery支持添加事件的日历特效代码分享(3种样式)
Aug 24 Javascript
jQuery操作dom实现弹出页面遮罩层(web端和移动端阻止遮罩层的滑动)
Aug 25 Javascript
easyui取消表单实时验证,提交时统一验证的简单实例
Nov 07 Javascript
javascript 取小数点后几位几种方法总结
Aug 02 Javascript
微信小程序 页面滑动事件的实例详解
Oct 12 Javascript
解决vue-cli webpack打包后加载资源的路径问题
Sep 25 Javascript
JSON生成Form表单的方法示例
Nov 21 Javascript
小程序如何定位所在城市及发起周边搜索
Feb 11 Javascript
jquery实现直播视频弹幕效果
Feb 25 jQuery
Node.js应用设置安全的沙箱环境
Apr 23 #Javascript
vue-devtools的安装步骤
Apr 23 #Javascript
使用Vue组件实现一个简单弹窗效果
Apr 23 #Javascript
深入理解JavaScript和TypeScript中的class
Apr 22 #Javascript
原生JS进行前后端同构
Apr 22 #Javascript
如何以Angular的姿势打开Font-Awesome详解
Apr 22 #Javascript
vue移动端实现下拉刷新
Apr 22 #Javascript
You might like
dede3.1分页文字采集过滤规则详说(图文教程)续二
2007/04/03 PHP
Fine Uploader文件上传组件应用介绍
2013/01/06 PHP
基于PHP导出Excel的小经验 完美解决乱码问题
2013/06/10 PHP
php中hashtable实现示例分享
2014/02/13 PHP
PHP中使用Imagick读取pdf并生成png缩略图实例
2015/01/21 PHP
标准版Eclipse搭建PHP环境的详细步骤
2015/11/18 PHP
php基于闭包实现函数的自调用(递归)实例分析
2016/11/11 PHP
JQuery 无废话系列教程(二) jquery实战篇上
2009/06/23 Javascript
Extjs学习笔记之一 初识Extjs之MessageBox
2010/01/07 Javascript
ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能
2012/02/03 Javascript
Table冻结表头示例代码
2013/08/20 Javascript
浅析JavaScript中的delete运算符
2013/11/30 Javascript
javascript框架设计读书笔记之数组的扩展与修复
2014/12/02 Javascript
JavaScript中操作Mysql数据库实例
2015/04/02 Javascript
JavaScript中的Reflect对象详解(ES6新特性)
2016/07/22 Javascript
完美解决spring websocket自动断开连接再创建引发的问题
2017/03/02 Javascript
vue.js循环radio的实例
2019/11/07 Javascript
[04:26]2014DOTA2国际邀请赛-Newbee顺利进入胜者组决赛 独家专访战神7
2014/07/19 DOTA
[56:24]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#1Liquid VS MVP.Phx第二局
2016/03/04 DOTA
Python转换HTML到Text纯文本的方法
2015/01/15 Python
Python字典实现简单的三级菜单(实例讲解)
2017/07/31 Python
Python文件读写w+和r+区别解析
2020/03/26 Python
Python进程的通信Queue、Pipe实例分析
2020/03/30 Python
Python如何通过百度翻译API实现翻译功能
2020/04/02 Python
俄罗斯奢侈品牌衣服、鞋子和配饰的在线商店:INTERMODA
2020/07/17 全球购物
.NET里面如何取得当前的屏幕分辨率
2012/12/06 面试题
个人简历自我鉴定
2013/10/11 职场文书
关于爱国的标语
2014/06/24 职场文书
晚自修旷课检讨书怎么写
2014/11/17 职场文书
优秀班主任事迹材料
2014/12/16 职场文书
通报表扬范文
2015/01/17 职场文书
小学元宵节活动总结
2015/02/06 职场文书
2015年幼师个人工作总结
2015/10/15 职场文书
基层医务人员三严三实心得体会
2016/01/05 职场文书
用python实现监控视频人数统计
2021/05/21 Python
MySQL索引是啥?不懂就问
2021/07/21 MySQL