学习ECMAScript 2015【7】Let + Const

原创
2021/10/13 10:36
阅读数 93

0.前言

今天的主角是:Let + Const,其实就是防止var乱跑而设计的。写过老的js代码的都或多或少经历过重名的变量带来的困扰。

1.总览

一言以蔽之,let就是打大括号内的varconst就是常量。

function f() {
  {
    let x;
    {
      // this is ok since it's a block scoped name
      const x = "sneaky";
      // error, was just defined with `const` above
      x = "foo";
    }
    // this is ok since it was declared with `let`
    x = "bar";
    // error, already declared above in this block
    let x = "inner";
  }
}

2.展开说说细节

2.1.let

就像MDN上说得那样,如果你不用let,他可是会乱跑。

image.png

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

function letTest() {
  let x = 1;
  {
    let x = 2;  // 不同的变量
    console.log(x);  // 2
  }
  console.log(x);  // 1
}

而且有一个特性很怪,爱的人爱得要死,恨的人也恨得要死。就是var默认给this对象新增属性:

var x = 'global';
let y = 'global';
console.log(this.x); // "global"
console.log(this.y); // undefined

这里有一个需要注意的点,就是彻底放弃var,写let的时候,一定要勤加大括号,不然一些情况下,你是错误的,比如switch语句:

let x = 1;
switch(x) {
  case 0:
    let foo;
    break;

  case 1:
    let foo; // SyntaxError for redeclaration.
    break;
}

let x = 1;

switch(x) {
  case 0: {
    let foo;
    break;
  }
  case 1: {
    let foo;
    break;
  }
}

一定要先定义,再使用。之前因为var太灵活,到处乱跑。所以经常看到一些不明所以就出现的变量,而且由于能被初始化成undefined,作者们写的时候也是毫无顾忌,这会导致读代码的人非常痛苦。现在的let,与通过 var 声明的有初始化值 undefined 的变量不同,通过 let 声明的变量直到它们的定义被执行时才初始化。

function do_something() {
  console.log(bar); // undefined
  console.log(foo); // ReferenceError
  var bar = 1;
  let foo = 2;
}

2.2.const

有的时候我们不希望函数内部改变一个值,我们只希望读取它,这种情况还不少。我们就可以用常量,这样用完了还可以传给下一个函数:

imagef5f4955ef0eb05af.png

// 定义常量MY_FAV并赋值7
const MY_FAV = 7;

// 报错 - Uncaught TypeError: Assignment to constant variable.
MY_FAV = 20;

// MY_FAV is 7
console.log('my favorite number is: ' + MY_FAV);

// 尝试重新声明会报错
// Uncaught SyntaxError: Identifier 'MY_FAV' has already been declared
const MY_FAV = 20;

// MY_FAV 保留给上面的常量,这个操作会失败
var MY_FAV = 20;

// 也会报错
let MY_FAV = 20;

展开阅读全文
加载中

作者的其它热门文章

打赏
0
0 收藏
分享
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部