웹 프론트엔드 JS 튜토리얼 JavaScript 객체의 데이터 속성 및 접근자 속성에 대한 자세한 설명

JavaScript 객체의 데이터 속성 및 접근자 속성에 대한 자세한 설명

Jul 09, 2020 pm 03:00 PM
javascript 물체

객체를 만드는 두 가지 방법이 있습니다. 첫 번째는 새 연산자를 통한 다음 객체 생성자를 통해, 두 번째는 객체 문자 그럴 방법입니다. 아래에 표시된 바와 같이이 두 가지 방법에 의해 생성 된 객체는 동일하며 동일한 속성과 방법을 갖습니다. 이 속성에는 자신의 행동을 설명하는 내부 속성 설명자가 있습니다.

JavaScript 객체의 데이터 속성 및 접근자 속성에 대한 자세한 설명

object.defineProperty ()

using object.defineProperty (), 객체에있는 속성을 직접 생성하거나 기존 속성을 수정할 수 있습니다. Object.DefineProperty (OBJ, Prop, Descriptor)는 세 가지 매개 변수를 수신합니다. 속성 : 구성 가능, 열거 가능, 쓰기 가능, 값, GET, SET을 수정하려면 객체를 사용해야합니다. 객체를 통해 속성 속성을 수정할 때 객체를 통해 생성 된 속성 만 설정할 때만 객체를 통해 발생합니다. DefineProperty, 부울 속성 기본값은 False입니다. ECMAScript에는 데이터 속성 및 액세서 속성에 두 가지 유형의 속성이 있습니다. data 속성 속성 속성에는 네 가지 속성 설명자가 포함됩니다. 액세서 속성에 대해 속성을 수정할 수 있습니다. 위의 메소드 기본값을 통해 추가 된 객체 속성. [[열거 가능]] : For-In Loop을 통해 속성에 액세스 할 수 있는지 여부를 나타냅니다. 위의 메소드 기본값을 통해 추가 된 객체 속성.

[[writable]] : 속성의 값을 수정할 수 있는지 여부를 나타냅니다. 위의 메소드 기본값을 통해 추가 된 객체 속성.

[[value]] :이 속성의 데이터 값이 포함되어 있으며 읽고 쓸 수 있습니다. 위의 방법을 통해 추가 된 객체 속성은 기본적으로 정의되지 않습니다. withe

var person = new Object();
person.name = 'Nicy';
person.age = 21;
person.sayName = function() {
    console.log(this.name);
};        
var person = {
    name: 'Nicy',
    age: 21,
    sayName: function() {
        console.log(this.name);
    }
}
로그인 후 복사
e 객체에 의해 직접 작성된 속성. 그러나 조작은 무시됩니다. 엄격한 모드에서 오류 가보고됩니다. configuree는 구성 가능성을 요약합니다. 구성 가능성이 설정되면 속성을 삭제하여 속성을 삭제할 수 없습니다 3. 구성 가능하고 열거 가능한 것은 수정 될 수 없다. 구성 가능한 경우 삭제를 사용하여 속성을 삭제하십시오 수정되면 오류가 보고됩니다. inenumerable emenumerable은 객체 속성을 ... in and object.keys ()에 열거 할 수 있는지 여부를 나타냅니다. RR
var person = {};

Object.defineProperty(person, "name", {
    value: 'Nicy'
})
person.name = 'Lee';  
console.log(person.name)    // 'Nicy'

Object.defineProperty(person, "name", {
    writable: true
})
person.name = 'Lee';
console.log(person.name)    // 'Lee'
로그인 후 복사
ACCESSOR PROGITY

액세서 속성에는 4 개의 속성 설명자가 포함되어 있습니다. 속성을 데이터 속성으로 변경합니다. 객체 기본값에 직접 정의 된 속성.

[[열거 가능]] : For-In Loop을 통해 속성에 액세스 할 수 있는지 여부를 나타냅니다. 객체 기본값에 직접 정의 된 속성.

[[Get]]: 속성을 읽을 때 호출되는 함수, 기본값은 정의되지 않습니다.

[[Set]]: 속성 작성 시 호출되는 함수, 기본값은 정의되지 않습니다.

<span style="font-size: 13px;"><span style="color: #0000ff;"></span>var person = {<br>    name: 'Nicy',<br>    age: 21,<br>    sayName: function() {<br>        console.log(this.name);<br>    }<br>}<br><br>Object.defineProperty(person, "name", {<br>    configurable: false<br>})<br><br>delete person.name;    // 操作被忽略,无法通过delete删除属性<br>Object.defineProperty(person, "name", {    // throw error<br>    configurable:true    <br>})     <br>Object.defineProperty(person, "name", {    // throw error<br>    enumerable: false<br>})  <br>Object.defineProperty(person, "name", {     // 由于writable为true,所以可以修改value<br>    value: 'Lucy'<br>})console.log(person.name)    // Lucy<br>Object.defineProperty(person, "name", {    // writable可进行true -> false的单向修改<br>    writable: false<br>})<br>Object.defineProperty(person, "name", {     // throw error<br>    value: 'Lee'<br>})<br>Object.defineProperty(person, "name", {    // throw error,此时writable不可以false -> true<br>    writable: true<br>})<span style="color: #000000;"></span></span>
로그인 후 복사

Object.defineProperty()로 정의된 접근자 속성, 구성 가능하고 열거 가능한 기본값은 false입니다. data 속성과 액세서 속성 사이의 전환

object.getOwnPropertyDescriptor 속성 객체의 특성을 읽으십시오.  obj: 속성이 위치한 객체;

 prop: 액세스할 속성의 이름. Access-& gt; Accessor 속성은 액세스 데이터 속성에 Get 또는 Settreptres의 값 및 쓰기가있는 경우에만 액세스 디스크립터 및 데이터 디스크립터 중 하나 일 수 있습니다. 폐기됩니다. 다음 코드는 객체의 원래 데이터 속성 연도를 액세서 속성으로 변환합니다. 메모리 누출이 발생합니다.

R

var person = {};
Object.defineProperty(person, "a", { value : 1, enumerable:true });
Object.defineProperty(person, "b", { value : 2, enumerable:false });
Object.defineProperty(person, "c", { value : 3 }); // enumerable defaults to false
person.d = 4; // 如果使用直接赋值的方式创建对象的属性,则这个属性的enumerable默认为true

for (var i in person) {    
  console.log(i);  
}  //  'a' 和 'd' 

Object.keys(person); // ["a", "d"]
로그인 후 복사
AT 원래 데이터 속성 연도의 객체를 사용하여 속성에 대한 get 또는 설정을 설정하여 액세서 속성으로 변환 할 수 있습니다.

접근자 속성 -> 데이터 속성

将访问器属性转换为数据属性,只需要给现有访问器属性设置value或writable这两个属性描述符中的任意一个即可,其原有的get和set就会被废弃,从而转换为数据属性。

上面为person定义的访问器属性age,通过Object.defineProperty()只设置了get和set,所以configurable默认为false,不可以将其转换为数据属性。可以在访问器属性和数据属性间相互转化的属性其configurable特性值必须为true。

如下代码,我们为person新定义一个访问器属性job,将其configurable设置为true ,并将其转换为数据属性:

Object.defineProperty(person, "job", {
    configurable: true,
    enumerable: true,
    get: function() {
        return this._job;
    },
    set: function(value) {
        this._job = value;
    }
})

// 设置value和writable其中任意一个即可转换为数据属性        
Object.defineProperty(person, "job", {
    value: 'worker',
    writable: true
})

var descriptor = Object.getOwnPropertyDescriptor(person, 'job');
console.log(descriptor);    // {value: "worker", writable: true, enumerable: true, configurable: true}
로그인 후 복사

数据描述符value、writable 和访问器描述符get、set不能同时设置,否则会报错。

Object.defineProperties()

通过Object.defineProperties()可以一次性为对象定义多个属性。

var person = {};
Object.defineProperties(person, {
  name: {
    value: 'Nicy',
    writable: true
  },
  _age: {
    value: 21,
    enumerable: true,
    writable: true,
    configurable: true
  },
   age: {
    get: function() {
    return this._age;
    },
    set: function(value) {
    this._age = value;
    }
  }
});
로그인 후 복사

 相关教程推荐:JavaScript视频教程

위 내용은 JavaScript 객체의 데이터 속성 및 접근자 속성에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

WebSocket 및 JavaScript: 실시간 모니터링 시스템 구현을 위한 핵심 기술 WebSocket 및 JavaScript: 실시간 모니터링 시스템 구현을 위한 핵심 기술 Dec 17, 2023 pm 05:30 PM

WebSocket과 JavaScript: 실시간 모니터링 시스템 구현을 위한 핵심 기술 서론: 인터넷 기술의 급속한 발전과 함께 실시간 모니터링 시스템이 다양한 분야에서 널리 활용되고 있다. 실시간 모니터링을 구현하는 핵심 기술 중 하나는 WebSocket과 JavaScript의 조합입니다. 이 기사에서는 실시간 모니터링 시스템에서 WebSocket 및 JavaScript의 적용을 소개하고 코드 예제를 제공하며 구현 원칙을 자세히 설명합니다. 1. 웹소켓 기술

PHP의 요청 객체란 무엇입니까? PHP의 요청 객체란 무엇입니까? Feb 27, 2024 pm 09:06 PM

PHP의 요청 객체는 클라이언트가 서버로 보낸 HTTP 요청을 처리하는 데 사용되는 객체입니다. Request 객체를 통해 요청 메소드, 요청 헤더 정보, 요청 매개변수 등과 같은 클라이언트의 요청 정보를 얻어 요청을 처리하고 응답할 수 있습니다. PHP에서는 $_REQUEST, $_GET, $_POST 등과 같은 전역 변수를 사용하여 요청된 정보를 얻을 수 있지만 이러한 변수는 객체가 아니라 배열입니다. 요청사항을 보다 유연하고 편리하게 처리하기 위해

MySQL 쿼리 결과 배열을 객체로 변환하는 방법은 무엇입니까? MySQL 쿼리 결과 배열을 객체로 변환하는 방법은 무엇입니까? Apr 29, 2024 pm 01:09 PM

MySQL 쿼리 결과 배열을 객체로 변환하는 방법은 다음과 같습니다. 빈 객체 배열을 만듭니다. 결과 배열을 반복하고 각 행에 대해 새 개체를 만듭니다. foreach 루프를 사용하여 각 행의 키-값 쌍을 새 개체의 해당 속성에 할당합니다. 개체 배열에 새 개체를 추가합니다. 데이터베이스 연결을 닫습니다.

간단한 JavaScript 튜토리얼: HTTP 상태 코드를 얻는 방법 간단한 JavaScript 튜토리얼: HTTP 상태 코드를 얻는 방법 Jan 05, 2024 pm 06:08 PM

JavaScript 튜토리얼: HTTP 상태 코드를 얻는 방법, 특정 코드 예제가 필요합니다. 서문: 웹 개발에서는 서버와의 데이터 상호 작용이 종종 포함됩니다. 서버와 통신할 때 반환된 HTTP 상태 코드를 가져와서 작업의 성공 여부를 확인하고 다양한 상태 코드에 따라 해당 처리를 수행해야 하는 경우가 많습니다. 이 기사에서는 JavaScript를 사용하여 HTTP 상태 코드를 얻는 방법과 몇 가지 실용적인 코드 예제를 제공합니다. XMLHttpRequest 사용

JavaScript와 WebSocket: 효율적인 실시간 일기예보 시스템 구축 JavaScript와 WebSocket: 효율적인 실시간 일기예보 시스템 구축 Dec 17, 2023 pm 05:13 PM

JavaScript 및 WebSocket: 효율적인 실시간 일기 예보 시스템 구축 소개: 오늘날 일기 예보의 정확성은 일상 생활과 의사 결정에 매우 중요합니다. 기술이 발전함에 따라 우리는 날씨 데이터를 실시간으로 획득함으로써 보다 정확하고 신뢰할 수 있는 일기예보를 제공할 수 있습니다. 이 기사에서는 JavaScript 및 WebSocket 기술을 사용하여 효율적인 실시간 일기 예보 시스템을 구축하는 방법을 알아봅니다. 이 문서에서는 특정 코드 예제를 통해 구현 프로세스를 보여줍니다. 우리

PHP에서 배열과 객체의 차이점은 무엇입니까? PHP에서 배열과 객체의 차이점은 무엇입니까? Apr 29, 2024 pm 02:39 PM

PHP에서 배열은 순서가 지정된 시퀀스이며 요소는 인덱스로 액세스됩니다. 객체는 new 키워드를 통해 생성된 속성과 메서드가 있는 엔터티입니다. 배열 액세스는 인덱스를 통해 이루어지며, 객체 액세스는 속성/메서드를 통해 이루어집니다. 배열 값이 전달되고 객체 참조가 전달됩니다.

JavaScript에서 HTTP 상태 코드를 쉽게 얻는 방법 JavaScript에서 HTTP 상태 코드를 쉽게 얻는 방법 Jan 05, 2024 pm 01:37 PM

JavaScript에서 HTTP 상태 코드를 얻는 방법 소개: 프런트 엔드 개발에서 우리는 종종 백엔드 인터페이스와의 상호 작용을 처리해야 하며 HTTP 상태 코드는 매우 중요한 부분입니다. HTTP 상태 코드를 이해하고 얻는 것은 인터페이스에서 반환된 데이터를 더 잘 처리하는 데 도움이 됩니다. 이 기사에서는 JavaScript를 사용하여 HTTP 상태 코드를 얻는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 1. HTTP 상태 코드란 무엇입니까? HTTP 상태 코드는 브라우저가 서버에 요청을 시작할 때 서비스가

C++ 함수가 객체를 반환할 때 무엇에 주의해야 합니까? C++ 함수가 객체를 반환할 때 무엇에 주의해야 합니까? Apr 19, 2024 pm 12:15 PM

C++에서는 함수가 객체를 반환할 때 주의해야 할 세 가지 사항이 있습니다. 객체의 수명 주기는 메모리 누수를 방지하기 위해 호출자가 관리합니다. 매달린 포인터를 피하고 메모리를 동적으로 할당하거나 개체 자체를 반환하여 함수가 반환된 후에도 개체가 유효한지 확인하세요. 컴파일러는 성능을 향상시키기 위해 반환된 개체의 복사 생성을 최적화할 수 있지만 개체가 값 의미 체계에 따라 전달되는 경우 복사 생성이 필요하지 않습니다.

See all articles