深入理解JavaScript中创建对象模式的演变(原型)(5)

console.log(person2.name);//zzw<br>        <strong>  delete</strong> person1.name;<br>        <strong>      console.log(person1.name);//zzw</strong><br>

 

 首先,我们把person1实例的name属性设置为"htt" ,当我们直接获取person1的name属性时,会现在person1本身找该属性(理解为就近原则),找不到,继续向原型对象中寻找。

 当给person1对象添加了自身的属性name时,这次得到的时person1自身的属性,即该属性屏蔽了原型中的同名属性。

 通过倒数第三句代码再次得到了zzw,这说明我们对person1设定了与原型对象相同的属性名,但却没有重写原型对象中的同名属性。

 最后,我们可以通过delete删除实例中的属性,而原型中的属性不会被删除。 

  第三种方法:hasOwnProperty()方法

   该方法可以检测一个属性是存在于实例中还是存在于原型中。只有给定属性存在于对象实例中时,才会返回true,否则返回false。举例如下:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

 

        function Person(){}

        Person.prototype.name="zzw";

        Person.prototype.age=21;

        Person.prototype.school="xjtu";

        Person.prototype.sayName=function(){

            console.log(this.name);

        };

        var person1=new Person();

        var person2=new Person();

        console.log(person1.name);//zzw

    <strong>    console.log(person1.hasOwnProperty("name"));//false  因为zzw是搜索于原型对象的</strong>

        person1.name="htt";

        console.log(person1.name);//htt

    <strong>    console.log(person1.hasOwnProperty("name"));//true 在上上一句,我添加了person1实例的属性,它不是属于原型对象的属性</strong>

            delete person1.name;

                console.log(person1.name);//zzw

<strong>                console.log(person1.hasOwnProperty("name"));//false  由于使用delete删除了实例中的name属性,所以为false

</strong>

 

 C.in操作符的使用以及如何编写函数判断属性存在于对象实例中

  in操作符会在通过对象能够访问给定属性时,返回true,无论该属性存在于事例中还是原型中。观察下面的例子:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

 

        function Person(){}

        Person.prototype.name="zzw";

        Person.prototype.age=21;

        Person.prototype.school="xjtu";

        Person.prototype.sayName=function(){

            console.log(this.name);

        };

        var person1=new Person();

        var person2=new Person();

        console.log(person1.name);//zzw

        console.log(person1.hasOwnProperty("name"));//false

        <strong>console.log("name" in person1);//true</strong>

        person1.name="htt";

        console.log(person1.name);//htt

        console.log(person1.hasOwnProperty("name"));//true

        <strong>console.log("name" in person1);//true</strong>

            delete person1.name;

                console.log(person1.name);//zzw

                console.log(person1.hasOwnProperty("name"));//false

              <strong>  console.log("name" in person1);//true

</strong>

 

  可以看到,确实,无论属性在实例对象本身还是在实例对象的原型对象都会返回true。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/2053e2e6b354a6d70a92c87859b7c2a9.html