hasOwnProperty() 與 hasOwn() 的差異 

前言

  hasOwn() 是 JavaScript 的新標準拿來替代 hasOwnPerperty() ，最近研究了一下差異，在此做個記錄。

內容

  hasOwnProperty() 與 hasOwn() 都是拿來檢查物件是否有某個屬性，但有些細微的差異，範例如下

let obj1 = {
  prop : 1
}
console.log( obj1.hasOwnProperty('prop') );//true
console.log( Object.hasOwn( obj1 , 'prop' ) );//true
//
let obj2 = {
  prop : 1,
  hasOwnProperty : function(){
    return false;
  }
}

console.log( obj2.hasOwnProperty('prop') );//false
console.log( Object.hasOwn( obj2 , 'prop' ) );//true
//
let obj3 = Object.create(null);
obj3.prop = 1;
//follow has error!
//console.log( obj3.hasOwnProperty('prop') );
console.log( Object.hasOwn( obj3 , 'prop' ) );//true

obj1 的範例是兩者的正常用法，結果無異，但在 obj2 的例子裡，由於 hasOwnProperty() 遭到覆蓋，所以會回傳由覆蓋的 function 的結果，也就是 false ，但是 hasOwn() 就不用擔心這樣的麻煩。obj3 的例子特別了點，透過 Object.create() 來創造純淨的物件，裡面並不含 hasOwnPerperty() ，所以如果直接使用 hasOwnPerperty()  會有錯誤，但如果使用 hasOwn() 就不會有問題。

 

參考資料

[ developer.mozilla.org ] Object.hasOwn()

[ developer.mozilla.org ] Object.prototype.hasOwnProperty()