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。