ECMAScript 6 引入了许可声明。
我听说它被描述为一个当地变量,但我仍然不确定它是如何行为不同于 var 关键词。
什么是差异?什么时候应该被允许使用而不是 var?
ECMAScript 6 引入了许可声明。
我听说它被描述为一个当地变量,但我仍然不确定它是如何行为不同于 var 关键词。
什么是差异?什么时候应该被允许使用而不是 var?
当前回答
这个解释是从我在Medium上写的一篇文章中得出的:
Hoisting 是一个 JavaScript 机制,在其中变量和函数声明被转移到其范围的顶部,由分数者将源代码列入一个中间代表性之前,实际的代码执行由 JavaScript 解释器开始。
其他回答
// An array of adder functions.
var adderFunctions = [];
for (var i = 0; i < 1000; i++) {
// We want the function at index i to add the index to its argument.
adderFunctions[i] = function(x) {
// What is i bound to here?
return x + i;
};
}
var add12 = adderFunctions[12];
// Uh oh. The function is bound to i in the outer scope, which is currently 1000.
console.log(add12(8) === 20); // => false
console.log(add12(8) === 1008); // => true
console.log(i); // => 1000
// It gets worse.
i = -8;
console.log(add12(8) === 0); // => true
上面的过程不会产生所需的函数序列,因为我的范围超越了每个函数创建的区块的 iteration。 相反,在环节结束时,每个函数的 i 关闭指在环节结束时的 i 值(1000)为每个在 adder 中的匿名函数。
// Let's try this again.
// NOTE: We're using another ES6 keyword, const, for values that won't
// be reassigned. const and let have similar scoping behavior.
const adderFunctions = [];
for (let i = 0; i < 1000; i++) {
// NOTE: We're using the newer arrow function syntax this time, but
// using the "function(x) { ..." syntax from the previous example
// here would not change the behavior shown.
adderFunctions[i] = x => x + i;
}
const add12 = adderFunctions[12];
// Yay! The behavior is as expected.
console.log(add12(8) === 20); // => true
// i's scope doesn't extend outside the for loop.
console.log(i); // => ReferenceError: i is not defined
每个函数现在保留在函数创建时的 i 的值,并且 adderFunctions 按照预期行事。
现在,图像将两种行为混合在一起,你可能会看到为什么不建议在同一脚本中混合更新的Let和 const。
const doubleAdderFunctions = [];
for (var i = 0; i < 1000; i++) {
const j = i;
doubleAdderFunctions[i] = x => x + i + j;
}
const add18 = doubleAdderFunctions[9];
const add24 = doubleAdderFunctions[12];
// It's not fun debugging situations like this, especially when the
// code is more complex than in this example.
console.log(add18(24) === 42); // => false
console.log(add24(18) === 42); // => false
console.log(add18(24) === add24(18)); // => false
console.log(add18(24) === 2018); // => false
console.log(add24(18) === 2018); // => false
console.log(add18(24) === 1033); // => true
console.log(add24(18) === 1030); // => true
不要让这件事发生在你身上,使用灯具。
函数运行() { var foo = “Foo”; let bar = “Bar”; console.log(foo, bar); // Foo Bar { var Moo = “Mooo” let baz = “Bazz”; console.log(moo, baz); // Mooo Bazz } console.log(moo); // Mooo console.log(baz); // ReferenceError } run();
為什麼讓關鍵字被引入到語言是功能範圍是混亂的原因,是JavaScript的主要錯誤來源之一。
创建全球对象财产
在最高层次上,让我们不同于VAR,不会在全球对象上创造任何财产:
var foo = “Foo”; // 全球推翻的Let bar = “Bar”; // 不允许全球推翻的console.log(window.foo); // Foo console.log(window.bar); // undefined
正如我目前正在试图深入了解JavaScript,我将分享我的简短研究,其中包含一些已经讨论的伟大作品,以及一些其他细节,从不同的角度。
理解VAR和LAT之间的差异可以更容易,如果我们理解函数和区块范围之间的差异。
让我们来看看以下案例:
(function timer() {
for(var i = 0; i <= 5; i++) {
setTimeout(function notime() { console.log(i); }, i * 1000);
}
})();
Stack VariableEnvironment //one VariablEnvironment for timer();
// when the timer is out - the value will be the same for each iteration
5. [setTimeout, i] [i=5]
4. [setTimeout, i]
3. [setTimeout, i]
2. [setTimeout, i]
1. [setTimeout, i]
0. [setTimeout, i]
####################
(function timer() {
for (let i = 0; i <= 5; i++) {
setTimeout(function notime() { console.log(i); }, i * 1000);
}
})();
Stack LexicalEnvironment - each iteration has a new lexical environment
5. [setTimeout, i] [i=5]
LexicalEnvironment
4. [setTimeout, i] [i=4]
LexicalEnvironment
3. [setTimeout, i] [i=3]
LexicalEnvironment
2. [setTimeout, i] [i=2]
LexicalEnvironment
1. [setTimeout, i] [i=1]
LexicalEnvironment
0. [setTimeout, i] [i=0]
当按时()被称为执行内容时,将创建一个内容,该内容将包含每个字符串的变量环境和所有相应的语法环境。
更简单的例子
功能范围
function test() {
for(var z = 0; z < 69; z++) {
//todo
}
//z is visible outside the loop
}
区块范围
function test() {
for(let z = 0; z < 69; z++) {
//todo
}
//z is not defined :(
}
简而言之,Let和Var之间的区别在于Var是功能分解,Let是区块分解。
现在我认为有更好的转换变量到一个区块的声明使用允许:
function printnums()
{
// i is not accessible here
for(let i = 0; i <10; i+=)
{
console.log(i);
}
// i is not accessible here
// j is accessible here
for(var j = 0; j <10; j++)
{
console.log(j);
}
// j is accessible here
}
我认为人们会开始使用Let Here之后,以便他们在JavaScript中与其他语言、Java、C#等类似的分解。
没有对JavaScript的漏洞的明确理解的人早就犯了错误。
Hoisting 不支持使用Let。
在此方法中,在JavaScript中存在的错误正在被删除。
提到ES6在深度:让它更好地理解。
让
区块范围
在顶级(功能之外)
var globalVariable = 42;
let blockScopedVariable = 43;
console.log(globalVariable); // 42
console.log(blockScopedVariable); // 43
console.log(this.globalVariable); // 42
console.log(this.blockScopedVariable); // undefined
在一个功能之内
(() => {
var functionScopedVariable = 42;
let blockScopedVariable = 43;
console.log(functionScopedVariable); // 42
console.log(blockScopedVariable); // 43
})();
console.log(functionScopedVariable); // ReferenceError: functionScopedVariable is not defined
console.log(blockScopedVariable); // ReferenceError: blockScopedVariable is not defined
在一个区块内
{
var globalVariable = 42;
let blockScopedVariable = 43;
console.log(globalVariable); // 42
console.log(blockScopedVariable); // 43
}
console.log(globalVariable); // 42
console.log(blockScopedVariable); // ReferenceError: blockScopedVariable is not defined
在一个圈子里
用Let in Loops宣言的变量只能在该圈内提到。
for (var i = 0; i < 3; i++) {
var j = i * 2;
}
console.log(i); // 3
console.log(j); // 4
for (let k = 0; k < 3; k++) {
let l = k * 2;
}
console.log(typeof k); // undefined
console.log(typeof l); // undefined
// Trying to do console.log(k) or console.log(l) here would throw a ReferenceError.
// Logs 3 thrice, not what we meant.
for (var i = 0; i < 3; i++) {
setTimeout(() => console.log(i), 0);
}
// Logs 0, 1 and 2, as expected.
for (let j = 0; j < 3; j++) {
setTimeout(() => console.log(j), 0);
}
临时死区
由于临时死亡区,使用声明的变量在被声明之前无法访问,试图这样做会导致错误。
console.log(noTDZ); // undefined
var noTDZ = 43;
console.log(hasTDZ); // ReferenceError: hasTDZ is not defined
let hasTDZ = 42;
没有重新宣布
var a;
var a; // Works fine.
let b;
let b; // SyntaxError: Identifier 'b' has already been declared
var c;
let c; // SyntaxError: Identifier 'c' has already been declared
格斯特
没有重新分配
const a = 42;
a = 43; // TypeError: Assignment to constant variable.
请注意,这并不意味着值是不可改变的;它的属性仍然可以改变。
const obj = {};
obj.a = 42;
console.log(obj.a); // 42
如果您想要一个不可变的对象,您应该使用 Object.freeze()。
const obj = Object.freeze({a: 40});
obj.a = 42;
console.log(obj.a); // 40
console.log(obj.b); // undefined
初步者需要
在使用 const 表示变量时,您必须始终指定值。
const a; // SyntaxError: Missing initializer in const declaration