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

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

青灯夜游
풀어 주다: 2020-07-09 15:00:04
앞으로
2493명이 탐색했습니다.

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

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:cnblogs.com
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿