js 原型的内存分析

使用构造器的弊端:http://www.cnblogs.com/a757956132/p/5258897.html 示例             

  将行为设置为全局的行为,如果将所有的方法都设计为全局函数的时候,       

  这个函数就可以被window调用,此时就破坏了对象了封装性,       

  而且如果某个对象有大量的方法,就会导致整个代码充斥着大量的全局函数 这样将不利于开发

为解决构造的方法是通过原型来解决问题i

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6 
 7     <script type="text/javascript">
 8 
 9         /**
10          * 原型是js中非常特殊的一个对象,当一个函数创建之后,会随之就随之产生一个原型对象
11          * 当通过这个函数的构造函数创建了一个具体的对象之后,在这个具体的对象中就会有一个属性指向原型
12          */
13         //第一种状态
14         /**
15          * function Person(){},Person函数中有一个prototype的属性指向Person的原型对象,在原型
16          * 对象中有一个construction的属性指向了Person函数,所以可以通过new Person()创建对象
17          */
18         function Person(){
19 
20         }
21         //
22         //第二种状态
23         /**
24          * 通过Person.protype.name为原型设置值之后,这些属性和方法都是设置在Person的原型中的
25          */
26         Person.prototype.name = "Leon";
27         Person.prototype.age = 23;
28         Person.prototype.say = function(){
29             console.info(this.name + "  " + this.age);
30         }
31 
32         //第三种状态,创建了一个对象之后会有一个_prop_的属性指向原型
33         //在使用时如果在对象内部没有找打属性会去原型中找,_prop_属性是隐藏的
34         /**
35          *  当使用Person创建了对象之后,会在对象中有一个_porp-属性(这个属性是不能被访问的)指向了原型,
36          *  当使用对象调用原型的时候,首先会在对象的内部找是否有这个属性,如果没有会通过_prop_去原型中找属性,
37          *  所以当调用p1.say(),在自己的空间中不存在这个方法,就会去原型中寻找,找打之后完成say的调用。
38          */
39         var p1 = new Person();
40         p1.say();  //Leon  23
41 
42         //以下方法可以检测p1是否有_prop_指向Person的原型
43         console.info(Person.prototype.isPrototypeOf(p1)); //true
44 
45         //第四种状态
46         /**当创建了一个新的p2之后,依然会有一个_porp_属性指向Person的原型,此时如果通过p2.name
47         *  设置了属性之后,会在对象自己的内存空间中存储name的值,当调用say方法的时候在寻找name时,
48         *  如果在自己的内存中找到之后,就不会去原型中查找了(特别注意:原型中的值不会被替换,仅仅只是在查找时被覆盖)
49          *  查找时会先在自己的空间内存中查找,如果查找不到才会到原型中查找
50         */
51         var p2 = new Person();
52         //是在自己的空间中定义了一个属性,不会替换原型中的属性
53         p2.name = "Ada";
54         p2.say(); //Ada  23
55 
56 
57         //检测某个对象是否是某个函数的原型
58         console.info(Person.prototype.isPrototypeOf(p2));// true
59 
60         //检测某个对象的constructor指向
61         console.info(p1.constructor == Person);// true
62 
63         //检测某个属性是否是自己的属性
64         console.info(p1.hasOwnProperty("name"));  //false  p1自己的空间中没有值
65         console.info(p2.hasOwnProperty("name"));  //true   p2在自己空间中设置了name
66 
67         //可以通过delete删除自己空间中的属性
68         delete p2.name;
69         p2.say();  //Leon  23
70         console.info(p2.hasOwnProperty("name"));//false  由于已经删除,就为false
71 
72         //检测某个对象在原型或者自己中是否包含某个属性,通过int检测
73         console.info("name" in p1);  //true
74         console.info("name" in p2);  //true
75         console.info("address" in p1);  //false 在原型和自己的空间中都没有
76 
77 
78         console.info(hasPrototypeProperty(p1,"name"));
79         console.info(hasPrototypeProperty(p2,"name"));
80         /**
81          * 可以通过如下方法检测摸个属性是否在原型中存在
82          */
83         function hasPrototypeProperty(obj,prop){
84             return (!obj.hasOwnProperty(prop) && (prop in obj))
85         }
86 
87 
88     </script>
89 
90 </head>
91 <body>
92 
93 </body>
94 </html>

原文地址:https://www.cnblogs.com/a757956132/p/5260946.html