Object.defineProperty(obj, prop, descriptor)
- obj
-
Object,Required,要在其上定义属性的对象。
- prop
-
String|Symbol,Required,要定义或修改的属性的名称。
- descriptor
-
Object,Required,将被定义或修改的属性描述符。
Object.defineProperty(obj, prop, descriptor) 的descriptor 是描述属性
描述属性分为数据描述符和存取描述符
- 数据描述符
-
configurable 是否可以删除元素 是否可以再次修改
-
enumerable 是否可以被Object.keys 找到
-
value 默认值
-
writable 是否可以修改默认值
- 存取描述符
-
get
-
set
注意 get,set 不可和 value writablle同时使用
1.向对象中添加一个属性并设置数据描述符
const obj1 = {};
Object.defineProperty(obj1, "a", {
value: 1, // 默认值
writable: true, // 可以修改值
enumerable: true, // 可以通过Object.keys 被枚举
configurable: true, // 可以删除元素
});
// 如果writable:false 那么obj1.a = 1 不会生效
// 如果enumerable:true 那么 Object.keys(obj1) 是 ["a"]
// 如果configurable:false 那么 delete obj1.a 不会生效
console.log(obj1.a); // {a:1}
2.存储属性的用法
const obj1 = {};
var bValue;
Object.defineProperty(obj1, "b", {
get(){
return bValue
},
set(newValue){
bValue = newValue;
},
enumerable: true,
configurable: true,
});
obj1.b = "2" //走set方法
console.log(obj1.b); // 会走get方法
console.log(bValue);
Object.defineProperties()
静态方法Object.defineProperty(obj, prop, descriptor)只能每次对一个属性设置元数据配置信息,即每次只能对一个属性设置getter和setter,为了能够对多个属性同时设置元数据配置信息,Object还提供了静态方法Object.defineProperties(obj, props)。参数props是包含多个key-value的键值对对象,其中key是就是静态方法Object.defineProperty(obj, prop, descriptor)中的 prop 参数,value就是静态方法Object.defineProperty(obj, prop, descriptor)中的 descriptor 参数。
个人理解:只要定义了Object.defineProperties(obj1, {}) 方法 那么调用方法里面的obj 就会走props里面的get set方法 (复制get 取值set)
const obj1 = {
firstName: "",
lastName: "",
_job: "",
};
Object.defineProperties(obj1, {
fullName: {
get: function () {
return this.firstName + " " + this.lastName;
},
set: function (v) {
const names = v.split(" ");
this.firstName = names[0];
this.lastName = names[1];
},
},
job: {
get: function () {
return this._job.toString().toUpperCase();
},
set: function (v) {
this._job = v;
},
},
});
obj1.fullName = 'Jackie Chan';
console.log(obj1.fullName); // 输出: 'Jackie Chan'
console.log(obj1.firstName); // 输出: 'Jackie'
console.log(obj1.lastName); // 输出: 'Chan'
obj1.job = 'web developer';
console.log(obj1.job); // 输出: 'WEB DEVELOPER'