What's the difference between using “let” and “var” to declare a variable in JavaScript?
答案1
The difference is scoping. var
is scoped to the nearest function block and let
is scoped to the nearest enclosing block, which can be smaller than a function block. Both are global if outside any block.
Also, variables declared with let
are not accessible before they are declared in their enclosing block. As seen in the demo, this will throw a ReferenceError exception.
var html = ''; write('#### global ####\n');
write('globalVar: ' + globalVar); //undefined, but visible try {
write('globalLet: ' + globalLet); //undefined, *not* visible
} catch (exception) {
write('globalLet: exception');
} write('\nset variables'); var globalVar = 'globalVar';
let globalLet = 'globalLet'; write('\nglobalVar: ' + globalVar);
write('globalLet: ' + globalLet); function functionScoped() {
write('\n#### function ####');
write('\nfunctionVar: ' + functionVar); //undefined, but visible try {
write('functionLet: ' + functionLet); //undefined, *not* visible
} catch (exception) {
write('functionLet: exception');
} write('\nset variables'); var functionVar = 'functionVar';
let functionLet = 'functionLet'; write('\nfunctionVar: ' + functionVar);
write('functionLet: ' + functionLet);
} function blockScoped() {
write('\n#### block ####');
write('\nblockVar: ' + blockVar); //undefined, but visible try {
write('blockLet: ' + blockLet); //undefined, *not* visible
} catch (exception) {
write('blockLet: exception');
} for (var blockVar = 'blockVar', blockIndex = 0; blockIndex < 1; blockIndex++) {
write('\nblockVar: ' + blockVar); // visible here and whole function
}; for (let blockLet = 'blockLet', letIndex = 0; letIndex < 1; letIndex++) {
write('blockLet: ' + blockLet); // visible only here
}; write('\nblockVar: ' + blockVar); try {
write('blockLet: ' + blockLet); //undefined, *not* visible
} catch (exception) {
write('blockLet: exception');
}
} function write(line) {
html += (line ? line : '') + '<br />';
} functionScoped();
blockScoped(); document.getElementById('results').innerHTML = html;
Global:
They are very similar when used like this outside a function block.
let me = 'go'; // globally scoped
var i = 'able'; // globally scoped
However, global variables defined with let
will not be added as properties on the global window
object like those defined with var
.
console.log(window.me); // undefined
console.log(window.i); // 'able'
Function:
They are identical when used like this in a function block.
function ingWithinEstablishedParameters() {
let terOfRecommendation = 'awesome worker!'; //function block scoped
var sityCheerleading = 'go!'; //function block scoped
}
Block:
Here is the difference. let
is only visible in the for()
loop and var
is visible to the whole function.
unction allyIlliterate() {
//tuce is *not* visible out here for( let tuce = 0; tuce < 5; tuce++ ) {
//tuce is only visible in here (and in the for() parentheses)
//and there is a separate tuce variable for each iteration of the loop
} //tuce is *not* visible out here
} function byE40() {
//nish *is* visible out here for( var nish = 0; nish < 5; nish++ ) {
//nish is visible to the whole function
} //nish *is* visible out here
}
Redeclaration:
Assuming strict mode, var
will let you re-declare the same variable in the same scope. On the other hand, let
will not:
'use strict';
let me = 'foo';
let me = 'bar'; // SyntaxError: Identifier 'me' has already been declared
'use strict';
var me = 'foo';
var me = 'bar'; // No problem, `me` is replaced.
答案2
let
can also be used to avoid problems with closures. It binds fresh value rather than keeping an old reference as shown in examples below.
for(var i = 1; i < 6; i++) {
document.getElementById('my-element' + i)
.addEventListener('click', function() { alert(i) })
}
Code above demonstrates a classic JavaScript closure problem. Reference to the i
variable is being stored in the click handler closure, rather than the actual value of i
.
Every single click handler will refer to the same object because there’s only one counter object which holds 6 so you get six on each click.
General workaround is to wrap this in an anonymous function and pass i
as argument. Such issues can also be avoided now by using let
instead var
as shown in code below.
'use strict';
for(let i = 1; i < 6; i++) {
document.getElementById('my-element' + i)
.addEventListener('click', function() { alert(i) })
}
What's the difference between using “let” and “var” to declare a variable in JavaScript?的更多相关文章
- Javascript——概述 && 继承 && 复用 && 私有成员 && 构造函数
原文链接:A re-introduction to JavaScript (JS tutorial) Why a re-introduction? Because JavaScript is noto ...
- JavaScript var, let, const difference All In One
JavaScript var, let, const difference All In One js var, let, const 区别 All In One 是否存在 hoisting var ...
- 【译】PHP的变量实现(给PHP开发者的PHP源码-第三部分)
文章来自:http://www.aintnot.com/2016/02/12/phps-source-code-for-php-developers-part3-variables-ch 原文:htt ...
- Expression Tree Basics 表达式树原理
variable point to code variable expression tree data structure lamda expression anonymous function 原 ...
- Groovy 模版引擎
1. Introduction Groovy supports multiple ways to generate text dynamically including GStrings, print ...
- js 日期按年月日加减
<script> function isleapyear(year) { if(parseInt(year)%4==0 && parseInt(year)%100!=0)r ...
- coffeescript 1.8.0 documents
CoffeeScript is a little language that compiles into JavaScript. Underneath that awkward Java-esque ...
- JavaScript闭包的底层运行机制
转自:http://blog.leapoahead.com/2015/09/15/js-closure/ 我研究JavaScript闭包(closure)已经有一段时间了.我之前只是学会了如何使用它们 ...
- SAS Annotated Output GLM
SAS Annotated Output GLM 在使用SAS过程中,proc glm步输出离差平方和有4种算法,分别是SS1 SS2 SS3 SS4 下面文章介绍了其中SS3的具体计算步骤和例子 ...
随机推荐
- go http的三种实现---2
package main import ( "io" "log" "net/http" "os" ) func main ...
- java中通过配置文件的方式(Jedis驱动)使用Redis
在java中使用Redis,实际上是将Redis的一些命令封装到Jedis的实体类中,然后进行调用.
- NoSQL-redis with python
首先,先去看了一下NoSQL的概念: Wiki中参考的NoSQL终极指南(nosql-database.org)中说: NoSQL DEFINITION: Next Generation Databa ...
- PhotoSwipe异步动态加载图片
在开发搜房家居M站的时候,搜房家居装修效果图相册展示效果需要用到PhotoSwipe插件来显示图片.特点:1. 家居提供的接口,每次只能获取一张图片2. 装修效果图的张数不限.3. 从PhotoSwi ...
- 《从零开始学Swift》学习笔记(Day 20)——函数中参数的传递引用
原创文章,欢迎转载.转载请注明:关东升的博客 参数的传递引用 类是引用类型,其他的数据类型如整型.浮点型.布尔型.字符.字符串.元组.集合.枚举和结构体全部是值类型. 有的时候就是要将一个值类型参数以 ...
- Hystrix属性配置策略
Hystrix属性配置 Command可配参数 设置隔离策略 execution.isolation.strategy = THREAD 设置超时时间 execution.isolation.thre ...
- error C1853: “Debug\BigBuffer.pch”预编译头文件来自编译器的早期版本,或者预编译头为 C++ 而在 C 中使用它(或相反)
<pre id="best-content-1299104064" mb-10"="" style="font-size: 14px; ...
- ECMAScript6重复字符串方法repeat()
repeat() 1.定义 repeat()方法返回一个新字符串,新字符串将对象字符串重复指定次数. 2.语法 str.repeat(count) count:表示新构造的字符串把原字符串重复的次数, ...
- 整理前端css/js/jq常见问题及解决方法(1)
1. 兼容ie8圆角的解决方法:下载ie-css3.htc文件在css中加入behavior:url(ie-css3.htc);z-index:3; position:relative 即可 2. 去 ...
- PEP8 Python 编码规范整理(Python)
add by zhj: 这个是豆瓣网友整理的PEP8,算是PEP8的一个简易版本,因为原PEP8内容太多,所以建议先看这篇文章,然后再看PEP8中文翻译 原文:http://www.douban.co ...