JavaScript의 Object.defineProperty() 메소드 분석

이 기사에서는 JavaScript의 Object.defineProperty() 메서드에 대한 분석을 소개합니다. 이는 특정 참조 값을 가지고 있어 도움이 필요한 친구들이 참고할 수 있습니다.

=Object.defineProperty 사용

JavaScript 개체의 속성을 추가하거나 수정하는 방법에는 두 가지가 있습니다. Use = 직접 할당 또는 # 🎜 🎜#Object.defineProperty()를 사용하여 을 정의합니다. 다음과 같습니다:

// 示例1
var obj = {};

// 直接使用=赋值
obj.a = 1;

// 使用Object.defineProperty定义
Object.defineProperty(obj, "b",
{
    value: 2
});

console.log(obj) // 打印"{a: 1, b: 2}"

둘 사이에는 차이가 없는 것 같죠? 그러나 Object.getOwnPropertyDescriptor()를 사용하여 obj.a 및 obj.b 속성의

descriptor(속성 설명자)를 보면 =가 Object와 동일하지 않음을 알 수 있습니다. DefineProperty: #🎜 🎜#

// 示例2
var obj = {};

obj.a = 1;

Object.defineProperty(obj, "b",
{
    value: 2
});

console.log(Object.getOwnPropertyDescriptor(obj, "a")); // 打印"{value: 1, writable: true, enumerable: true, configurable: true}"
console.log(Object.getOwnPropertyDescriptor(obj, "b")); // 打印"{value: 2, writable: false, enumerable: false, configurable: false}"

= 할당을 사용하면 해당 속성의 속성 설명자 값을 수정할 수 있으며, 쓰기 가능, 열거 가능, 구성 가능이 모두 true임을 알 수 있습니다.

Object.defineProperty()를 사용하여 정의된 속성의 쓰기 가능, 열거 가능 및 구성 가능 속성 설명자의 기본값은 false이지만 모두 수정할 수 있습니다. 쓰기 가능(writable), 열거 가능(enumerable), 구성 가능(configurable)의 의미는 이름에서 짐작하기 어렵지 않으나 나중에 자세히 소개하겠습니다.

Using = 할당은 Object.defineProperty()를 사용하여 정의할 때 쓰기 가능, 열거 가능 및 구성 가능을 true로 설정하는 것과 같습니다. 코드 예제 3과 4는 동일합니다.

// 示例3
var obj = {};

obj.name = "Fundebug";
console.log(Object.getOwnPropertyDescriptor(obj, "name")); // 打印{value: "Fundebug", writable: true, enumerable: true, configurable: true}

// 示例4
var obj = {};

Object.defineProperty(obj, "name",
{
    value: "Fundebug",
    writable: true,
    enumerable: true,
    configurable: true
});
console.log(Object.getOwnPropertyDescriptor(obj, "name")); // 打印{value: "Fundebug", writable: true, enumerable: true, configurable: true}

Object.defineProperty()

Object.defineProperty()를 사용하여 값만 정의한 다음 쓰기 가능, 열거 가능 및 기본값 구성 가능 여부가 거짓입니다. 코드 예제 5와 6은 동일합니다.

// 示例5
var obj = {};

Object.defineProperty(obj, "name",
{
    value: "Fundebug"
});
console.log(Object.getOwnPropertyDescriptor(obj, "name")); // 打印{value: "Fundebug", writable: false, enumerable: false, configurable: false}

// 示例6
var obj = {};

Object.defineProperty(obj, "name",
{
    value: "Fundebug",
    writable: false,
    enumerable: false,
    configurable: false
});
console.log(Object.getOwnPropertyDescriptor(obj, "name")); // 打印{value: "Fundebug", writable: false, enumerable: false, configurable: false}

writable, enumerable 및 configurable이 모두 false이므로 obj.name 속성을 할당, 탐색 또는 삭제할 수 없습니다.

// 示例7
var obj = {};

Object.defineProperty(obj, "name",
{
    value: "Fundebug"
});

// writable为false，无法赋值
obj.name = "云麒";
console.log(obj.name); // 打印"Fundebug"

// enumerable为false，无法遍历
console.log(Object.keys(obj)); // 打印"[]"

// configurable为false，无法删除
delete obj.name;
console.log(obj.name); // 打印"Fundebug"

#🎜 🎜 #엄격 모드("use strict")에 있는 경우 예제 7의 코드는 아래에서 볼 수 있는 오류를 보고합니다.

writable

writable이 false이면 속성을 다시 할당할 수 없으며 엄격 모드에서 오류가 보고됩니다.

"읽기 전용 속성에 할당할 수 없습니다"

(# 🎜🎜# 유사한 애플리케이션 오류를 실시간으로 모니터링하고 싶다면 Fundebug를 무료로 사용해 보세요. 프런트 엔드 웹 페이지, WeChat 미니 프로그램, WeChat 미니 게임, Node.js 및 Java 오류 모니터링!

):

// 示例8
"use strict"

var obj = {};

Object.defineProperty(obj, "name",
{
    value: "Fundebug",
    writable: false,
    enumerable: true,
    configurable: true
});

obj.name = "云麒"; // 报错“Uncaught TypeError: Cannot assign to read only property 'name' of object '#<Object>'”

writable이 true이면 속성에 값이 할당될 수 있습니다. 독자는 이를 직접 테스트할 수 있습니다. enumerable

enumerable이 false인 경우 속성을 탐색할 수 없습니다.

// 示例9
"use strict"

var obj = {};

Object.defineProperty(obj, "name",
{
    value: "Fundebug",
    writable: true,
    enumerable: false,
    configurable: true
});

console.log(Object.keys(obj)) // 打印"[]"

enumerable이 true인 경우 속성을 탐색할 수 있습니다. 이것을 스스로 테스트하고 싶습니다.

configurable

enumerable이 false인 경우 속성을 삭제할 수 없으며 엄격 모드에서 오류가 보고됩니다.

"속성을 삭제할 수 없습니다."

：

// 示例10
"use strict"

var obj = {};

Object.defineProperty(obj, "name",
{
    value: "Fundebug",
    writable: true,
    enumerable: true,
    configurable: false
});

delete obj.name // 报错“Uncaught TypeError: Cannot delete property 'name' of #<Object>”

enumerable이 true이면 속성을 삭제할 수 있습니다. 독자가 직접 테스트해 볼 수도 있습니다. writable 및 configurable

writable과 enumerable이 동시에 false인 경우 Object.defineProperty()를 사용하여 속성을 재정의할 수 없으며 엄격하게 오류가 보고됩니다. mode

"속성을 재정의할 수 없습니다"

：

// 示例11
"use strict"

var obj = {};

Object.defineProperty(obj, "name",
{
    value: "Fundebug",
    writable: false,
    configurable: false
})

Object.defineProperty(obj, "name",
{
    value: "云麒"
}) // 报错“Uncaught TypeError: Cannot redefine property: name”

writable 또는 enumerable이 true인 경우 Object.defineProperty()를 사용하여 속성을 재정의할 수 있습니다. 그들 자신. 이 문서의 모든 코드 예제는 Chrome 67에서 테스트되었습니다.

관련 권장 사항:

js의 클래스 확장 및 객체 지향 기술 분석

angularjs 페이지 템플릿 삭제 사용법에 대해

위 내용은 JavaScript의 Object.defineProperty() 메소드 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!