속성 설명자의 JavaScript 객체 지향 상세 분석

이 글에서는javascript에 대한 관련 지식을 소개합니다. 속성 설명자, 데이터 설명자, 액세스 설명자 등 객체지향과 관련된 문제를 주로 소개합니다. 모두에게 도움이 되기를 바랍니다.

【관련 권장 사항:javascript 비디오 튜토리얼,web front-end】

JavaScript 객체 지향 - 속성 설명자

JavaScript는 실제로 함수형 프로그래밍과 객체 지향 프로그래밍을 포함한 다양한 프로그래밍 패러다임을 지원합니다. :

• JavaScript의 개체는 힙합 테이블과 같이 키와 값으로 구성된순서가 지정되지 않은 속성 컬렉션세트로 설계되었습니다.
• key는 식별자 이름이며 값은 모든 유형이 될 수 있습니다. 객체 또는 함수 유형;
• 값이 함수인 경우객체의 메서드;

1. 객체를 만드는 방법은 무엇입니까?

• 초창기에 객체를 생성하는 가장 일반적인 방법은 Object 클래스를 사용하고 new 키워드를 사용하여 객체를 생성한 다음 속성이나 메서드를 객체에 저장하는 것입니다.

var obj = new Object() obj.name = 'why' console.log(obj.name, obj) // why { name: 'why' }

• 나중에는 많은 개발자들은 편의상 객체를 리터럴 형태로 직접 생성합니다:

// 字面量方式 var obj2 = { name: 'jam', age: '8' } console.log(obj) // { name: 'jam', age: '8' }

2. 객체의 속성 조작 - 속성 설명자

이전에는 객체 내부에서 속성을 직접 정의하거나 객체에 직접 추가했습니다.
그러나 이런 방식으로 이 속성에 일부 제한을 적용할 수 없습니다. 예를 들어delect를 통해 이 속성을 삭제할 수 있고for-in 중에 탐색할 수 있습니다.순회?delect删除，是否可以在for-in遍历的时候被遍历出来呢？
如果我们想要对一个属性进行比较精准的操作控制，那么我就可以使用属性描述符。通过属性描述符可以精准的添加或修改对象的属性；
属性描述符需要使用Object.defineProperty来对属性进行添加或修改。

属性描述符分为两种：数据描述符和存取描述符

2.1数据描述符

数据描述符是一个具有值的属性，该值可能是可写的，也可能是不可写的。数据描述符具有以下可选键值：

• value：该属性对应的值。可以是任何有效的JavaScript值（数值，对象，函数等）。默认为undefined。
• writable：当且仅当该属性的writable为true时，value才能被复制运算符改变。默认为false。
• configurable：当且仅当该属性的configurable为true时，该属性描述符才能够被改变，同时该属性也能从对应的对象上被删除。默认为false。
• enumerable：当且仅当该属性的enumerable为true时，该属性才能够出现在对象的枚举属性中。默认为false。

2.2.1、获取属性描述符 Object.getOwnPropertyDescriptor()

Object.getOwnPropertyDescriptor()方法返回指定对象上一个自有属性对应的属性描述符。

Object.getOwnPropertyDescriptor(obj，prop)

• obj：需要查找的目标对象
• prop：目标对象内属性名称（String类型）。
• 返回值：如果指定的属性存在在于对象上，则返回其属性描述符对象，否则返回undefined。

注意：如果该方法的第一个参数不是对象，会报错（TypeError）。

2.1.2、设置属性描述符 Object.defineProperty

Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。

Object.defineProperty（obj，prop，descriptor）

• obj：要在其上定义属性的对象。
• prop：要定义或修改的属性的名称。
• descriptor：将被定义或修改的属性描述符
• 返回值：被传递给函数的对象

如下示例代码展示了属性描述符的设置和获取 var obj = { name: 'jam', age: 8 } Object.defineProperty(obj, 'job', { value: '律师' }) console.log(Object.getOwnPropertyDescriptor(obj, 'age')) // { value: 8, writable: true, enumerable: true, configurable: true } console.log(obj.job) // 律师 // 通过defineProperty新增的属性，该新属性是不可修改、不可删除以及不可枚举的 console.log(Object.getOwnPropertyDescriptor(obj, 'job')) // {value: '律师',writable: false,enumerable: false,configurable: false}

注意：通过defineProperty新增的属性，该新属性是不可修改、不可删除以及不可枚举的속성에 대해 보다 정확한 운영 제어를 원할 경우

속성 설명자

속성 설명자는 속성을 추가하거나 수정하려면Object.defineProperty를 사용해야 합니다.

2.1 데이터 설명자

데이터 설명자는 값이 있는 속성입니다. 쓰기 가능 또는 쓰기 불가능. 데이터 설명자에는 다음과 같은 선택적 키 값이 있습니다.

value: 이 속성에 해당하는 값입니다. 유효한 JavaScript 값(숫자 값, 개체, 함수 등)이 될 수 있습니다. 기본값은 정의되지 않습니다.

configurable: 속성의 configurable이 true인 경우에만 속성 설명자가 변경될 수 있으며 해당 개체에서 속성이 삭제될 수도 있습니다. 기본값은 거짓입니다.

enumerable: 속성의 열거 가능이 true인 경우에만 속성이 객체의 열거 속성에 나타날 수 있습니다. 기본값은 거짓입니다.

2.2.1. 속성 설명자 가져오기 Object.getOwnPropertyDescriptor()

var obj = { name: 'jam', age: 8 } Object.defineProperty(obj, 'address', { value: '河北', // configurable 该属性不可删除，更不可再次使用defineProperty修改属性描述符 configurable: false, }) delete obj.address // 想使用delete删除该属性 obj.address = '广州' // 想修改obj中的属性address值为广州 console.log(obj.address) // 输出结果：河北

로그인 후 복사

obj: 찾을 대상 개체 prop: 대상 개체의 속성 이름(문자열 형식). 반환 값: 지정된 속성이 개체에 존재하는 경우 해당 속성 설명자 개체를 반환하고, 그렇지 않으면 정의되지 않음을 반환합니다. 참고: 이 메서드의 첫 번째 매개 변수가 개체가 아닌 경우 오류(TypeError)가 보고됩니다.

2.1.2 속성 설명자 설정 Object.defineProperty

Object.defineProperty() 메서드는 객체에 대한 새 속성을 직접 정의하거나 객체의 기존 속성을 수정합니다. 이 객체를 반환합니다.

var obj = { name: 'jam', age: 8}Object.defineProperty(obj, 'sex ', { value: '男', // enumerable 配置该属性是否可以枚举 enumerable: true})for (i in obj) { console.log(i)}

로그인 후 복사

obj: 속성을 정의할 개체입니다. prop: 정의하거나 수정할 속성의 이름입니다. descriptor: 정의하거나 수정할 속성 설명자 반환 값: 함수

var obj = { name: 'jam', age: 8}Object.defineProperty(obj, 'score', { value: 80, // writable: true writable: false})obj.score = 100 console.log(obj.score) // 80

로그인 후 복사

에 전달된 개체 참고: DefineProperty를 통해 추가된 새 속성은 수정하거나 삭제할 수 없습니다.(1) 객체에서 configurable 삭제 가능 여부

Object.defineProperties（obj，props）

로그인 후 복사

로그인 후 복사

속성 설명자 구성 가능 값이 false이고 삭제 및 수정이 불가능하므로 삭제 및 수정이 적용되지 않습니다 ( 2) enumerable을 열거하고 순회할 수 있는지 여부

var obj = { name: 'jam',}Object.defineProperties(obj, { 'age': { value: 28, writable: true, configurable: false, enumerable: true }, 'job': { value: '律师', writable: true, configurable: false, enumerable: true }, 'sex': { value: '男', writable: false, configurable: false, enumerable: true }, 'height': { value: '1.8 m', writable: false, configurable: false, enumerable: true }})console.log(obj) // name: 'jam', age: 28, job: '律师', sex: '男', height: '1.8m' }

로그인 후 복사

로그인 후 복사

enumerable: false일 경우 출력 결과는 이름 age enumerable: true일 경우 출력 결과는 name age sex (3) 쓰기 가능 여부를 제어하는 기능입니다. 속성에 값을 할당할 수 있습니다(값 쓰기)

var obj = { name: 'jam', age: 8, _address: '河北' } // 存取描述符的使用场景 // 1.隐藏某一个私有属性被希望直接被外界使用和赋值 // 2.如果我们希望解惑某一个属性它访问和设置值的过程时，也会使用存储属性描述符 Object.defineProperty(obj, 'address', { enumerable: true, configurable: true, get: function () { foo() return this._address }, set: function (value) { bar() this._address = value } }) function foo () { console.log("截获了一次address的值") } function bar () { console.log("设置了一次address的值") }

로그인 후 복사

로그인 후 복사

writeable 값이 false이므로 점수를 100으로 수정하면 수정이 실패하고 최종 출력은 80이 됩니다

2.1.3、同时设置多个属性描述符 Object.defineProperties

是不是感觉每次只能设置一个属性的属性描述符很繁琐，Object.defineProperties可以帮你解决问题。
Object.defineProperties（）方法为对象定义一个或多个新属性或修改现有属性，并返回该对象。

Object.defineProperties（obj，props）

• obj：要在其上定义属性的对象。
• props：要定义其可枚举属性或修改的属性描述符的对象。
• 返回值：被传递给函数的对象。

示例代码如下：

var obj = { name: 'jam',}Object.defineProperties(obj, { 'age': { value: 28, writable: true, configurable: false, enumerable: true }, 'job': { value: '律师', writable: true, configurable: false, enumerable: true }, 'sex': { value: '男', writable: false, configurable: false, enumerable: true }, 'height': { value: '1.8 m', writable: false, configurable: false, enumerable: true }})console.log(obj) // name: 'jam', age: 28, job: '律师', sex: '男', height: '1.8m' }

2.2存取描述符

存取描述符是由getter-setter函数对描述的属性。存取描述符具有以下可选键值:

• get：给属性提供getter的方法，如果没有getter则为undefined。当访问该属性时，该方法会被执行，方法执行时没有参数传入，但是会传入this对象。
• set：给属性提供setter的方法，如果没有setter则为undefined。当属性值修改时，触发执行该方法。该方法将接受唯一参数，即该属性新的参数值。
• configurable：当且仅当该属性的configurable为true时，该属性描述符才能够被改变，同时该属性也能从对应的对象上被删除。默认为false。
• enurnerable：当且仅当该属性的enurnerable为true时，该属性才能够出现在对象的枚举属性中。默认为false。

configurable 和 enurnerable 的使用与数据描述符中的一致，这里就不过多讲解了。
主要讲一下get 和 set 方法的使用

2.2.1 get()与set()的使用

var obj = { name: 'jam', age: 8, _address: '河北' } // 存取描述符的使用场景 // 1.隐藏某一个私有属性被希望直接被外界使用和赋值 // 2.如果我们希望解惑某一个属性它访问和设置值的过程时，也会使用存储属性描述符 Object.defineProperty(obj, 'address', { enumerable: true, configurable: true, get: function () { foo() return this._address }, set: function (value) { bar() this._address = value } }) function foo () { console.log("截获了一次address的值") } function bar () { console.log("设置了一次address的值") }

上述示例代码控制台打印结果如下：

【相关推荐：javascript视频教程、web前端】

위 내용은 속성 설명자의 JavaScript 객체 지향 상세 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!