js 原型模型重写1

 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         function Person(){
10 
11         }
12 
13         /**
14          * 使用如下犯法来编写代码，当属性和方法特别多的时候，编写起来不是很方便，
15          * 可以通过json的格式
16 
17         Person.prototype.name = "Leon";
18         Person.prototype.age = 23;
19         Person.prototype.say = function(){
20             console.info(this.name + "  " +    this.age);
21         }
22          */
23         /**
24          * 以下方式将会重写原型
25          *     由于原型重写，而且没有通过Person.propotype来指定，
26          *   此时的constructor不会指向Person而是指向Object，
27          *   如果constructor真的比较重要，可以在json中说明原型的指向constructor : Person ,
28          */
29         Person.prototype = {
30           //  constructor : Person ,//手动指定constructor
31             name : "Leon",
32             age : 23,
33             say : function(){
34                 console.info(this.name + "  ,  " + this.age);
35             }
36         }
37 
38         var p1 = new Person();
39         p1.say();  //Leon  ,  23
40         console.info(p1.constructor == Person); //false   如果取消注释掉的constructor : Person , 此时结果为true
41         console.info(p1.constructor); // Object()   如果取消注释掉的constructor : Person , 此时结果为Person()
42 
43 
44 
45 
46     </script>
47 
48 </head>
49 <body>
50 
51 </body>
52 </html>

 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         function Person(){
10 
11         }
12 
13         var p1 = new Person();
14 
15         Person.prototype.sayHi = function(){
16             console.info(this.name + " : hi ");
17             for(var o in Person.prototype){
18                 console.info(o);
19             }
20         }
21         p1.sayHi();  //undefined : hi   sayHi
22 
23 
24         /**
25          * 如果把重写放置在new Person（）之后，注意内存模型
26          */
27         Person.prototype = {
28             //  constructor : Person ,//手动指定constructor
29             name : "Leon",
30             age : 23,
31             say : function(){
32                 console.info(this.name + "  ,  " + this.age);
33             }
34         }
35         p1.sayHi();////undefined : hi     name   age   say
36 
37 
38         var p2 = new Person();
39         p1.say();  //TypeError: p1.say is not a function
40         p2.say(); //Leon  ,  23
41         p2.sayHi();   //TypeError: p2.sayHi is not a function
42 
43 
44 
45 
46     </script>
47 
48 </head>
49 <body>
50 
51 </body>
52 </html>

但又存在另外一种问题：

 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          * 基于原型的创建虽然可以有效的完成封装，但是依然有一些问题
11          * 1 无法通过构造函数来设置属性值
12          * 2 当属性中的引用类型变量是可能存在变量值重复
13          */
14         function Person(){
15 
16         }
17         Person.prototype = {
18             constructor : Person,
19             name : "Leon" ,
20             age : 30 ,
21             friends : ["Ada","Chris"],
22             say : function(){
23                 console.info(this.name + "[" + this.friends + "]");
24             }
25         }
26 
27         var p1 = new Person();
28         p1.name = "Jhon";
29         p1.say();  //Jhon[Ada,Chris]
30 
31         console.info(p1.__proto__);
32         /**
33          * 输出结果：
34          *  age         30
35          *  friends         ["Ada", "Chris", "Mike"]
36          *  name         "Leon"
37          *  constructor         Person()
38          *  say         function()
39          */
40 
41         var p2 = new Person();
42         p2.say();  //Leon[Ada,Chris]
43 
44         //会在原型中找friends，所有Mike是在原型中增加的
45         p1.friends.push("Mike"); //为p1增加了一个朋友
46         //此时原型汇总就多了一个mike，这就是原型带来的第二个问题
47         p1.say(); //Jhon[Ada,Chris,Mike]
48         p2.say(); //Leon[Ada,Chris,Mike]
49         console.info(p1.__proto__);
50         console.info(p2.__proto__);
51         /**
52          * 输出结果：
53          *  age         30
54          *  friends         ["Ada", "Chris", "Mike"]
55          *  name         "Leon"
56          *  constructor         Person()
57          *  say         function()
58          */
59 
60     </script>
61 
62 </head>
63 <body>
64 
65 </body>
66 </html>