深入浅析javascript继承体系

最近做web项目，接触了jquery等框架，虽然使用方便，但是还是想学习下javascript，今天分享下最近对js原型继承的理解，不足之处欢迎指正。

一、构造器的原型属性与原型对象

　　刚接触js时通常依样画瓢，用函数new一个实例，也不知道其原因，只听说js中函数即对象。原来js中没有采用java等语言中的类继承体系，而是使用原型对象（prototype）实现继承体系，具体说是利用“构造器”实现类的功能。

首先解释下原型继承中的两个重要概念：原型属性、原型对象(实例)。

就js对象系统而言，创建的每个函数(构造器)都有一个prototype原型属性，同时，通过构造器创建的每个对象实例也包含一个_proto_属性，prototype和_proto_属性是一个指针，指向原型对象。普通函数与构造函数的唯一区别就是，其原型属性prototype是不是一个有意义的值。

原型属性prototype所指向的原型是一个对象实例（object instance）。具体如下图所示，若构造器animal()有一个原型对象b，则由该构造器创建的实例都必然复制于b。即：animal()的实例a1的_proto_属性也会指向原型对象b。因此，实例a1能够继承b的所有属性、方法和其他性质。

图1 js对象实例化实现

二、空的对象

在javascript中，“空的对象”是整个原型继承体系的根基，是所有对象的基础。介绍“空的对象”之前，必须先介绍下“空对象(null)”。

空对象null

　　null不是“空的对象”，作为javascript中的一个保留字，其含义是：

　　（1）属于对象类型

　　（2）对象是空值

作为一个对象类型，可以使用for…in去列举它，但是作为一个空值，null没有任何方法和属性(包括constructor、_proto_等属性)，因此列举不到任何内容。如下例所示：　　

var num=0；
　　for(var propertyname in null)
　　{
　　num++;
　　}

　　alert(num);//显示值为0

最重要的一点是null没有原型，它并不是自object()构造器（或其子类）实例化而来，对其进行instanceof 运算会返回false。

　　2.“空的对象”

　　“空的对象”是指一个标准的、通过object()构造的对象实例。例如：

obj=new object();或 obj={}；

　　“空的对象”具有“对象”的一切特性，因此可以存取tostring()、valueof等预定义的属性和方法。

　　3.“空的对象”与null的关系

　　 如下图2中红线所示路径，当通过”object.prototype._proto_”获取object原型对象的-proto-属性时，将会得到”null”，由于null对象没有任何属性，也就是说”object {}”

　　原型对象就是原型链的终点了。

图2 js类继承体系

三、javascript继承的实现以及原型链维护

（1）继承的实现

　　第一节说过javascript中类继承是通过修改构造函数的原型属性prototype实现的。如下代码所示：

function animal() {
this.name = 'animal';
};
function dog() {
};
　　dog.prototype = new animal();
var d = new dog();
console.log(d.name);//'animal'

　　通过创建一个animal类型的实例并将其赋值给构造函数dog()的prototype属性，从而实现类型继承，即animal是dog的父类。这样dog类型的实例d也能访问animal类型的name属性。

（2）原型链

js对象继承体系中有两种原型链：“内部原型链”和“构造器原型链”。如图3所示，黑色箭头指示路径是通过构造函数的prototype属性保持的“构造器原型链”。红色箭头指示路径是通过对象实例的_proto_属性保持的“内部原型链”。

图3 原型链

（3）原型链维护

图3说明构造器通过显示的prototype构建了一个原型链，而对象实例也通过_ proto _属性构建了一个原型链。由于_ proto _是一个不可访问的内部属性（chrome中可以查看对象_ proto _属性的值，但不可以修改），因此无法从子类（dog）的实例dog1开始访问整个原型链。因此，我们需要从图3中的“内部原型链”和“构造器原型链”中找到一个连接点，使得实例不能访问obj._proto_的情况下通过构造器访问内部原型链（将两种原型链串联起来）。

若要从子类的实例开始访问整个原型链，需要使用实例的constructor属性维护原型链。

其实，javascript已经为构造器维护了原型属性，根据如下测试代码，当我们自定义一个构造器时，其原型对象是一个object()类型的实例，但是其原型对象的constructor属性默认总是指向构造器自身，而非指向其父类object。如图4中构造器实例中蓝色框中的constructor属性，该constructor属性继承自原型对象，因此可以得出一个自定义的构造器产生的实例，其constructor属性默认总是指向该构造器。

function animal() {
};
var a = new animal();
console.log(animal.prototype);//object(){}
console.log(animal.prototype.constructor === animal);//true//true

　　

图4

　　因此，在_proto_属性不可访问时，可通过a1.constructor.prototype获取实例a1的原型对象。然而，当我们自定义一个构造函数dog()，并且手动指定其prototype属性值为animal，即指定dog的父类为animal。此时访问d1.constructor值为animal，而不是dog；由图5可以看出，dog的原型对象和dog分别由animal()和dog()两个不同的构造器产生，然而他们的constructor属性指向了相同的构造器（animal），这样就与使用constructor属性串联两种原型链的设想冲突了。

图5

　　是构造器出问题还是原型出了问题？图5可以看出，原型继承要求的“复制行为”已经正确实现，能够从子类实例中访问原型对象属性，问题是在给子类构造器dog()赋予一个原型对象时应该“修正”该原型对象的构造属性值(constructor)。ecmascript 3标准提供的方法是：保持原型的构造器属性，在子类构造器中初始化其实例对象的构造属性。代码如下：　

function dog () {
　　//初始化constructor属性
　　 this.constructor=dog; //或 this.constructor=arguments.callee;
　　};
　　dog.prototype = new animal();//赋予原型对象，实现继承

图6

对constructor属性“修正”后效果如图6所示，在子类构造器dog中初始化其实例对象的constructor属性后，dog的实例对象的constructor都指向dog，而dog的原型对象的constructor仍然指向父类型构造器animal。这样就可以实现利用constructor属性串联起原型链，可以从子类实例开始回溯整个原型链。

总结

以上所述是小编给大家介绍的javascript继承体系的相关知识，希望对大家有所帮助