javascript-中-prototype的理解-以及原型链实现继承的原理.docVIP

javascript中prototype的理解以及原型链实现继承的原理

我们经常用prototype的方式实现js对象的继承,以前一直没有去细看过prototype,constructor和对象以及new出来的实例对象的关系现在来梳理一下

对象,prototype,constructor,实例对象之间的关系

?Parent对象?

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

//Parent

function?Parent(){

????this.name=wangzheng;

????this.password=123456;

}

//Parent.prototype?=?object;//这一步其实可以不用写

Parent.prototype.showMe=function(){

????document.write(this.name?+-+this.password);

};

var?parent?=?new?Parent();

?

alert(Parent.prototype);//[object?Object]

alert(Parent.prototype.constructor);//function?Parent(){...}

alert(parent.prototype);//undefined

通过这段代码我们可以得出:?

1.这个Parent对象本身具有一个prototype属性,它指向一个独立的prototype对象,?

2.这个prototype对象又包含一个constractor属性,它反过来指向了Parent对象的定义function.这一点在代码的alert输出中可以看到

3.new出来的parent实例对象她是不具备prototype属性的所以alert输出她的prototype是undefined.

但是还有一个疑问??,parent实例对象里没有prototype属性,却可以使用prototype上的showMe方法,这怎么说呢?

直接看firebug的信息:parent实例对象里面有一个属性__proto__她指向了Parent对象的prototype,这样一看就真相大白

parent实例对象之所以可以调用showMe方法,就是因为这个属性__proto__?通过__proto__实现的调用

当然这个图中你还可以看到?

prototype里包含constructor,

constructor指向Parent,

Parent包含prototype,

prototype包含constructor.

.......互相引用的

画个图就是这样的:

继承中的原型链

下面研究一下继承的情况?参加一个子类

?

1

2

3

4

5

6

7

8

9

10

11

//Son

function?Son(){

????this.name=jiangwen;

????this.password=abcd1234;

????this.sonName=wahaha;

}

Son.prototype?=?parent;

Son.prototype.showMeSon=function(){

????document.write(this.name?+-+this.password+-+this.sonName);

};

var?son?=?new?Son();

可以看到Son的prototype指向一个Parent实例对象?这没有问题

再来看看son实例对象

属性和方法都没有问题?但是son对象里面的__proto__属性指向的是parent实例对象,

但是我觉得应该是指向Son里面的prototype,由于Son里面的prototype指向的是parent实例对象所以fireBug里看起来

才像是指向了指向的是parent实例对象?

那么看图吧:

这样一来对于js用prototype实现继承的原理是不是就更加清晰了!