Article archived at: https://www.yuque.com/u27599042/front-end
Object.defineProperty()
- This method is used to define a new attribute on an object, or modify an existing attribute on an object, and return the modified original object.
Object.defineProperty(obj, prop, descriptor)
- This method requires passing three parameters:
- obj: Object that needs to define new properties or modify properties
- prop: a string or Symbol, indicating the key to define a new attribute or modify the attribute
- descriptor: A descriptor for a defined new attribute or modified attribute, describing whether the specified attribute can be modified, deleted, etc.
- This method returns the object passed in. The specified properties of the object have been added or modified.
Describes the value of the specified attribute
<script>
let person = {
name: 'zs',
sex: 'male'
}
// 向 person 对象中新添加一个 age 属性
// 同时指定新添加的属性值为 18
Object.defineProperty(person, 'age', {
value: 18
})
console.log(person)
</script>
Describes whether the specified property is enumerable
- Properties added using Object.defineProperty() are not enumerable by default, that is, properties added using Object.defineProperty() cannot be traversed by default.
<script>
let person = {
name: 'zs',
sex: 'male'
}
// 向person对象中新添加一个age属性
Object.defineProperty(person, 'age', {
value: 18
})
console.log(person)
console.log(Object.keys(person))
for (let key in person) {
console.log(key, person[key])
}
</script>
- When using Object.defineProperty() to add properties, you can set the enumerable value to true in the configuration object, then the properties added using Object.defineProperty() can be enumerated.
<script>
let person = {
name: 'zs',
sex: 'male'
}
// 向person对象中新添加一个age属性
Object.defineProperty(person, 'age', {
value: 18,
// enumerable 控制属性是否可以枚举，
// 默认值为 false
enumerable: true
})
console.log(person)
console.log(Object.keys(person))
for (let key in person) {
console.log(key, person[key])
}
</script>
Describes whether the specified attribute can be modified writable
- By default, the value of a property added using Object.defineProperty() cannot be modified.
- To make the property value added by Object.defineProperty() modifiable, when adding the property, the writable value of the configuration object is set to true, and the property value added using Object.defineProperty() can be modified.
<script>
let person = {
name: 'zs',
sex: 'male'
}
Object.defineProperty(person, 'age', {
value: 18,
enumerable: true,
// 控制属性值是否可以被修改，
// 默认值为 false
writable: true
})
</script>
Describes whether the specified attribute can be deleted configurable
- By default, the value of a property added using Object.defineProperty() cannot be deleted.
- To make the property value added by Object.defineProperty() deletable, when adding the property, the value of the configurable of the configuration object is set to true, and the property value added by Object.defineProperty() can be deleted.
<script>
let person = {
name: 'zs',
sex: 'male'
}
Object.defineProperty(person, 'age', {
value: 18,
enumerable: true,
writable: true,
// 控制属性是否可以被删除，
// 默认值为 false
configurable: true
})
</script>
accessor descriptor get
- The value of this descriptor is a function, and the default value is undefined
- When accessing the property specified in Object.defineProperty(), the function corresponding to get will be called without passing parameters, and the this of the function points to the object that calls the property specified in Object.defineProperty(). The return value of the function will be used as the value of this property.
<script>
let person = {
name: 'zs',
sex: 'male'
}
Object.defineProperty(person, 'age', {
// 当读取person的age属性的时候，
// get函数(getter)会被调用，
// 且函数返回值就是属性age的值
// get: function() {
// console.log('读取age属性')
// return number
// }
// 简写
get() {
console.log('读取age属性')
console.log(this)
return 'hello'
}
})
</script>
accessor descriptor set
- The value of this descriptor is a function, and the default value is undefined
- When the property specified in Object.defineProperty() is assigned a value, this function is called with one argument (the value to be assigned to the property) and this is set to the object on which the property specified in Object.defineProperty() was called. .
<script>
let person = {
name: 'zs',
sex: 'male'
}
Object.defineProperty(person, 'age', {
get() {
console.log('读取age属性')
console.log(this);
return 'hello'
},
// 修改person的age属性的时候，
// set函数(setter)会被调用，
// 且会收到修改的具体值
set(value) {
console.log('修改了age的属性值:', value)
console.log(this);
}
})
</script>
important point
- The descriptor of the property specified in Object.defineProperty() cannot have [value or writable] and [get or set] at the same time, otherwise an exception will be thrown
<script>
let person = {
name: 'zs',
sex: 'male'
}
Object.defineProperty(person, 'age', {
value: 12,
get() {
console.log('读取age属性')
console.log(this);
return 'hello'
},
set(value) {
console.log('修改了age的属性值:', value)
console.log(this);
}
})
</script>
Object.defineProperties()
- This method is used to define several new properties on an object, or modify existing properties on several objects, and return the modified original object.
Object.defineProperties(obj, props)
- This method requires passing two parameters:
- obj: Object that needs to define new properties or modify properties
- props: an object, where each key represents the name of the property to be defined or modified, each value is an object describing the property, the description options that can be configured in the object describing the property and the descriptor in the Object.defineProperty() method The parameters are consistent.
- This method returns the object passed in. The specified properties of the object have been added or modified.
- Note that, like Object.defineProperties() and Object.defineProperty(), the descriptor of each defined new property or modified property cannot have any combination of value or writable and get or set keys at the same time, otherwise an exception will be thrown. .
const obj = {
};
Object.defineProperties(obj, {
property1: {
value: true,
writable: true,
},
property2: {
value: "Hello",
writable: false,
},
// 等等……
});