js实现let 和const

ES5实现let 和const
let的特性

用来声明一个变量:

  • 在块级作用域内有效,不能预处理,不存在变量提升,即未声明之前的代码不能调用
  • 不能重复声明
通过匿名函数和闭包的形式来模拟let
(function(){
  var c =3
  console.log(c) //1
})()
console.log(c)  //c is not defined

用匿名函数的作用域来模拟块级作用域,相当于将将用到let的代码放到匿名函数中,不会造成变量污染了

const的特性

用于声明一个常量,

  • 在块级作用域内有效,不能预处理,不存在变量提升,即未声明之前的代码不能调用
  • 不能重复声明
  • 不允许修改绑定,但允许修改值
  • 声明时必须进行初始化(赋值)
实现const
function _const(key, value) {
  if (window.hasOwnProperty(key)) {
    throw TypeError(`Cannot redefine property: ${key}`) // 不能重新声明
  }
  if (!value) {
    throw TypeError('声明时必须初始化即需要赋值') // 声明时必须初始化即需要赋值
  }
  window[key] = value;
  Object.defineProperty(window, key, {
    enumerator: false,
    configurable: false,
    get: function () {
      return value;
    },
    set: function (newValue) {
      if (newValue !== value) {
        throw TypeError('这是只读变量不可修改') // 只读变量不可修改
      } else {
        return value
      }
    }
  })
}
_const('a', { avlaue: 'aaa' })
a.avalue = 'aaa2'
// a='aaa2' //报错 Uncaught TypeError: 这是只读变量不可修改
// _const('a', { avlaue: 'aaa2' }) // Cannot redefine property: a 不能重新声明
相关

JavaScript中对象的数据属性和访问器属性

数据属性:
定义在对象内部的数据有四个特征:

  • configurable:是否可以被 delete 删除或者改变特征值
  • enumerable:是否能通过 for-in 循环遍历返回属性
  • writable:是否可以修改属性的值
  • value:保存这个属性的数据值

访问器属性:

  • configurable:能否通过 delete 删除,能否修改属性特性
  • enumerable:能否通过 for-in 循环返回属性
  • getter:读取属性时调用的函数,默认为 undefined
  • setter:写入属性时调用的函数,默认为 undefined
<think>好的,我现在需要帮助用户理解JavaScriptletconst的区别及用法。用户已经提供了一些参考资料,我需要综合这些信息并给出清晰的回答。 首先,用户的问题明确,想知道letconst的区别用法。根据引用内容,我需要整理出两者的关键点。比如,作用域、变量提升、重复声明、赋值限制等方面。 根据引用1,let是块级作用域,const也是,但const声明后不能改变值。引用2提到const确保变量值不被修改,而let允许修改变量值。引用3强调块级作用域暂时性死区。引用4指出letconst不会被提升,必须在声明后使用。引用5详细说明了const必须初始化,且不能重新赋值,但对象属性可以修改。 接下来,我需要将这些信息结构化。可能分为作用域、变量提升、重复声明、赋值限制、使用场景等部分。同时,要注意示例代码的正确性,比如展示块级作用域的例子,暂时性死区的错误,以及const对象属性可变的例子。 还需要比较两者的异同,帮助用户更好地理解何时使用letconst。例如,如果变量需要重新赋值,用let;如果不需要改变,用const。同时,强调优先使用const来增强代码可维护性。 可能需要注意的误区是,虽然const声明的对象不能重新赋值,但其属性可以修改。这一点需要明确说明,避免用户误解。 最后,总结关键点,并生成相关问题,帮助用户进一步学习。比如如何选择两者,块级作用域的好处,const对象的修改等。 需要确保回答符合之前的格式要求,使用中文,行内公式用$...$,代码块正确,引用标注准确。同时,语言要自然,结构清晰,分点说明。</think>以下是关于 JavaScript 中 `let` `const` 关键字的区别及用法的详细解析,结合技术特性与最佳实践说明: --- ### 一、核心区别对比表 | **特性** | `let` | `const` | |--------------------|-------------------------------|------------------------------| | **作用域** | 块级作用域 (`{}` 内有效) [^3] | 块级作用域 (`{}` 内有效) [^3] | | **变量提升** | 存在暂时性死区 (TDZ) [^4] | 存在暂时性死区 (TDZ) [^4] | | **重复声明** | 同一作用域不可重复声明 [^5] | 同一作用域不可重复声明 [^5] | | **赋值限制** | 可重新赋值 | 声明后不可重新赋值 [^2] | | **初始化要求** | 可不初始化 (`undefined`) | **必须初始化** [^5] | | **对象属性修改** | 允许修改对象属性 | 允许修改对象属性 [^5] | --- ### 二、作用域与暂时性死区 (TDZ) #### 1. 块级作用域示例 ```javascript { let a = 10; const b = 20; console.log(a); // 10 console.log(b); // 20 } console.log(a); // ReferenceError console.log(b); // ReferenceError ``` #### 2. 暂时性死区现象 ```javascript console.log(x); // ReferenceError (TDZ) let x = 5; console.log(y); // ReferenceError (TDZ) const y = 10; ``` --- ### 三、赋值与修改行为 #### 1. `let` 允许重新赋值 ```javascript let count = 0; count = 1; // 合法 ``` #### 2. `const` 禁止重新赋值 ```javascript const PI = 3.14; PI = 3.14159; // TypeError: Assignment to constant variable ``` #### 3. 对象属性修改的特殊性 ```javascript const user = { name: "Alice" }; user.name = "Bob"; // 允许修改属性 user = {}; // TypeError: Assignment to constant variable ``` --- ### 四、最佳实践指南 1. **优先使用 `const`** - 声明后不需要修改的变量强制使用 `const`(占比约 80% 场景)[^2] - 示例:配置项、数学常量、DOM 引用 ```javascript const API_URL = "https://api.example.com"; ``` 2. **需要重新赋值时使用 `let`** - 循环计数器、状态变量等需要变化的场景 ```javascript for (let i = 0; i < 10; i++) { console.log(i); } ``` 3. **完全弃用 `var`** - `var` 的函数作用域提升特性易导致意外行为 [^3] --- ### 五、技术原理深度解析 #### 1. 内存分配差异 - `let`:栈内存中分配可变地址 - `const`:栈内存地址固定,但堆内存内容可修改(对象类型)[^5] #### 2. 编译阶段处理 - `const` 声明会在编译时进行**常量折叠优化**(如 `const MAX = 100` 可能被直接替换为字面量) - `let` 变量会在运行时创建动态存储空间 #### 3. 浏览器实现差异 - 在严格模式 (`'use strict'`) 下,对 `const` 的修改会抛出错误 - 非严格模式中部分旧浏览器可能静默失败(但现代浏览器已统一行为) --- ### 六、常见误区澄清 1. **“`const` 对象完全不可变”** - 错误!`const` 仅保证变量引用不变,对象属性仍可修改(需配合 `Object.freeze()` 实现深度不可变) 2. **“`let` 比 `const` 性能更好”** - 错误!现代 JavaScript 引擎对两者的优化程度相当 3. **“块级作用域只在循环中有用”** - 错误!任何 `{}` 包裹的代码块(如 `if`、函数)都会创建新作用域 [^3] --- ### 七、进阶用法示例 #### 1. 配合 IIFE 实现模块化 ```javascript const module = (() => { let privateVar = 0; const increment = () => privateVar++; return { increment }; })(); ``` #### 2. 循环中的闭包处理 ```javascript for (let i = 0; i < 3; i++) { setTimeout(() => console.log(i), 100); // 输出 0, 1, 2 } ``` ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值