乐趣区

关于前端:前端百题斩002js中6种变量声明方式

jiezi

写该系列文章的初衷是“让每位前端工程师把握高频知识点，为工作助力 ”。这是前端百题斩的第 2 斩，心愿敌人们关注公众号“ 执鸢者”，用常识武装本人的头脑。

随着 js 的倒退，目前共 6 种申明变量的形式，别离为 var、let、const、function、class、import，上面别离论述一下这六种形式。

1 var

在 ES5 阶段，用 var 定义变量，此阶段具备以下特点：

  1. 没有块的概念，能够跨块拜访，不能跨函数拜访；
  2. 存在变量晋升。
// 代码没报错，而是打印进去了 undefined，侧面阐明了 val 变量存在变量晋升
console.log(val); // undefined
var val = 1;
console.log(val); // 1

2 let

在 ES6 阶段，呈现了块的概念，新增了块级作用域，同时新增了 let 命令，let 申明的变量具备以下特点：

  1. let 申明的变量只在它所在的代码块无效；
  2. 不存在变量晋升。let 不会像 var 那样会产生‘变量晋升’景象，因而，变量须要先申明后再应用，否则会报错；
  3. 暂时性死区。在代码块内，应用 let 命令申明变量之前，该变量都是不可用的；
  4. 不容许反复申明。
// 试验一——只在所在的代码块无效
// 1
{
    let val = 2;
    console.log(val); // 2
}
// 2
{let val = 2;}
console.log(val); // ReferenceError: val is not defined
// 试验 2——不存在变量晋升 + 暂时性死区
{console.log(val); // 报错
    let val = 2;
}
// 试验三——不容许反复申明
{
    let val = 1;
    let val = 2; // SyntaxError: Identifier 'val' has already been declared
}

3 const

在 let 命令呈现的同时，呈现了 const 命令，其用于申明一个只读的常量，具备以下特点：

  1. 一旦申明就必须立刻初始化；
  2. 一旦申明，常量值就不能扭转了（指的是内存地址不能扭转）；
  3. 块作用域内无效；
  4. 不存在变量晋升；
  5. 存在暂时性死区。

对于上述的验证代码能够用参考 let 的。

对于 const，还有一点比拟有意思的指的具体论述一下：const 实际上保障的并不是变量的值不能改变，而是变量指向的那个内存地址不能改变。对于简略类型的数据而言，值就保留在变量指向的内存地址中，因而等同于常量。但对于复合类型的数据而言，变量指向的内存地址保留的只是一个指针，const 只能保障这个指针是固定的，至于指向的数据结构不受管制。那么如何保障复合类型的值如何保障呢？能够应用 Object.freeze()办法, 该办法使对象的原始属性不可变，但依然能够更改嵌套对象。为了使对象齐全不可变，通过将嵌套对象上的所有属性解冻达到成果。

const constantize = obj => {Object.freeze(obj);
  Object.keys(obj).forEach( key => {if ( typeof obj[key] === 'object' ) {constantize( obj[key] );
    }
  });
};

1.4 function

function 命令用于定义一个函数，具备以下特点：

  1. 函数申明后不会立刻执行，须要调用的时候才执行；
  2. 对反对 ES5 和 ES6 浏览器环境在块作用域内有肯定区别，所以应防止在块级作用域内申明函数。
function test() {// ……}

5 class

ES6 语法引入了 class 关键字，用来定义类，该写法相比于对象原型的形式具备以下特点：

  1. 相比于对象原型的形式写法更清晰；
  2. 更像面向对象编程的语法（对有面向对象编程教训的同学更敌对）。
class Calculate {constructor(x, y) {
        this.x = x;
        this.y = y;
    }
    
    add() {return this.x + this.y;}
}

6 import

ES6 在语言规范的层面上实现了模块性能，其中 import 命令就是用于加载模块，而后输入变量，其具备以下特点：

  1. import 命令承受一对大括号，其外面的变量名必须与被导入的模块对外接口的名称雷同；
  2. 用 as 关键字可将输出的变量名重命名；
  3. import 命令输出的变零都是只读的；
  4. import 命令具备晋升成果，会晋升到整个模块的头部，首先执行（因为 import 命令是在编译阶段执行的，在代码运行之前）；
  5. import 是动态执行，不能应用表达式和变量；
  6. import 会执行所加载的模块。
// 轻易举个例子
import {add} from './calcluate';

7 有意思的小问题

上面四种状况别离输入什么？为什么呢？欢送各位老铁留言

  1. 状况一
for (let i = 0; i < 3; i++) {
  let i = 'abc';
  console.log(i);
}
  1. 状况二
for (var i = 0; i < 3; i++) {
  var i = 'abc';
  console.log(i);
}
  1. 状况三
for (let i = 0; i < 3; i++) {
  var i = 'abc';
  console.log(i);
}
  1. 状况四
for (var i = 0; i < 3; i++) {
  let i = 'abc';
  console.log(i);
}

1. 如果感觉这篇文章还不错，来个分享、点赞吧，让更多的人也看到

2. 关注公众号执鸢者，与号主一起斩杀前端百题。

退出移动版