지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > JavaScript에 정의된 상수 인스턴스에 대한 자세한 설명

JavaScript에 정의된 상수 인스턴스에 대한 자세한 설명

怪我咯
풀어 주다： 2017-07-07 10:33:35
원래의
1591명이 탐색했습니다.

이 글에서는 주로 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)ChromeInternet ExplorerOperaSafari
기본 지원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()


FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support4 (2.0)69未实现5.1

Object.seal()


FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support4 (2.0)69未实现5.1

Object.freeze()


FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support4.0 (2)69125.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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
javascript js 상해
원천：php.cn
이전 기사：js에서 객체를 생성하는 방법 요약(샘플 코드) 다음 기사：JavaScript 필터 키워드 예에 대한 자세한 설명
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
JavaScript를 사용하지 않고 클릭 시 이미지 소스를 동적으로 수정하는 CSS 전용 방법 img:active와 같은 CSS만 사용하여 마우스 클릭 시 이미지의 소스를 변경해야 합니다.{}
에서 2024-04-06 19:25:49
0
1
505
d3.js를 확대할 때 산점도 값이 유지되지 않습니다. d3.js를 처음 사용하는 것이므로 양해해 주시기 바랍니다. vue.js 파일에 순수 JavaScript로 구현했습니다. 확대/축소 기능을 사용하여 산점도를 만들...
에서 2024-04-06 18:16:26
0
1
403
공급업체별 의사 요소에 대한 JavaScript 호버 이벤트 나는 아래에 HTMLinput标签。$("input[type='range']::-webkit-slider-thumb").on('hover',fun...
에서 2024-04-06 15:35:24
0
1
274
Javascript/Jquery를 사용하여 버튼 없이 양식 제출 JavaScript 함수를 호출하고 JQUERY/PHP를 사용하여 양식을 실행하여 버튼 없이 양식을 제출하려고 합니다. 페이지를 다시 로드하지 않고 백엔드에서 양...
에서 2024-04-06 14:54:03
0
2
421
CollapseDisplay 클래스를 사용하여 Bootstrap 아코디언 헤더의 모양을 사용자 정의하세요. 클래스 Collapseshow를 사용하여 패널의 카드 제목 스타일을 지정하고 싶습니다. 이 예에서는 첫 번째 패널입니다. CSS를 사용하여 .accordion.c...
에서 2024-04-06 12:53:11
0
1
376
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿