[Javascript] Prototype 原型

(1) Concept

原型是为了解决让对象实例都可以共享属性和方法
每个函数都有prototype, 指向一个对象, 对象包含可以共享的属性和方法

<script type="text/javascript">   function People(name,age){          this.name=name;          this.age=age;       }       People.prototype={           say:function(){              return this.name+":"+this.age;           }       }       /* 相同          People.prototype.say=function(){          return this.name+":"+this.age;        }        */       var jessica=new People("jessica",18);       var krystal=new People("krystal",20);       console.log(jessica.say());       console.log(krystal.say());</script>

---

(2) hasOwnProperty(“attr”)

检测实例中是否有属性， 只在实例中返回true

<script type="text/javascript">   function People(username,age){          this.username=username;          this.age=age;   }        People.prototype.username=this.username;   var jessica=new People("jessica",18);   var krystal=new People("krystal",20);   //检测在实例中是否有username这个属性 console.log(krystal.hasOwnProperty("username"));//true</script>

<script type="text/javascript">   function People(username,age){          //实例中没有username这个属性          this.age=age;   }        People.prototype.username=this.username;   var jessica=new People("jessica",18);   var krystal=new People("krystal",20);   //检测在实例中是否有username这个属性 console.log(krystal.hasOwnProperty("username")); //false </script>

(3) “attr”in obj

检测实例中或者原型是否有属性 通过对象访问属性, 才可以返回true

if username在实例中或者在原型中有的话console.log("username" in jessica);//true

---

(4) 优点 缺点

优点：

解决构造函数共享的概念

缺点：

共享也是一个问题, 当prototype中有引用类型值

<script type="text/javascript">   function People(username,age){          this.username=username;          this.age=age;   }       People.prototype={        school: "HKBU",        friend: ["YoonA","Victoria"]//引用类型   }   var jessica=new People("jessica",18);   var krystal=new People("krystal",20);     //本来jessica想不一样push一个值，结果覆盖了krystal的    jessica.friend.push("seoyon");    console.log(jessica.friend);    console.log(krystal.friend);    // 基本类型，不会被覆盖    jessica.school="CambridgeU";    console.log(jessica.school);    console.log(krystal.school);</script>

Result:

这种情况下，jessica想与krystal不一样, 但是结果却是一样的, 因为在Prototype中引用类型的共享问题。 而基本类型则不会被覆盖。

解决缺点：

为了解决引用类型共享的问题。 使用构造函数+Prototype的结合

---

(5) 构造函数+ Prototype 结合

<script type="text/javascript">   function People(username,age){          this.username=username;          this.age=age;          /*不是放到了prototype, 而是放到了实例中*/          this.friend=["YoonA","Victoria"];//引用类型          /*不是放到了prototype, 而是放到了实例中*/   }       People.prototype={        school: "HKBU"           }   var jessica=new People("jessica",18);   var krystal=new People("krystal",20);    jessica.friend.push("seoyon");    console.log(jessica.friend);    console.log(krystal.friend);    jessica.school="CambridgeU";    console.log(jessica.school);    console.log(krystal.school);</script>

Result: