4. 如何在ES5环境下实现let
这个问题实质上是在回答let和var有什么区别，对于这个问题，我们可以直接查看babel转换前后的结果，看一下在循环中通过let定义的变量是如何解决变量提升的问题
//原代码
for (let index = 0; index < 10; index++) {
console.log(`index`, index)
}
console.log(index)
//转es5
"use strict";
for (var _index = 0; _index < 10; _index++) {
console.log("index", _index);
}
console.log(index);
babel在let定义的变量前加了道下划线，避免在块级作用域外访问到该变量，除了对变量名的转换，我们也可以通过自执行函数来模拟块级作用域
(function(){
for(var i = 0; i < 5; i ++){
console.log(i) // 0 1 2 3 4
}
})();
console.log(i) // Uncaught ReferenceError: i is not defined
var和let/const的区别：
- var声明的变量会挂到window上，而let和const不会
- var声明的变量存在变量提升，而let和const不会
- let和const声明形成块作用域，只能在块作用域里访问，不能跨块访问，也不能跨函数访问
- 同一作用域下let和const不能声明同名变量，而var可以
- 暂时性死区，let和const声明的变量不能在声明前被使用
5.如何在ES5环境下实现const
实现const的关键在于Object.defineProperty()这个API，这个API用于在一个对象上增加或修改属性。通过配置属性描述符，可以精确地控制属性行为。Object.defineProperty() 接收三个参数：Object.defineProperty(obj, prop, desc)
| 参数 | 说明 |
|---|---|
| obj | 要在其上定义属性的对象 |
| prop | 要定义或修改的属性的名称 |
| descriptor | 将被定义或修改的属性描述符 |
| 属性描述符 | 说明 | 默认值 |
|---|---|---|
| value | 该属性对应的值。可以是任何有效的 JavaScript 值（数值，对象，函数等）。默认为 undefined | undefined |
| get | 一个给属性提供 getter 的方法，如果没有 getter 则为 undefined | undefined |
| set | 一个给属性提供 setter 的方法，如果没有 setter 则为 undefined。当属性值修改时，触发执行该方法 | undefined |
| writable | 当且仅当该属性的writable为true时，value才能被赋值运算符改变。默认为 false | false |
| enumerable | enumerable定义了对象的属性是否可以在 for...in 循环和 Object.keys() 中被枚举 | false |
| Configurable | configurable特性表示对象的属性是否可以被删除，以及除value和writable特性外的其他特性是否可以被修改 | false |
对于const不可修改的特性，我们通过设置writable属性来实现
function _const(key, value) {
const desc = {
value,
writable: false
}
Object.defineProperty(window, key, desc)
}
_const('obj', {a: 1}) //定义obj
obj.b = 2 //可以正常给obj的属性赋值
obj = {} //无法赋值新对象
作者：写代码像蔡徐抻
链接：https://juejin.cn/post/6844904116552990727
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
网友评论