原代码及打印结果
function Parent(){
this.a=1
this.b=[1,2,this.a]
this.c={demo:5}
this.show=function(){
console.log(this.a,this.b,this.c.demo)
}
}
function Child(){
this.a=2
this.change=function(){
this.b.push(this.a)
this.a=this.b.length
this.c.demo=this.a++
}
}
Child.prototype=new Parent()
var parent=new Parent()
var child1=new Child()
var child2=new Child()
child1.a=11
child2.a=12
parent.show() // 1 [1,2,1] 5
child1.show() // 11 [1,2,1] 5
child2.show() // 12 [1,2,1] 5
child1.change()
child2.change()
parent.show() // 1 [1,2,1] 5
child1.show() // 5 [1,2,1,11,12] 5
child2.show() // 6 [1,2,1,11,12] 5
附注释
function Parent(){
this.a=1
this.b=[1,2,this.a]
this.c={demo:5}
this.show=function(){
console.log(this.a,this.b,this.c.demo)
}
}
function Child(){
this.a=2
this.change=function(){
this.b.push(this.a)
this.a=this.b.length
this.c.demo=this.a++
}
}
Child.prototype=new Parent()
var parent=new Parent()
var child1=new Child()
var child2=new Child()
child1.a=11
child2.a=12
parent.show() // 1 [1,2,1] 5
child1.show() // 11 [1,2,1] 5
child2.show() // 12 [1,2,1] 5
child1.change()
// child1.prototype.b.push(this.a) >>> child1.prototype.b=[1,2,1,11]
// child1.a=child1.b.length=4
// child1.prototype.c.demo=child1.a++ >>> child1.prototype.c.demo=4 child1.a=5
child2.change()
// child2.prototype.b.push(this.a) >>> child2.prototype.b=[1,2,1,11,12]
// child2.a=child2.b.length=5
// child2.prototype.c.demo=child2.a++ >>> child2.prototype.c.demo=5 child2.a=6
parent.show() // 1 [1,2,1] 5
child1.show() // 5 [1,2,1,11,12] 5
child2.show() // 6 [1,2,1,11,12] 5
- child1和child2身上始终只有a属性和change方法,b和c都在其prototype上
- child1和child2的prototype为同一个Parent实例对象,但这个实例对象和parent不是同一个,所以修改child.prototype.b不会影响parent.b
- 创建Parent实例对象时,this.b=[1,2,this.a] 其中this.a为值类型,再修改this.a不会影响this.b的值