Object.hasOwn is not a function

背景

开发一个H5页面，使用Object.hasOwn来测试属性是否存在，在error监控中，发现某些用户访问会出现如下报错：

问题分析

因为不是所有的用户都报错，继而先去mdn上查看这个api的浏览器兼容性：

Object.hasOwn() - JavaScript | MDN

从【Can I Use】上也查看了此web技术的兼容性：

且其是es2022新特性，继而综合上述得出结论：

Object.hasOwn低版本浏览器不兼容

解决方案

Object.prototype.hasOwnProperty.call(obj, propName)

 至此，遇到的问题已完美解决了～👏👏

学习

从学习的角度跟着小编再来审视下【Object.hasOwn】这个web技术

定义

如果指定的对象自身有指定的属性，则静态方法 Object.hasOwn() 返回 true。如果属性是继承的或者不存在，该方法返回 false。

产生目标

Object.hasOwn() 旨在取代 Object.prototype.hasOwnProperty()，这样可以用更简单的方法来检查对象具有特定的属性

在此之前，用什么web技术来检查对象具有特定的属性呢？

同类

in

作用之一：检查对象是否具有给定名称的属性

缺点：in会判断继承过来的属性

Reflect.has()

是在ES2015新增的一个内置对象，提供了与Javascript对象交互的方法。

判断一个对象是否存在某个属性，和 in 运算符] 的功能完全相同

hasOwnProperty

hasOwnProperty这个方法可以用来检测一个对象是否含有特定的自身属性，即是用来判断一个属性是定义在对象本身而不是继承自原型链的，通过对象字面量或者构造函数法创建的对象都从Object.prototype继承了hasOwnProperty()。

缺点：

• 不支持create
• 覆盖报错

Object.prototype.hasOwnProperty()

Object.prototype.hasOwnProperty.call(obj, propName);，接受两个参数。请注意我们这里用到了call。改变this的指向。

Object.prototype.hasOwnProperty除了支持hasOwnProperty的相同用法，同时还解决了hasOwnProperty的两个缺点。

ES13（ES2022）Object.hasOwn()

Object.hasOwn()，旨在替代Object.prototype.hasOwnProperty.call()

只不过其的使用存在低版本浏览器兼容问题，如果想要使用Object.hasOwn()，需要做polyfill，不然就使用Object.prototype.hasOwnProperty()来达到想要的检查作用