JavaScript中let、const和var这几个关键字的区别是常考知识点。其中，let和const具有块级作用域、变量不可重复声明等特性，而var与之不同。今天咱们就来探讨一下，如何用var模拟实现let和const的核心效果。在这之前，先一起回顾下JavaScript的三种作用域。

一、JavaScript的三种作用域回顾

（一）全局作用域

全局作用域就像是一个“大广场”，在这个“广场”里声明的变量，所有地方都能访问到。简单来说，那些没有被包含在任何函数或者大括号里声明的变量，都处于全局作用域。比如下面这个例子：

var a = 1; function test() { var b = 2; function testbar(c) { console.log(a + b + c); // 输出6 } testbar(3); } test();

在这个代码里，变量a和函数test都在最外层，属于全局作用域。内层函数testbar可以访问到外层的变量a和b，最终输出结果为6。

（二）函数作用域

函数作用域可以理解为每个函数都是一个独立的“小房间”，在函数内部声明的变量，就像是放在这个“小房间”里的东西，函数外面是无法访问的。看下面这个示例：

function test() { var age = 123; } test(); console.log(age);

运行这段代码，会报错Uncaught ReferenceError: age is not defined ，这是因为在函数test外面访问其内部声明的变量age，是不被允许的。

（三）块级作用域

ES6引入let和const关键字后，才有了块级作用域的概念。可以把块级作用域想象成用大括号{}围起来的一个“小区域”，在这个“小区域”内定义的变量和常量，出了这个“小区域”就访问不到了。对比下面这段代码：

function test() { if(true){ var age = 123; let age2 = 456; } console.log("age", age); console.log("age2", age2); } test();

运行结果中，age可以正常输出123，但访问age2时会报错Uncaught ReferenceError: age2 is not defined。这表明，var声明的变量没有块级作用域，而let声明的变量有块级作用域。

二、用var模拟let的块级作用域

提到JavaScript的作用域，除了let，大家应该能想到函数作用域。利用立即执行函数（IIFE），可以模拟出let的块级作用域效果。立即执行函数会在定义后马上执行，同时创建一个新的作用域，这个作用域里的变量和外部变量相互独立。

先看看常规使用let或const的示例：

{ let x = 88; console.log('里面x', x); // 正常输出 88 } console.log('外面x', x);

在这个例子里，在块级作用域外面访问x会报错is not defined 。

再看用var模仿的效果：

{ (function() { var x = 88; console.log('里面x', x); // 输出 88 })(); console.log('外面x', x); // 报错 }

这里用立即执行函数把var x = 88包起来，就把x的作用域限制在了函数内部，达到了类似let或const的块级作用域效果。

三、用var模拟const声明变量后不可变

实现用var模拟const声明变量后不可变，有几种方法，下面给大家详细介绍。

（一）使用Object.defineProperty

Object.defineProperty这个API可以用来定义对象的属性特性。如果对它不太熟悉，可以去深入学习一下。下面看个例子：

var testConst = {}; Object.defineProperty(testConst, 'val', { value: 10, writable: false, configurable: false, }); console.log('修改前', testConst.val); // 打印：10 testConst.val = 20; // 由于writable为false所以不生效 console.log('修改后', testConst.val); // 打印：10

在这个例子里，通过设置writable: false，就使得属性val不可变，即使尝试修改它，也不会生效。需要注意的是，在严格模式下，如果尝试修改不可写的属性，会抛出TypeError错误。

（二）Proxy代理拦截

Proxy代理也是一个很有用的API。下面通过代码示例来看看如何用它实现变量不可变：

var testConst = new Proxy({}, { value: 10, set(target, prop, value) { if (prop === 'value') { return false; // 修改属性时，直接返回false } target[prop] = value; return true; } }); console.log('修改前', testConst.value); // 10 testConst.value = 20; // 不生效 console.log('修改后', testConst.value); // 10

这段代码利用Proxy的set方法，对属性修改进行拦截。当尝试修改指定属性value时，直接返回false，从而禁止了修改操作。

（三）用闭包实现

闭包也能实现类似的效果，看下面的代码：

function createConst(value) { return { get value() { return value; } }; } var testConst = createConst(10); console.log('修改前', testConst.value); // 10 testConst.value = 20; // 不生效，因为并没有set方法 console.log('修改后', testConst.value); // 10

这段代码的核心是只定义了get方法，没有定义set方法。这样，当尝试修改testConst.value时，因为没有对应的设置方法，所以修改不会生效。

四、使用var实现不可重复声明的变量

我们都知道，用var声明的变量可以重复声明，后面声明的会覆盖前面的。但let和const在同一作用域内不允许重复声明。那怎么用var模拟这个效果呢？可以借助Map()来实现。通过封装一个类，能达到模拟的目的。下面是基本的封装代码：

class ImitateVar { constructor() { this.scopevar = new Map(); } // 用于声明变量 declareVar(name, value) { if (this.scopevar.has(name)) { return false; } this.scopevar.set(name, value); return true; } // 获取变量 get(name) { if (this.scopevar.has(name)) { return this.scopevar.get(name); } return undefined; } // 设置变量 set(name, value) { if (!this.scopevar.has(name)) { return false; } this.scopevar.set(name, value); return true; } }

来分析一下这个ImitateVar类：

  • constructor用于初始化一个Map对象，这个Map用来存储变量。
  • declareVar方法用于声明变量。它会先检查变量是否已经存在于Map中，如果存在，就返回false，表示不能重复声明；如果不存在，就把变量添加到Map中，并返回true。
  • get方法用于获取变量的值。它会先判断变量是否存在，如果存在，就返回对应的值；否则返回undefined。
  • set方法用于设置变量的值。同样会先检查变量是否存在，存在的话就设置新值并返回true，不存在则返回false。

下面看看这个类的基本使用：

var imitateVar = new ImitateVar(); // 声明 imitateVar.declareVar('myVar', 10); console.log('看看myVar', imitateVar.get('myVar')); // 10 // 尝试重复声明 if (!imitateVar.declareVar('myVar', 20)) { console.log('重复声明失败'); } console.log('再次看看myVar', imitateVar.get('myVar')); // 10 // 修改变量 imitateVar.set('myVar', 25); console.log('修改后的myVar', imitateVar.get('myVar')); // 25

在这个示例中，分别进行了变量的声明、重复声明尝试、获取和修改操作。当尝试重复声明myVar时，imitateVar.declareVar('myVar', 20)会返回false，表示重复声明失败。

五、总结

通过上面的方法，我们实现了用var模拟let和const的核心效果。这道面试题主要考察大家对JavaScript基础知识的掌握程度，能否快速联想到相关知识点来解决这些小需求。var、let和const还有很多其他的不同之处，但这里主要介绍了几个比较核心的知识点。如果在面试中遇到这个问题，能说出这些内容，就说明你的基本功还是不错的。要是文章中有哪里写得不对，或者你有更好的建议，欢迎指出来，咱们一起学习进步。