es6之let精讲

let简介

let和var都为javascript关键字,两者都为变量声明方式
let关键字可以将变量绑定到所在的任意作用域中,换句话说,let为声明的变量隐式地劫持了所在的块级作用域。

o fuck 上面说了个毛
不用管上面,下面我用实例来说明let和var区别

var简介(有基础的可以选择跳过)

通过var声明的变量存在变量提升:

if (temp) {
    var value = 1;
}
console.log(value);

一般情况,在强数据类型的语言中,只有temp为true的时候,才会创建value,如果temp为false,结果应该是报错,
然而在javascript中,这段代码相当于

var value;
if (temp) {
    value = 1;
}
console.log(value);

如果temp为false,则结果为undefined。

let部分(终于到正题了)

1.不会被提升

还是上面的例子

if (false) {
    let value = 1;
}
console.log(value);//Uncaught ReferenceError: value is not defined

再来个例子

console.log( bar );//ReferenceError: bar is not defined
let bar = 2;

而把let换成var则结果为undefined

2.重复声明报错

来看这段代码

var value = 1let value = 2//Uncaught SyntaxError: Identifier 'value' has already been declared

用let这样声明会报错,而var则不会,var 会覆盖之前声明

3.不绑定全局作用域

当在全局作用域中使用var声明的时候,会创建一个新的全局变量作为全局对象的属性。

var value = 1;
console.log(window.value); // 1

而let就不会

let value = 1;
console.log(window.value); // undefined

注:一个小的注意点

来看下面这段代码

var funcs = [];
for (var i = 0; i < 3; i++) {
    funcs[i] = (function(i){
        return function() {
            console.log(i);
        }
    }(i))
}
funcs[0](); // 0

这是解决闭包问题的一段代码
用let也可以解决

var funcs = [];
for (let i = 0; i < 3; i++) {
    funcs[i] = function () {
        console.log(i);
    };
}
funcs[0](); // 0

等等 上面不是说let不提升,不能重复声明,不能绑定全局作用域。那位什么会打印出正确的i的值呢?
重点来了
思考下面代码

for (let i = 0; i < 3; i++) {
  let i = 'abc';
  console.log(i);
}
// abc
// abc
// abc

如果是var,则为

for (var i = 0; i < 3; i++) {
  var i = 'abc';
  console.log(i);
}
// abc

简单的来说,就是在 for (let i = 0; i < 3; i++) 中,即圆括号之内建立一个隐藏的作用域,这就可以解释
之前那段代码

var funcs = [];
for (let i = 0; i < 3; i++) {
    funcs[i] = function () {
        console.log(i);
    };
}
funcs[0](); // 0

(let i = 0) {
    funcs[0] = function() {
        console.log(i)
    };
}

(let i = 1) {
    funcs[1] = function() {
        console.log(i)
    };
}

(let i = 2) {
    funcs[2] = function() {
        console.log(i)
    };
};

其实是一个作用
当执行函数的时候,根据词法作用域就可以找到正确的值,其实你也可以理解为 let 声明模仿了闭包的做法来简化循环过程。
怎么样,经过我的剖析,想必大家对let的了解已经不是菜鸟了。

都看到这里了,点波关注再走

猜你喜欢

转载自blog.csdn.net/qq_40776048/article/details/81460433
今日推荐