Object的几个方法（defineProperty,hasOwnProperty...）
1、defineProperty
let obj = {
name:"诸葛钢铁",
age:"18"
}
Object.defineProperty(obj,"idno",{
value:"15089",//简单点就是 设置属性的值
writable:false,//是否可操作属性值,默认值false
configurable:false,//是否可修改配置configurable如果值为false descriptor内的属性都不可操作），默认值false
enumerable:false//是否可枚举，默认值false。Object.keys()获取的是可枚举的，Objec.getOwnPropertyNames()获取的是所有的值。
})
使用Object.defineProperty() 定义对象属性时，如已设置 set 或 get, 就不能设置 writable 和 value 中的任何一个了，不然会报错。
writable
let obj = {
name:"诸葛钢铁",
age:"18"
}
Object.defineProperty(obj,"idno",{
value:"15089",
writable:false,//不能修改
configurable:false,
enumerable:false
})
try{
obj.idno = "111"
}catch{ }
console.log(obj) //{name:"诸葛钢铁",age:"18",idno:"15089"}
configurable
let obj = {
name:"诸葛钢铁",
age:"18"
}
Object.defineProperty(obj,"idno",{
value:"15089",
writable:false,
configurable:false,//控制descriptor内属性都不可改变
enumerable:false
})
try{
Object.defineProperty(obj,"idno",{
writable:true
})
}catch{ }
console.log(Object.getOwnPropertyDescriptor(obj,'idno'))
//{configurable: false,enumerable: false,value: "15089",writable: false}
enumerable
let obj = {
name:"诸葛钢铁",
age:"18"
}
Object.defineProperty(obj,"idno",{
value:"15089",
writable:false,
configurable:false,//控制descriptor内属性都不可改变
enumerable:false//是否可枚举
})
console.log(Object.keys(obj))
//{name:"诸葛钢铁",age:"18"}
其实defineProperty和set,get就是vue3.0前双向绑定原理的实现
//html
//js
let obj = {}
/**
*obj 要劫持的对象
*name 要劫持对象的属性
*callback 劫持以后的操作
*/
function watch(obj, name, callback) {
let value = obj.name
Object.defineProperty(obj, name, {
set(msg) {
// 触发setter给obj赋值
value = msg
//执行劫持后的操作
callback(value)
},
get() {
//返回获取属性值
return value
}
})
}
function doSomething(value) {
document.querySelector('div').innerHTML = value
document.querySelector('input').value = value
}
//监听input变化
document.querySelector('input').addEventListener('input', (e) => {
obj['msg'] = e.target.value
})
watch(obj, 'msg', doSomething)
2、hasOwnProperty
Object的hasOwnProperty()方法返回一个布尔值，判断对象是否包含特定的自身（非继承）属性。
var obj = {
aa:"111"
}
console.log(obj.hasOwnProperty("aa"))//true
console.log(obj.hasOwnProperty("toString"))//false
3、defineProperties
同defineProperty
var obj = {};
Object.defineProperties(obj, {
'property1': {
value: true,
writable: true
},
'property2': {
value: 'Hello',
writable: false
}
});
4、getPrototypeOf和isPrototypeOf
getPrototypeOf此方法可以获取指定对象的原型对象
isPrototypeOf方法用于测试一个对象是否存在于另一个对象的原型链上。
function Person(){
this.name="123";
this.nofg="11";
}
Person.prototype={
age:3,
address:"sdag"
}
let person=new Person();
console.log(Object.getPrototypeOf(person).age);//3
console.log(Person.prototype.isPrototypeOf(person));//true
5、getOwnPropertyNames
列出一个由指定对象的所有自身属性的属性名（包括不可枚举属性但不包括Symbol值作为名称的属性）组成的数组。
区别于Object.keys()。
var aa = {
name:"123",
age:17
}
Object.defineProperty(aa,"idno",{
value:"1234"//不可枚举的
})
console.log(Object.getOwnPropertyNames(aa))//["name", "age", "idno"]
6、getOwnPropertyDescriptor和getOwnPropertyDescriptors
getOwnPropertyDescriptors方法用来获取一个对象的所有自身属性的描述符。
getOwnPropertyDescriptor方法用来获取一个对象的指定属性的描述符。
var aa = {
name:"123",
nofg:11
}
console.log(Object.getOwnPropertyDescriptor(aa,"name"));
console.log(Object.getOwnPropertyDescriptors(aa));
image.png
发表评论 (审核通过后显示评论)：