JavaScript 中 obj.hasOwnProperty(prop) 方法

ゝ一世哀愁。 2021-09-08 21:08 471阅读 0赞

## [语法][Link 1] ##

obj.hasOwnProperty(prop)

### [参数][Link 2] ###

prop

要检测的属性的 [`String`][String] 字符串形式表示的名称，或者 [`Symbol`][Symbol]。

### [返回值][Link 3] ###

用来判断某个对象是否含有指定的属性的布尔值 [`Boolean`][Boolean]。

## [描述][Link 4] ##

所有继承了 [`Object`][Object] 的对象都会继承到 `hasOwnProperty` 方法。这个方法可以用来检测一个对象是否含有特定的自身属性；和 [`in`][in] 运算符不同，该方法会忽略掉那些从原型链上继承到的属性。

## [备注][Link 5] ##

即使属性的值是 `null` 或 `undefined`，只要属性存在，`hasOwnProperty` 依旧会返回 `true`。

o = new Object();
    o.propOne = null;
    o.hasOwnProperty('propOne'); // 返回 true
    o.propTwo = undefined;
    o.hasOwnProperty('propTwo'); // 返回 true

## [示例][Link 6] ##

### [使用 `hasOwnProperty` 方法判断属性是否存在][hasOwnProperty] ###

下面的例子检测了对象 `o` 是否含有自身属性 `prop`：

o = new Object();
    o.hasOwnProperty('prop'); // 返回 false
    o.prop = 'exists';
    o.hasOwnProperty('prop'); // 返回 true
    delete o.prop;
    o.hasOwnProperty('prop'); // 返回 false

### [自身属性与继承属性][Link 7] ###

下面的例子演示了 `hasOwnProperty` 方法对待自身属性和继承属性的区别：

o = new Object();
    o.prop = 'exists';
    o.hasOwnProperty('prop');             // 返回 true
    o.hasOwnProperty('toString');         // 返回 false
    o.hasOwnProperty('hasOwnProperty');   // 返回 false

### [遍历一个对象的所有自身属性][Link 8] ###

下面的例子演示了如何在遍历一个对象的所有属性时忽略掉继承属性，注意这里 [`for...in`][for...in]  循环只会遍历可枚举属性，所以不应该基于这个循环中没有不可枚举的属性而得出 `hasOwnProperty` 是严格限制于可枚举项目的（如同 [`Object.getOwnPropertyNames()`][Object.getOwnPropertyNames]）。

### [使用 `hasOwnProperty` 作为属性名][hasOwnProperty 1] ###

JavaScript 并没有保护 `hasOwnProperty` 这个属性名，因此，当某个对象可能自有一个占用该属性名的属性时，就需要使用外部的 `hasOwnProperty` 获得正确的结果：

注意，只有在最后一种情况下，才不会新建任何对象。

直接上代码来个示例：

function ObjWithProto(){
        this.foo = 'foo_val'
    }
    ObjWithProto.prototype.bar = 'bar_val'
    var dict = new ObjWithProto()
    dict.foobar = 'foobar_val'
    
    dict.hasOwnProperty('foo') // true
    dict.hasOwnProperty('foobar') // true
    dict.hasOwnProperty('bar') // false

再来看 for…in , 遍历一个对象的可枚举属性

for(let i in dict){
        console.log(i)
    }
    //foo
    // foobar
    // bar        //原型链上的bar也获取到了

**为了遍历一个对象的所有属性时忽略掉继承属性，使用hasOwnProperty()来过滤该对象上的继承属性。**

for(let i in dict){
        if(dict.hasOwnProperty(i)){
           console.log(i)
        }
    }
    //foo
    //foobar

再来看看原型连上的一个继承

function ObjWithProto(){
            this.foo = 'foo_val'
        }
        ObjWithProto.prototype.bar = 'bar_val'
    
        function Person(){
            this.name = 'Person_name'
        }
        Person.prototype = new ObjWithProto()
        var _child = new Person()
    
        for(let i in _child){
            console.log(i)
        }
    
        console.log('------ this is a line -------')
    
        for(let i in _child){
            if(_child.hasOwnProperty(i)){
                console.log(i)
            }
        }
        _child.hasOwnProperty('name') // true
        _child.hasOwnProperty('foo') // false
        _child.hasOwnProperty('bar') // false
    
        //name
        //foo
        //bar
        //------ this is a line -------
        //name

**用for...in循环会获取到原型链上的可枚举属性，不过可以使用hasOwnProperty()方法过滤掉。**

[Link 1]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty#%E8%AF%AD%E6%B3%95
[Link 2]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty#%E5%8F%82%E6%95%B0
[String]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String
[Symbol]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Symbol
[Link 3]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty#%E8%BF%94%E5%9B%9E%E5%80%BC
[Boolean]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Boolean
[Link 4]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty#%E6%8F%8F%E8%BF%B0
[Object]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object
[in]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/in
[Link 5]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty#%E5%A4%87%E6%B3%A8
[Link 6]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty#%E7%A4%BA%E4%BE%8B
[hasOwnProperty]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty#%E4%BD%BF%E7%94%A8_hasownproperty_%E6%96%B9%E6%B3%95%E5%88%A4%E6%96%AD%E5%B1%9E%E6%80%A7%E6%98%AF%E5%90%A6%E5%AD%98%E5%9C%A8
[Link 7]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty#%E8%87%AA%E8%BA%AB%E5%B1%9E%E6%80%A7%E4%B8%8E%E7%BB%A7%E6%89%BF%E5%B1%9E%E6%80%A7
[Link 8]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty#%E9%81%8D%E5%8E%86%E4%B8%80%E4%B8%AA%E5%AF%B9%E8%B1%A1%E7%9A%84%E6%89%80%E6%9C%89%E8%87%AA%E8%BA%AB%E5%B1%9E%E6%80%A7
[for...in]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/for...in
[Object.getOwnPropertyNames]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames
[hasOwnProperty 1]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty#%E4%BD%BF%E7%94%A8_hasownproperty_%E4%BD%9C%E4%B8%BA%E5%B1%9E%E6%80%A7%E5%90%8D