为什么不能在HTMLInputElement的instance上使用“ hasOwnProperty”？

Question

嗨，我想检查输入元素是复选框还是文本类型。

我知道我可以这样做：

//Type of input..
if ( input.type === "checkbox" ) 
//Contains the property..
if ( "checked" in input ) 

但是我的问题是为什么我不能使用“ hasOwnProperty”。这不是一个对象吗？

我不这么认为，但是“ typeof”表示它是一个对象。

typeof输入->“对象”。那么怎么回事！？

我只想使用input.hasOwnProperty（“ checked”）

任何专业解释？非常感谢！

Code HTML：

  <input type="checkbox" />

Code JS：

  const input = document.querySelector("input")

  if ( input instanceof HTMLInputElement ) {
        console.log(input.hasOwnProperty("checked")); // false
  }

JS小提琴演示：

const input = document.querySelector("input")
 if ( input instanceof HTMLInputElement ) {
    console.dir(input);
    console.info(typeof input);
    console.log("with 'hasOwnProperty'",input.hasOwnProperty("checked"));
    console.log("with 'in'","checked" in input);
    console.log("with 'type'",input.type === "checkbox");
}

<input type="checkbox" />

关于HTMLInputElement的文档，只有类型复选框具有“已选中”属性：

https://developer.mozilla.org/es/docs/Web/API/HTMLInputElement

Answer 1

"checked" in input返回true，因为in评估所有可枚举的属性。相反，.hasOwnProperty()仅在属性是对象本身的成员时才返回true。如果它是继承的或对象false的成员，则返回prototype。

在这种情况下，checked是getter上的HTMLInputElement.prototype，不是

input的成员。

const checkbox = document.getElementById("c");
const descriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'checked');

console.log("'checked' is property of input:", "checked" in checkbox);
console.log("'checked' is own-property of input:", checkbox.hasOwnProperty("checked"));
console.log("'checked' is member of prototype:", HTMLInputElement.prototype.hasOwnProperty("checked"));
console.log("'checked' is getter:", descriptor.get !== undefined);
<input type="checkbox" id="c">