이 글에서는 주로 JavaScript상수 정의를 자세히 소개하는데, 이는 일정한 참고 가치가 있습니다. 편집자와 함께 살펴보겠습니다.
학생들이 이 제목을 보면 혼란스러울 것이라고 생각합니다. JS에서 상수를 정의할 수 있나요? 놀리지 마, 알았지? 정확히 말하면 JS에는 상수가 없지만(ES6에는 상수 정의에 대한 키워드가 있는 것 같습니다), 더 깊이 파고들면 JS의 알려지지 않은 속성을 많이 찾을 수 있습니다. 다른 JS 세계를 찾아보세요.
우선, JS에서 객체의 속성은 실제로 다음 객체와 같은 고유한 암시적 속성을 포함합니다.
var obj = {};
obj.a = 1;
obj.b = 2;여기서 객체 obj와 이 객체의 두 가지 속성 a와 b를 정의합니다. 이 두 속성의 값을 삭제하려면 delete 키워드를 사용하여 이 두 속성을 삭제하거나 for...in... 문을 사용하여 obj 객체의 모든 속성을 열거할 수 있습니다. 우리는 일반적으로 코드를 작성할 때 자신도 모르게 이러한 속성을 기본값으로 설정하고 이를 JS가 가져야 하는 속성으로 간주합니다. 그러나 이러한 속성이 실제로 수정될 수 있는지는 알 수 없습니다. 속성을 정의하는 일반적인 방법은 기본적으로 속성의 속성을 사용하지만 속성을 정의할 때 속성의 속성을 수정할 수도 있습니다. 예:
var obj = {};
obj.a = 1;
obj.b = 2;
//等价于
var obj = {
a: 1,
b: 2
}
//等价于
var obj = {};
Object.defineProperty(obj, "a", {
value: 1, //初始值
writable: true, //可写
configurable: true, //可配置
enumerable: true //可枚举
});
Object.defineProperty(obj, "b", {
value: 2, //初始值
writable: true, //可写
configurable: true, //可配置
enumerable: true //可枚举
});여기에는 ES5인 Object.defineProperty() 메서드가 포함됩니다. 사양에 따르면 이 메소드의 기능은 객체에 새 속성을 정의하거나 객체의 기존 속성을 수정하고 속성을 설명하고 객체를 반환하는 것입니다.
| 기능 | Firefox(Gecko) | Chrome | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| 기본 지원 | 4.0 (2) | 5 | 9 [1] | 11.60 | 5.1 [ 2] |
还是天煞的IE8，如果你的项目要求兼容IE8，那么这个方法也就不适用了，不过IE8也对该方法进行了实现，只能在DOM对象上适用，而且有一些独特的地方，在这里就不讲解了。
Object.defineProperty() 方法可以定义对象属性的数据描述和存储描述，这里我们只讲数据描述符，不对存储描述符讲解，数据描述符有以下选项：
configurable 当且仅当该属性的 configurable 为 true 时，该属性描述符才能够被改变，也能够被删除。默认为 false。 enumerable 当且仅当该属性的 enumerable 为 true 时，该属性才能够出现在对象的枚举属性中。默认为 false。 value 该属性对应的值。可以是任何有效的 JavaScript 值（数值，对象，函数等）。默认为 undefined。 writable 当且仅当该属性的 writable 为 true 时，该属性才能被赋值运算符改变。默认为 false。
注意，当我们用常规方法定义属性的时候，其除 value 以外的数据描述符默认均为 true ，当我们用 Object.defineProperty() 定义属性的时候，默认为 false。
也就是说，当我们把 writable 设置为 false 的时候，该属性是只读的，也就满足了常量了性质，我们把常量封装在CONST命名空间里面：
var CONST = {};
Object.defineProperty(CONST, "A", {
value: 1,
writable: false, //设置属性只读
configurable: true,
enumerable: true
});
console.log(CONST.A); //1
CONST.A = 2; //在严格模式下会抛错，在非严格模式下静默失败，修改无效。但是这样定义的常量不是绝对的，因为我们依然可以通过修改属性的数据描述符来修改属性值：
var CONST = {};
Object.defineProperty(CONST, "A", {
value: 1,
writable: false,
configurable: true,
enumerable: true
});
Object.defineProperty(CONST, "A", {
value: 2,
writable: true, //恢复属性的可写状态
configurable: true,
enumerable: true
})
console.log(CONST.A); //2
CONST.A = 3;
console.log(CONST.A); //3想要做到真正的常量，还需要将属性设置为不可配置：
var CONST = {};
Object.defineProperty(CONST, "A", {
value: 1,
writable: false, //设置属性只读
configurable: false, //设置属性不可配置
enumerable: true
});
console.log(CONST.A); //1
CONST.A = 2; //错误！属性只读
Object.defineProperty(CONST, "A", {
value: 2,
writable: true,
configurable: true,
enumerable: true
}); //错误！属性不可配置但是如果只设置属性为不可配置状态，依然可以对属性值进行修改：
var CONST = {};
Object.defineProperty(CONST, "A", {
value: 1,
writable: true, //设置可写
configurable: false, //设置属性不可配置
enumerable: true
});
console.log(CONST.A); //1
CONST.A = 2;
console.log(CONST.A); //2进而我们可以推断出，configurable 描述符仅冻结属性的描述符，不会对属性值产生影响，也就是说该描述符会冻结 writable、configurable、enumerable 的状态，不会对属性值加以限制：
var CONST = {};
Object.defineProperty(CONST, "A", {
value: 1,
writable: false, //设置不可写
configurable: false, //设置属性不可配置
enumerable: false //设置不可枚举
});
Object.defineProperty(CONST, "A", {
value: 2, //该属性本身不受 configurable 的影响，但由于属性不可写，受 writable 的限制
writable: true, //错误！属性不可配置
configurable: true, //错误！属性不可配置
enumerable: true //错误！属性不可配置
});但是 configurable 的限制有一个特例，就是 writable 可以由 true 改为 false，不能由 false 改为 true：
var CONST = {};
Object.defineProperty(CONST, "A", {
value: 1,
writable: true, //设置可写
configurable: false, //设置属性不可配置
enumerable: false //设置不可枚举
});
Object.defineProperty(CONST, "A", {
value: 2, //该属性本身不受 configurable 的影响，由于属性可写，修改成功
writable: false,
configurable: false,
enumerable: false
});
console.log(CONST.A); //2
CONST.A = 3; //错误！属性只读可枚举描述符用于配置属性是否可以枚举，也就是是否会出现在 for ... in ... 语句中：
var CONST = {};
Object.defineProperty(CONST, "A", {
value: 1,
writable: false,
configurable: false,
enumerable: true //可枚举
});
Object.defineProperty(CONST, "B", {
value: 2,
writable: false,
configurable: false,
enumerable: false //不可枚举
});
for (var key in CONST) {
console.log(CONST[key]); //1
};有了以上的基础，我们也就学会一种定义常量的方法，使用属性的数据描述符，下次我们需要用到常量的时候，就可以定义一个 CONST 命名空间，将常量封装在该命名空间里面，由于属性描述符默认为 false，所以我们也可以这样定义：
var CONST = {};
Object.defineProperty(CONST, "A", {
value: 1,
enumerable: true
});
Object.defineProperty(CONST, "B", {
value: 2,
enumerable: true
});以上方法是从属性的角度的去定义一组常量，不过我们还可以用另外一种方法，从对象的角度去配置一个对象包括它的所有属性，Object.preventExtensions() 方法可以让一个对象不可扩展，该对象无法再添加新的属性，但是可以删除现有属性：
var CONST = {};
CONST.A = 1;
CONST.B = 2;
Object.preventExtensions(CONST);
delete CONST.B;
console.log(CONST); //CONST: { A: 1}
CONST.C = 3; //错误！对象不可扩展在该方法的基础之上，我们可以使用 Object.seal() 来对一个对象密封，该方法会阻止对象扩展，并将该对象的所有属性设置为不可配置，但是可写：
var CONST = {};
CONST.A = 1;
CONST.B = 2;
Object.seal(CONST);
CONST.A = 3;
console.log(CONST.A); //3
Object.defineProperty(CONST, "B", {
value: 2,
writable: true,
configurable: true, //错误！属性不可配置
enumerable: false, //错误！属性不可配置
})
CONST.C = 3; //错误！对象不可扩展也就是说 Object.seal() 方法相当于帮助我们批量的将属性的可配置描述符设置为 false ，所以说在代码实现层面相当于：
Object.seal = function (obj) {
Object.preventExtensions(obj);
for (var key in obj) {
Object.defineProperty(obj, key, {
value: obj[key],
writable: true,
configurable: false,
enumerable: true
})
};
return obj;
}在以上两个方法基础上，我们可以 Object.freeze() 来对一个对象进行冻结，实现常量的需求，该方法会阻止对象扩展，并冻结对象，将其所有属性设置为只读和不可配置：
var CONST = {};
CONST.A = 1;
CONST.B = 2;
Object.freeze(CONST);
CONST.A = 3; //错误！属性只读
Object.defineProperty(CONST, "B", {
value: 3, //错误！属性只读
writable: true, //错误！属性不可配置
configurable: true, //错误！属性不可配置
enumerable: false, //错误！属性不可配置
})
CONST.C = 3; //错误！对象不可扩展从代码实现层面上相当于：
Object.freeze = function (obj) {
Object.preventExtensions(obj);
for (var key in obj) {
Object.defineProperty(obj, key, {
value: obj[key],
writable: false,
configurable: false,
enumerable: true
})
};
return obj;
}最后我们在来看一下这三个方法的兼容性：
Object.preventExtensions()
| Feature | Firefox (Gecko) | Chrome | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic support | 4 (2.0) | 6 | 9 | 未实现 | 5.1 |
Object.seal()
| Feature | Firefox (Gecko) | Chrome | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic support | 4 (2.0) | 6 | 9 | 未实现 | 5.1 |
Object.freeze()
| Feature | Firefox (Gecko) | Chrome | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic support | 4.0 (2) | 6 | 9 | 12 | 5.1 |
到底还是万恶的IE，均不兼容IE8
现在，我们也就有了两种方法在JS中定义常量，第一种方法是从属性层面上来实现，在命名空间上可以继续添加多个常量，而第二种方法是从对象层面上来实现，对冻结对象所有属性以及对象本身：
//第一种方法：属性层面,对象可扩展
var CONST = {};
Object.defineProperty(CONST, "A", {
value: 1,
enumerable: true
});
//第二种方法：对象层面，对象不可扩展
var CONST = {};
CONST.A = 1;
Object.freeze(CONST);关于JS常量的问题就讲到这里了，许多书籍在介绍JS基础的时候都会提到JS当中没有常量，导致许多JS开发者在一开始就默认了JS是没有常量的这一说法。从严格语法意义上来讲，JS确实是没有常量的，但是我们可以通过对知识的深入和创造力来构建我们自己的常量，知识是死的，人是活的，只要我们不停的探索，满怀着创造力，就会发现其中不一样的世界。
위 내용은 JavaScript에 정의된 상수 인스턴스에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
