[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 jes
ac57
sica=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: