zoukankan      html  css  js  c++  java
  • 检测或遍历属性在实例中还是在构造函数的prototype属性对象中

    1.hasOwnProperty()方法:可以检测一个属性是否存在于实例中还是原型对象中

     function Person(){};
     Person.prototype.name="Nicholas";
     Person.prototype.age=29;
     Person.prototype.job="Software Engineer";
     Person.prototype.sayName=function(){
         alert(this.name);
     }
    var person1=new Person();
    var Person2=new Person();
    alert(person1.hasOwnProperty("name"));     //false
    person1.name="Grey";
    alert(person1.hasOwnProperty("name"));     //true
    delete person1.name       //删除属性
    alert(person1.hasOwnProperty("name"));     //false

    2.  in操作符

     function Person(){};
     Person.prototype.name="Nicholas";
     Person.prototype.age=29;
     Person.prototype.job="Software Engineer";
     Person.prototype.sayName=function(){
         alert(this.name);
     }
    var person1=new Person();
    var Person2=new Person();  
    alert(person1.hasOwnProperty("name"));     //false
    alert("name" in person1);            //true
    person1.name="Grey";
    alert(person1.hasOwnProperty("name"));     //true
    alert("name" in person1);            //true
    delete person1.name       //删除属性
    alert(person1.hasOwnProperty("name"));     //false
    alert("name" in person1);            //true

    name属性如论是在对象上还是在原型上,调用in操作符 都返回true

    因此,同时使用hasOwnProperty()方法和in操作符,就可以确定该属性到底是存在于实例对象中还是存在原型对象上。

    3.hasPrototypeProperty()

     function Person(){};
     Person.prototype.name="Nicholas";
     Person.prototype.age=29;
     Person.prototype.job="Software Engineer";
     Person.prototype.sayName=function(){
         alert(this.name);
     }
    var person=new Person();
    alert(hasPrototypeProperty(person,"name"));     //true
    person1.name="Grey";
    alert(hasPrototypeProperty(person,"name"));   //false
    

    上例中,name属性先是存在于原型中,因此hasPrototypeProperty()返回true;当在实例中重写name属性,即使在原型中仍然有name属性,hasPrototypeProperty()仍然返回false.

    4. for-in循环:返回所有能够通过对象访问的、可枚举的属性,其中既包括存在于实例中的属性,也包括存在于原型中的属性

      Person.prototype.name="Nicholas";
        Person.prototype.age=29;
        Person.prototype.job="Software Engineer";
        Person.prototype.sayName=function(){
            alert(this.name);
        }
        var person=new Person();
        person.x=1;
        person.y=2;
        person.z=3;
        for(var prop in person){
            console.log(prop+": "+person[prop]);
        }

    5. Object.keys(obj)与Object.getOwnPropertyNames(obj)

    Object.keys(obj)方法接收一个对象作为参数,返回一个包含所有可枚举属性的字符串数组。

    Object.getOwnPropertyNames(obj)方法返回所有的属性无论是否可枚举

     function Person(){}
        Person.prototype.name="Nicholas";
        Person.prototype.age=29;
        Person.prototype.job="Software Engineer";
        Person.prototype.sayName=function(){
            alert(this.name);
        }
        var person=new Person();
        person.x=1;
        person.y=2;
        person.z=3;
        var keys1=Object.keys(person);
        var keys2=Object.keys(Person.prototype);
        var keys3=Object.getOwnPropertyNames(person);
        var keys4=Object.getOwnPropertyNames(Person.prototype);
        console.log(keys1);    //["x","y","z"]
        console.log(keys2);    //["name","age","job","sayName"]
        console.log(keys3);    //["x","y","z"]
        console.log(keys4);    //["constructor","name","age","job","sayName"]
  • 相关阅读:
    vue-cli构建的项目手动添加eslint配置
    给通过canvas生成的二维码添加logo
    webpack打包时候去掉console.log配置
    gist.github.com 被墙无法访问解决办法
    axios.js 在测试机ios7.1的iphone4中不能发送http请求解决方案
    linux 系统的7个运行级别
    今天遇到了不能创建mysql函数
    今天测试大商创,遇到了 upstream sent too big header while reading response header from upstream
    mysql5.7 datetime 默认值为‘0000-00-00 00:00:00'值无法创建问题解决
    IE浏览器中判断IE版本
  • 原文地址:https://www.cnblogs.com/jcbo/p/6757071.html
Copyright © 2011-2022 走看看