Js 判断属性和方法

判断浏览器是否支持js属性或方法

if(typeof addEventListener === 'undefined'){
    console.log('不支持')
}else{
    console.log('支持')
}

判断浏览器是否支持html标签属性

html属性 in DOM对象 ：判断是否支持这个属性，支持返回true，不支持返回false。比如判断input标签是否兼容placeholder属性：

if('placeholder' in document.createElement('input')){
        console.log('浏览器支持placeholder这个标签属性')
}

判断对象是否具有属性

1、Reflect.has()方法用于检查一个对象是否拥有某个属性中

console.log(Reflect.has({x: 0}, "x")); // true
console.log(Reflect.has({x: 0}, "y")); // false

如果该属性存在于原型链中，也会返回true  

console.log(Reflect.has({x: 0}, "toString")); //true

2、in 运算符用于检查对象是否包含某个属性，如果包含就返回true，否则返回 false。它的作用和Reflect.has()方法相同。

const obj = {p: 1};
console.log('p' in obj); // true
console.log('toString' in obj); // true 如果是判断方法，去除括号，只写方法名即可

//CSS3属性是否支持,支持返回true,不支持返回false,不支持ie6
//如果坚持background-color， 要用backgroundColor替换 background-color
console.log('transform' in document.body.style);//true 

in操作符和Reflect.has()方法有一个共同的问题，那就是如果属性来自对象的原型，它会返回true。

3、Object.prototype.hasOwnPerporty()方法，判断是否为对象自身的属性

const obj = {p: 1};
console.log(obj.hasOwnProperty('p'));//true
console.log(obj.hasOwnProperty('toString')); // false

hasOwnProperty()方法返回一个布尔值，指示对象是否具有指定具有指定的属性（而不是继承它）。它可以正确地区分对象本身的属性和其原型的属性。

但是这种判断方法也有问题，那就是如果对象是使用Object.create(null)方式创建的，那么就不能使用hasOwnProperty()方法进行判断了。

var obj2 = Object.create(null);
obj2.p = 1;
console.log(obj2.hasOwnProperty('p')); //js属性.html:34 Uncaught TypeError: obj2.hasOwnProperty is not a function

还有就是如果将hasOwnProperty()作为对象的一个属性，这样也无法使用hasOwnProperty()方法判断属性是否来自原型链了。如下：

var obj3 = {
    p: 1,
    hasOwnProperty: function () {
        return false;
    }
};
console.log(obj3.hasOwnProperty('p')); // false

 造成这种问题的原因是由于javascript没有将hasOwnProperty作为一个敏感词，所以这样就可以为对象声明一个hasOwnProperty的属性，从而导致上述问题。

4、Object.prototype.hasOwnProperty.call()方法

const obj = {p: 1};
console.log(Object.prototype.hasOwnProperty.call(obj, 'p')); // true
console.log(({}).hasOwnProperty.call(obj, 'p')); // true

5. Object.hasOwn()方法

Object.hasOwn()方法是ES2022新提出的，用于替代Object.prototype.hasOwnProperty()的方法。根据MDN文档中的介绍：如果指定的对象具有作为其自身属性的指定属性，则hasOwn()方法返回true;如果该属性是继承的或不存在，则该方法返回false。

const object1 = {prop: 'exists'};
console.log(Object.hasOwn(object1, 'prop')); // true
console.log(Object.hasOwn(object1, 'toString'));// false

const example = {};
console.log(Object.hasOwn(example, 'prop'));   // false - 'prop' has not been defined

example.prop = 'exists';
console.log(Object.hasOwn(example, 'prop'));   // true - 'prop' has been defined

example.prop = null;
console.log(Object.hasOwn(example, 'prop'));   // true - own property exists with value of null

example.prop = undefined;
console.log(Object.hasOwn(example, 'prop'));  // true - own property exists with value of undefined

Object.hasOwn()与Object.hasOwnPeoperty()的区别：因为实例的hasOwnProperty方法是从Object的原型上拿到的，如果使用Object.create(null)的方式创建一个对象那么就拿不到hasOwnProperty这个方法，而hasOwn作为Object的静态方法是可以直接通过Object来进行调用。

const obj11 = Object.create(null);
obj11.name = '111';
console.log(obj11.hasOwnProperty('name')); // 报错

const obj22 = Object.create(null);
obj22.name = '222';
console.log(Object.hasOwn(obj22, 'name')); // true

const obj33 = {
    p: 1,
    hasOwnProperty: function () {
        return false
    }
}
console.log(Object.hasOwn(obj33, 'p')); // true

它是ES2022提出的，所以还得注意它的兼容性。判断是否兼容hasOwn  console.log('hasOwn' in Object) 

6、使用!==检测

var o={x:1}
console.log(o.x !== undefined);  //返回true
console.log(o.y !== undefined); //返回false
console.log(o.toString !== undefined); //返回true，因为对象o继承了原型的toString属性

注意：对象的属性值不能设置为undefined。