为什么不能在instanceof HTMLInputElement上使用“ hasOwnProperty”?

时间:2019-11-04 15:47:20

标签: javascript hasownproperty

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

我知道我可以做到:

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

但是我的问题是:为什么hasOwnProperty返回false?

我只想使用:

input.hasOwnProperty("checked")

但每次都会返回false。

不是input对象吗?
我不这么认为,但是typeof表示是这样:

typeof input // returns "object" 

那是怎么回事?!

代码示例:

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" />

The documentation about HTMLInputElement,只有类型复选框具有属性checked

1 个答案:

答案 0 :(得分:5)

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

在这种情况下,checkedHTMLInputElement.prototype上的getter不是

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);