Basic knowledge
There are two main forms of object attribute description: data descriptor and access descriptor.
- A data descriptor is an attribute with a writable or unwritable value.
- Access descriptors are properties described by a pair of getter-setter functions.
- The descriptor must be in one of two forms; it cannot be both at the same time.
Common optional values:
- configurable: false
- enumerable: false
Data description Fu also has the following optional values:
- value: undefined
- variable: false
The access descriptor also has the following optional keys:
- get: undefined provides getter methods for properties
- set: undefined provides setter methods for properties
Add getters and setters when creating objects literally
Control the get and set operations of the properties of the object.
var obj = {
name: 1, // 可set,可get
get type() {
return '对象类型'}, // 可get
set age(x) {
this.age = 22;} // 可set
get age() {
return this.age;} // 可get
}
Use Object.create method
The essence is to extend the prototype property.
var obj = null;
Object.create(Object.prototype, {
name: {
get: function() {
return 1;},
set: function(val) {
this.name = val;},
configurable: true,
}
})
// 得到对象obj = {name: 1}
Question: If the object has been created successfully, and get and set need to be expanded later, how to operate? as follows:
Object.create(obj, {
type: {
get: function(){
return '对象类型'},
configurable: true, // 可加可不加
}
})
// 得到对象 obj = {name: 1, type: '对象类型'}
Use Object.defineProperty method
Object.defineProperty(obj, prop, descriptor): directly define a new property on an object, or modify an existing property, and return this object.
var o = {
a : 1}//声明一个对象,包含一个 a 属性,值为1
Object.defineProperty(o,"b",{
get: function () {
return this.a;
},
set : function (val) {
this.a = val;
},
configurable : true
});
If you want to add getters and setters in batches:
Use Object.defineProperties method
The Object.defineProperties(obj, props) method adds or modifies one or more of its own properties on an object, and returns the object.
var obj = {
a:1,b:"string"};
Object.defineProperties(obj,{
"A":{
get:function(){
return this.a+1;},
set:function(val){
this.a = val;}
},
"B":{
get:function(){
return this.b+2;},
set:function(val){
this.b = val}
}
});
Use Object.prototype. defineGetter and Object.prototype. defineSetter methods
Non-standard methods, try not to use them in a production environment. It has been deleted in the web standard, and some browsers may stop supporting it.
var o = {
a:1};
o.__defineGetter__("giveMeA", function () {
return this.a;
});
o.__defineSetter__("setMeNew", function (val) {
this.a = val;
})