JavaScript中hasOwnProperty和in属性操作

古城微笑少年丶 2022-02-25 05:10 187阅读 0赞

**1.in操作符：**

用来检查对象中是否存在某个属性(不区分实例属性和原型属性)

**2.hasOwnProperty方法**

**总结：**  
说明:in关键字用来检查对象中是否存在指定的属性(包含实例属性和原型属性)  
对象的hasOwnProperty方法用来检查对象中是否存在指定的属性(只检查实例属性)

**3.某个属性是否存在且只存在于原型属性中**

解决思路 :  
① 属性存在于对象中  
② 属性不是实例属性

**4.delete**

使用delete操作符则可以完全删除实例属性，从而让我们能巩固重新访问原型中的属性。

function Person() {
      this.name = 'koewas';
    }
        
    // Person.prototype.name = "Nicholas";
    Person.prototype.age = 29;
    Person.prototype.job = "Software Engineer";
    Person.prototype.sayName = function() {
      console.log(this.name);
    };
    
    let person1 = new Person();
    let person2 = new Person();
    
    console.log(person1.hasOwnProperty("name"));    // true
    console.log("name" in person1);    // true
    
    person1.name = "Greg";
    
    console.log(person1.name);    // "Greg"
    console.log(person1.hasOwnProperty("name"));    // true
    console.log("name" in person1);    // true
    
    delete person1.name;
    
    console.log(person1.name);    // undefined
    console.log(person1.hasOwnProperty("name"));    // false
    console.log("name" in person1);    // false

上面这段代码的name为实例属性，不属于原型。但却不是私有属性，能被实例访问。

若想把一个对象的自身属性完全删除，要使用delete操作符。需要注意的是delete不会删除原型链上的属性。

let obj0 = {
        name: 'mazey',
        age: 24
    };
    
    // 删除age属性
    delete obj0.age;
    console.log(obj0.hasOwnProperty('age')); // false
    console.log('age' in obj0); // false
    
    // 试着删除原型链上的属性 toString
    delete obj0.toString
    console.log('toString' in obj0); // true

再看一个实例

function Foo(){}
    
    Foo.prototype.z = 3;
    
    var obj = new Foo();
    
    console.info(obj.z)   //3
    
    obj.z = 10;
    
    console.info(obj.z);   //10
    
    delete obj.z;
    
    console.info(obj.z);   //3

可以查看参考资料：[https://www.nowcoder.com/profile/2496345/test/21517591/318672\#summary][https_www.nowcoder.com_profile_2496345_test_21517591_318672_summary]

MDN：  
[https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/in][https_developer.mozilla.org_zh-CN_docs_Web_JavaScript_Reference_Operators_in]  
[https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global\_Objects/Object/hasOwnProperty][https_developer.mozilla.org_zh-CN_docs_Web_JavaScript_Reference_Global_Objects_Object_hasOwnProperty]

参考文章：  
[https://www.jianshu.com/p/2e30dcb0ef77][https_www.jianshu.com_p_2e30dcb0ef77]  
[https://www.cnblogs.com/weiqinl/p/8683207.html][https_www.cnblogs.com_weiqinl_p_8683207.html]  
[https://blog.csdn.net/JimmyLuo17/article/details/75252384][https_blog.csdn.net_JimmyLuo17_article_details_75252384]  
[https://www.jianshu.com/p/c63de804f2bd][https_www.jianshu.com_p_c63de804f2bd]  
[https://blog.51cto.com/mazey/2048538][https_blog.51cto.com_mazey_2048538]

[https_www.nowcoder.com_profile_2496345_test_21517591_318672_summary]: https://www.nowcoder.com/profile/2496345/test/21517591/318672#summary
[https_developer.mozilla.org_zh-CN_docs_Web_JavaScript_Reference_Operators_in]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/in
[https_developer.mozilla.org_zh-CN_docs_Web_JavaScript_Reference_Global_Objects_Object_hasOwnProperty]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty
[https_www.jianshu.com_p_2e30dcb0ef77]: https://www.jianshu.com/p/2e30dcb0ef77
[https_www.cnblogs.com_weiqinl_p_8683207.html]: https://www.cnblogs.com/weiqinl/p/8683207.html
[https_blog.csdn.net_JimmyLuo17_article_details_75252384]: https://blog.csdn.net/JimmyLuo17/article/details/75252384
[https_www.jianshu.com_p_c63de804f2bd]: https://www.jianshu.com/p/c63de804f2bd
[https_blog.51cto.com_mazey_2048538]: https://blog.51cto.com/mazey/2048538