对象属性的监测

专栏目录请点击

简介

• 一般，当我们对于属性属性进行监测的时候常用的关键字和方法有 in，hasownPropery
• 目前还有一个新的方案将要纳入标准，就是Object.hasOwn()，他主要是用来代替Object.prototype.hasOwnProperty()

in

in 可以用来监测对象所有存在的属性，包括继承过来的属性

var _obj = {age:18}

// in
console.log("toString" in _obj); // true 
console.log("name" in _obj); // false
console.log("age" in _obj); // true

• toString就是继承过来的属性

Reflet.has

Reflet.has与in的功能是相同的，能监测出来继承的属性

var _obj = { age: 18 }

console.log(Reflect.has(_obj, "toString")); // true
console.log(Reflect.has(_obj, "name")); // false
console.log(Reflect.has(_obj, "age")); // true

hasOwnProperty

返回对象自身的属性

var _obj = { age: 18 }

console.log(_obj.hasOwnProperty("toString")); // false
console.log(_obj.hasOwnProperty("name")); // false
console.log(_obj.hasOwnProperty("age")); // true

• 比如toString是继承来的属性，那么返回的是false

隐患

空对象

但是这里，他会有一个隐患如下

function Person(){
    this.age = 18
}

Person.prototype.name = "tom"

var person = new Person()
console.log(person.hasOwnProperty("age"));  // true
console.log(person.hasOwnProperty("name")); // false 重点
console.log(person.name); // tom

也就是说，他直接过滤掉了显式原型上面的属性，为了不过滤掉原形上面的属性,我们新建一个原型为空的对象，如下

// 创建一个对象，对象的原型为null
var obj = Object.create(null)

console.log(obj.hasOwnProperty("name")); // obj.hasOwnProperty is not a function 直接报错

因为原型为空，而hasOwnProperty存在于原型上，这里就直接报错了，想要监测，我们需要进行如下处理

console.log(Object.prototype.hasOwnProperty.call(obj,'name')); // false

属性名保护

JS并没有对于hasOwnProperty这个属性进行报货，假设当一个字典中有hasOwnProperty这个属性的时候，他会直接返回这个属性

var obj1 = {
    hasOwnProperty:function(){
        return false
    },
    name:"sunwukong"
}

console.log(obj1.hasOwnProperty('name')); // false
console.log(Object.prototype.hasOwnProperty.call(obj1,'name')); //true

这样我们就会发现，他会直接调用对象中hasOwnProperty方法，直接返回false，这个时候，我们只能调用原形上面的方法才可以

Object.hasOwn

这个是ES2022的内容，用来替代Object.prototype.hasOwnProperty.call

对于上面出现的情况，我们用Object.hasOwn，可以直接轻松解决

console.log(Object.hasOwn(obj1,'name')); // true