javascript原型继承学习笔记

在谈Js之前,首先需要明确几个概念:

1.某一对象的原型仍是一个对象.

2.js原型继承的实质是复制,但也不是完全复制,而是子对象更改了什么数据,就复制什么数据.具体做法为创建一张成员维护表.如:

function Parent(b)
{
    this.a = "a";
    this.b = b==null ? "b" : b;
};
function Child(b)
{
    Parent.call(this,b);
};
Child.prototype = new Parent();
var c = new Child();
alert(c.b)

 

 

3.当需要查找某个属性时,首先读对象实例自己维护的表.如果没有找到指定的成员，就要遍历整个原型链，直到原型为空的对象（{}），或者到找到该成员为止。

4.每个函数都有一个prototype属性指向其原型对象,默认为{},即空对象.

5.每个对象都有一个constructor属性,默认指向本对象的构造函数(这句话没有讲完,请接看往下看)

6.Objcet对象的prototype属性是空对象{},空对象的constructor属性指向Object函数构造,所以所有对象的总原型都是Object(参见第4条)

7.对于new操作符,比如:

 

function Parent(b)
{
    this.a = "a";
    this.b = b==null ? "b" : b;
};

 

对于:

var p = new Person("c");

其实可以写成这样:

var p = {};
Person.call(p,"c");

 这就很明白了,其实首先是创建了一个空对象,然后将这个对象以this参数传入构造函数Person,于是Person对象就new出来了.

 

好了,下面来说正题.上图:

 

其实这是别人画的一张图,画的很好,我就拿来主义了,呵呵.代码如下:

 

function MyObject() 
{ 
    this.constructor = arguments.callee; //正确维护constructor，以便回溯外部原型链 
} 
MyObject.prototype = new Object(); //人为构建外部原型链 
function MyObjectEx() 
{ 
    this.constructor = arguments.callee; //正确维护constructor，以便回溯外部原型链 
} 
MyObjectEx.prototype = new MyObject(); //人为构建外部原型链 
obj1 = new MyObjectEx(); 
obj2 = new MyObjectEx(); 
alert(obj1.constructor === MyObjectEx); //true 
alert(MyObjectEx.prototype instanceof MyObject); //true 
alert(MyObjectEx.prototype.constructor === MyObject); //true 
alert(MyObject.prototype instanceof Object); //true 
alert(MyObject.prototype.constructor === Object); //true 
alert(obj1.constructor.prototype.constructor.prototype.constructor === Object); //true,完成了所有的回溯

 

 学习JS的原型继承,最重要的就是搞清楚JS的原型链.

所谓原型链,就是一条记录了JS对象继承过程的链表,而其组成部分就是每个对象的constructor属性与函数的prototype属性.通过对象的constructor属性可以找到本对象的构造构数,通过构造构数prototype属性又可以找到其上一级的对象.就这样一级一级的回溯,直到Object.

还有一条隐藏的原型链,通过.proto属性维护,不过这是系统自行维护的,不需要人为参与,也不可见,虽然firefox浏览可以访问,但还是不推荐.

看似简单,但是陷阱很多,如下:

function Parent(){};
function Child(){};
Child.prototype = new Parent();
var p = new Parent();
var c = new Child();
alert(p.constructor == c.constructor)   //true

 p与c明明一个是基对象,一个是子对象,怎么会p.constructor == c.constructor呢?

当你alert(p.constructor),显示的是Person(),但当你alert(c.constructor)时,打印的还是Person(),这就奇怪了,c的constructor不是Child()吗?

原因就是第三行代码:

Child.prototype = new Parent();

 文章开始时的第5条说过:每个对象都有一个constructor属性,默认指向本对象的构造函数,其实这句话没有说完:每个对象的prototype对象的constructor属性默认也指向本构造函数,但是,当你改变了其prototype所指对象后,情况就有点不同了,如上例,当指向Parent后,原型对象的constructor会指向Person,这是对的,然而,由于原型继承的本质是复制,会把这个属性值复制过来,会改变本对象的constructor属性,让其也指向Person.

 

但是,如果代码这样写,结果就不同了:

function Parent(){};
function Child(){};
var p = new Parent();
var c = new Child();
Child.prototype = new Parent();
alert(p.constructor == c.constructor)   //false

我把它从第三行放到第五行.结果就是false了,原因是我先new对象,再更改原型.其实在对象被new出来之后,就与构造函数无关了,更改构造函数不会影响到已new出来的对象.

但是这样写的很少,因为这不符合面向对象的原则.回到刚才的话题,怎么才能在先设置原型再new对象的情况下让原型链记录正确呢?答案就是重新设置子对象的constructor属性:

function Parent(){};
function Child()
{
    this.constructor = arguments.callee
};
Child.prototype = new Parent();
var p = new Parent();
var c = new Child();

 通过这样的设置,就能达到那张图里所描绘的一条完整的原型链了.

参考的文章:

Javascript对象真经

http://w3er.com/blog/2009/03/master-javascript-object-system/#/2009/03/master-javascript-object-system/

悟透JavaScript

http://www.cnblogs.com/leadzen/archive/2008/02/25/1073404.html

《悟透JavaScript》之 甘露模型（新）

http://www.cnblogs.com/leadzen/archive/2008/06/04/1213090.html