>  기사  >  웹 프론트엔드  >  JavaScript 객체로 할 수 있는 몇 가지 작업

JavaScript 객체로 할 수 있는 몇 가지 작업

hzc
hzc앞으로
2020-06-06 17:17:001994검색

일반적인 객체 속성 할당 및 탐색 외에도 JavaScript 객체를 사용하여 다른 많은 작업을 수행할 수도 있습니다. 이 문서에서는 내부 속성에 액세스하고, 속성 설명자를 조작하고, 읽기 전용 속성을 상속하는 등 이를 사용하는 방법을 알아봅니다.

1. 내부 속성 액세스


일반적인 방법으로 액세스할 수 없는 JavaScript 개체의 내부 속성입니다. 내부 속성 이름은 대괄호[[]]로 묶여 있으며 객체 생성 시 사용할 수 있습니다.

내부 속성은 기존 개체에 동적으로 추가할 수 없습니다.

내부 속성은 일부 내장 JavaScript 객체에서 사용할 수 있으며 ECMAScript 사양에 지정된 내부 상태를 저장합니다.

내부 속성에는 두 가지가 있는데, 하나는 객체를 조작하는 방식이고, 다른 하나는 데이터를 저장하는 방식입니다. 예:

  • [[Prototype]] — null 또는 객체일 수 있는 객체의 프로토타입

  • [[Extensible]] — 객체에 새 속성을 동적으로 추가할 수 있는지 여부를 나타냅니다.

  • [[PrivateFieldValues] ] — 비공개 클래스 필드를 관리하는 데 사용됩니다.

2. 속성 설명자 개체


데이터 속성에는 값을 읽고 쓸 수 있는 데이터 값의 위치가 포함됩니다. 즉, 데이터 속성은 Object.Attributes를 통해 액세스할 수 있습니다. 즉, 우리가 일반적으로 상호 작용하는 사용자가 할당한 값은 무엇이든 원하는 것을 반환하고 추가 작업을 수행하지 않습니다.

데이터 속성에는 동작을 설명하는 4가지 특성이 있습니다(내부 값을 나타내기 위해 속성은 두 개의 대괄호 안에 표시됨). 이를 설명자 개체라고 합니다.

값 설명자는 속성의 데이터 값입니다. 예를 들어 다음 개체가 있습니다.

let foo = {
  a: 1}

그러면 a의 값 속성 설명자는 1입니다.

writable은 속성 값을 변경할 수 있는지 여부를 나타냅니다. 기본값은 true입니다. 이는 속성이 쓰기 가능함을 의미합니다. 그러나 여러 가지 방법으로 이를 쓸 수 없게 만들 수 있습니다.

configurable은 개체의 속성을 삭제하거나 해당 속성 설명자를 변경할 수 있음을 의미합니다. 기본값은 true이며, 이는 구성 가능함을 의미합니다.

열거 가능하다는 것은 for...in 루프로 탐색할 수 있다는 의미입니다. 기본값은 true입니다. 이는 for-in 루프를 통해 속성이 반환될 수 있음을 의미합니다. 반환된 배열에 속성 키를 추가하기 전에 Object.keys 메서드는 열거 가능한 설명자를 확인합니다. 그러나 Reflect.ownKeys 메서드는 이 속성 설명자를 확인하지 않고 대신 모든 자체 속성 키를 반환합니다.

프로토타입 설명자에는 다른 메서드가 있으며, get 및 set은 각각 값을 가져오고 설정하는 데 사용됩니다.

새 개체를 생성할 때 Object.defineProperty 메서드를 사용하여 다음과 같이 설명자를 설정할 수 있습니다.

let foo = {
  a: 1}Object.defineProperty(foo, 'b', {
  value: 2,
  writable: true,
  enumerable: true,
  configurable: true,});

이러한 방식으로 foo의 새 값은 {a: 1, b: 2}입니다.

defineProperty를 사용하여 기존 속성의 설명자를 변경할 수도 있습니다. 예를 들면:

let foo = {
  a: 1}Object.defineProperty(foo, 'a', {
  value: 2,
  writable: false,
  enumerable: true,
  configurable: true,});

그래서 foo.a에 다음과 같은 값을 할당하려고 하면:

foo.a = 2;

엄격 모드가 꺼지면 브라우저는 이를 무시합니다. 그렇지 않으면 쓰기 가능으로 설정했기 때문에 오류가 발생합니다. false는 속성이 쓸 수 없음을 나타냅니다.

아래와 같이 DefineProperty를 사용하여 속성을 getter로 변환할 수도 있습니다.

'use strict'let foo = {  a: 1}Object.defineProperty(foo, 'b', {  get() {    return 1;
  }
})

다음과 같이 작성하면:

foo.b = 2;

b 속성은 getter 속성이므로 엄격 모드를 사용하면 오류가 발생합니다. Getter 속성은 재할당할 수 없습니다.

3. 상속된 읽기 전용 속성은 할당할 수 없습니다.

상속된 읽기 전용 속성은 할당할 수 없습니다. 이렇게 설정했기 때문에 상속되므로 속성을 상속하는 객체에 전파되어야 한다는 점에서 의미가 있습니다.

Object.create를 사용하면 아래와 같이 프로토타입 객체에서 속성을 상속하는 객체를 생성할 수 있습니다.

const proto = Object.defineProperties({}, {
  a: {
    value: 1,
    writable: false
  }})const foo = Object.create(proto)

위 코드에서는 proto.a의 쓰기 가능한 설명자를 false로 설정하므로 다른 값을 할당할 수 없습니다. .

다음과 같이 쓰면

foo.a = 2;

엄격 모드에서는 오류 메시지가 표시됩니다.

요약


우리는

우리가 알지 못하는 JavaScript 객체로 많은 일을 할 수 있습니다. 우선, 일부 JavaScript 객체(예: 내장 브라우저 객체)에는 내부 속성이 있습니다. 이러한 속성은 이중 대괄호로 둘러싸여 있으며 객체 생성을 통해 동적으로 추가할 수 없는 내부 상태를 갖습니다.

JavaScript 개체 속성에는 값과 설정 가능 여부, 속성 설명자의 변경 가능 여부 등을 제어할 수 있는 속성 설명자가 있습니다.

defineProperty를 사용하여 속성의 속성 설명자를 변경할 수 있으며, 새 속성과 해당 속성 설명자를 추가하는 데에도 사용됩니다.

마지막으로 상속된 읽기 전용 속성은 읽기 전용으로 유지됩니다. 이는 상위 프로토타입 객체에서 상속되므로 의미가 있습니다.

추천 튜토리얼: "javascript 튜토리얼"

위 내용은 JavaScript 객체로 할 수 있는 몇 가지 작업의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
이 기사는 segmentfault.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제