JavaScript块级作用域绑定的实现流程

目录

• 1.var声明和变量提升
• 2.块级声明和临时死区
• 3.禁止重复声明
• 4.块级作用域绑定的最佳实践

1.var声明和变量提升

无论是在函数作用域亦或是全局作用中使用var声明的变量，都会在预编译阶段被提升到当前作用域的顶部。

function func(condition) {
        if(condition){
    var value = "value";
    return value;
  } else {
    //此处可访问到value，但值为undefined
    return null;
  }
  //此处可访问到value，但值为undefined
}

通常在拥有块级作用域的语言中，上述代码块只会在当参数condition的值为true时，value变量才会被创建,且只能在if代码块中被访问到。但在js中，无论condition的值是什么，value变量都会被创建，它再预编译阶段中的实际表现如下：

function func(condition) {
  var value;
        if(condition){
    var value = "value";
    return value;
  } else {
    return null;
  }
}

2.块级声明和临时死区

块级声明会将当前声明变量的作用域限制在函数作用域或块级作用域内部，其他非作用区域访问会得到undefined。

function func(condition) {
        if(condition){
    let value = "value";
    return value;
  } else {
    //此处访问value会报错
    return null;
  }
  //此处访问value会报错
}

使用let或const的声明的变量会在预编译阶段被加入到临时性死区(TDZ)中,访问临时性死区中的变量会触发引用错误。

3.禁止重复声明

使用var声明同名变量时，不会产生任何问题，因为它只是相当于一个赋值操作。

function(condition) {
        var value = "value";
  var value = "val";
  //相当于
  var value = "value";
  value = "val";
}

但使用let和const声明变量时，会禁止声明同名变量，抛出变量已定义异常。

4.块级作用域绑定的最佳实践

变量定义默认使用const，只有确实需要改变变量的值时使用let。

原文地址：https://blog.csdn.net/weixin_49971653/article/details/126976691