Javascript玩转继承

最近一直在学Javascript，打算写一些文章，算做自己的学习心得吧，也可以算是学习笔记。没有系统的知识点，太基础的不想写，主要是写一些自己觉得有价值的地方。

　　今天写第一篇。

　　Javascript究竟是一门面向对象的语言，还是一门支持对象的语言，我想每个人都有着自己的看法。那些Javascript忠实的Fans一定讲Javascript是一门面向对象的语言，像《Javascript王者归来》一书中对Javascript的说法是基于原型的面向对象。我谈谈我个人的看法。面向对象的三个特征，继承，多态，封装，Javascript虽然实现起来不像Java,C#等面向对象的语言来得快，但是毕竟也有着一定的支持。因此说Javascript是面向对象的语言是有着一定道理的，但是从继承这个部分来谈，一系列的继承法，但是每个继承法都无法实现真正面向对象语言的威力，因此，说他面向对象有着一定的牵强。综上，我对Javascript的理解，更愿意把它叫做一种简化的面向对象，或者说"伪"面向对象（这个伪字绝无贬义）。

　　今天就从面向对象这个第一个特征：继承来谈。

　　什么是继承？这个我不想废话，有一只动物，有一个人，有一个女孩，这个就是一个最简单，也是典型的继承链。

　　在C#等面向对象中，很容易。

class Animal
{　　　 }
class People:Animal
{　　　 }
class Girl:People
{　　　 }

　　那么在Javascript中，没有类，没有继承的提供实现，我们该怎么做呢？

　　对象伪装（构造继承法）

　　什么是对象伪装呢？我们可能叫做构造继承更容易理解一些。顾名思义，就是用构造函数来玩继承。其实就是说把父类的构造函数当成是一个普通的方法，放到子类的构造函数中去执行，这样的话，当构造对象的时候，子类的对象当然就可以构造父类的方法啦！

     还是用上面的那个例子，代码如下：

function Animal()
{
　　　　　　　 this.Run=function(){alert("I can run");};
}
function People(name)
{
//在这里就是传入了父类的构造方法，然后执行父类的构造方法，这个时候就//可以使用父类中的方法了。
　　　　　　　 this.father=Animal;
　　　　　　　 this.father();
　　　　　　　 //记得要删除，否则在子类添加于父类相同名称的方法时，会修改到父类。
delete this.Father;
this.name=name;
　　　　　　　 this.Say=function(){alert("My name is "+this.name);}
}
function Girl(name,age)
{
　　　　　　　 this.father=People;
　　　　　　　 this.father(name);
　　　　　　　 delete this.father;
　　　　　　　 this.age=age;
　　　　　　　 this.Introduce=function(){alert("My name is "+this.name+".I am "+this.age);};
}

　　这样的话就实现了一个继承链，测试下：

var a=new Animal();
a.Run();
var p=new People("Windking");
p.Run();
p.Say();
var g=new Girl("Xuan",22);
g.Run();
g.Say();
g.Introduce();

　　结果如下：

　　a.

　　b.

 

c.

　　d.

　　e.

　　f.

　　测试成功！

　　我们来总结一下这段代码的关键，指定父类，声明父类对象，然后删除临时变量，您是否觉得有些麻烦呢？至少我是这么觉得的，一旦忘记了delete，还要承担父类被修改的风险，针对这个，我们对这个用call和apply来改进！

　　接着看代码，还是上面的例子（为了更加容易大家理解，需求改变一下，Animal有了名字）：

function Animal(name)
{
　　　　　　　 this.Run=function(){alert("I can Run");};
}
function People(name)
{
　　　　　　　 //使用call方法实现继承
this.father=Animal;
　　　　　　　 this.father.call(this,name);
　　　　　　　 this.name=name;
　　　　　　　 this.SayName=function(){alert("My name is "+this.name;);};
}
function Girl(name,age)
{
　　　　　　　 //使用apply方法来实现继承
　　　　　　　 this.father=People;
　　　　　　　 this.father.apply(this,new Array(name));
　　　　　　　 this.age=age;
　　　　　　　 this.Introduce=function(){alert("My name is "+this.name+".I am "+this.age);};
}

 

　　用一样的测试代码，发现测试一样成功。

　　对象伪装，这只是一种实现继承的方式。

     上面主要介绍了对象伪装来实现继承。我们在这里先来说一下这种方式的优缺点。

　　毋庸置疑，这种方式是比较容易理解的，在子类中调用父类的构造函数。另外，这种方法最大的一个优点就是说构造继承可以实现多继承，复习下这个代码：

function A()
{　　　 }
function B()
{　　　 }
function C()
{
　　　 this.father=A;
　　　 this.father();
　　　 delete this.father;
　　　 this.father=B;
　　　 this.father();
　　　 delete this.father;
}

　　但是这种方式也有着这样和那样的缺点：

　　熟悉面向对象的我们来看这样一段C#代码：

class Program
{
static void Main(string[] args)
{
B b=new B();
bool temp = (typeof(A)).IsInstanceOfType(b);
Console.WriteLine(temp);
}
}
class A
{
public A()
{
　
}
}
class B : A
{
public B()
{
　
}
}

　　结果呢？b当然是A的一个实例:

　　然而我们对上面的那段使用构造继承的Javascript代码做这样的测试：

function A()
{　　　 }
function B()
{　　　 }
function C()
{
　　　 this.father=A;
　　　 this.father();
　　　 delete this.father;
　　　 this.father=B;
　　　 this.father();
　　　 delete this.father;
}
var c=new C();
alert(c instanceof A);

 

可是得到的结果却不是我们想象的那样：

　　其实很容易解释：构造继承只是通过了调用父类的构造方法复制的父类的属性，其他的什么搜没有做，所以很多资料中并不把这种继承方式称做继承。

　　看到缺点的同时也记住优点：支持多继承。

　　我们看C# 的继承，发现与这个继承有两个最典型的不同：C#不支持多继承，以及我上面提到的构造继承的缺点。于是就产生了一种新的继承方式，我们成为原型继承。

　　看到名字，可以大致理解，原型继承就是使用原型（prototype）的特性来实现继承的。这是在Javascript最流行的一种继承方式。如果对原型有不理解，请关注我的另一篇文章：《玩转原型——prototype》。

　　我们先来看代码，在这里，我借鉴《Javascript王者归来》中的一段代码：

function Point(dimension)
{
　　　　　　　 this.dimension=dimension;
　　　　　　　 this.Test=function(){
　　　　　　　　　　　 alert("Success");
}
}
function Point2D(x,y)
{
　　　　　　　 this.x=x;
　　　　　　　 this.y=y;
}
Point2D.prototype=new Point(2);
var p=new Point2D(3,4);
p.Test();

　　测试通过。说明Point2D已经继承了父类的方法，再看看instance。

alert(p instanceof Point);

　　成功！好，我们来分析下原型继承：

　　原型继承的优点我不再多说，结构简单，容易理解，而且可以instance。但是他的缺点同样显著，还记得我上一篇关于Animal,People，Girl的例子么？我们用原型继承来实现下：

function Animal()
　
{
　
this.Run=function(){alert("I can run");};
　
}
　
function People(name)
　
{
　
this.Say=function(){alert("My name is "+this.name);}
　
}
　
People.prototype=new Animal();
　
function Girl(name,age)
　
{
　
this.age=age;
　
this.Introduce=function(){alert("My name is "+this.name+".I am "+this.age);};
　
}
　
Girl.prototype=new People(???);

　　大家注意看我红色加粗部分的那行代码，People是Girl的原型，那么我们在初始化People的时候就应该传入name参数，但是每个Girl的名字是不一样的，所以原型继承不使用的场合一：在原型继承阶段你不能确定用什么参数来初始化父类对象。场合二：很简单，每一个类只能有一个原型，那么也就是说，原型继承不能用于多继承。这是件好事，也是件坏事。因为：

　　在Java和C#等面向对象语言中，本来就不支持多继承，并且认为多继承是不符合面向对象的

　　无法实现多个接口了！

 

　　好了，今天就写到这，总结下，Prototype继承解决了构造继承的一些问题，又引入了一些新的问题。总体来说，原型继承是应用最广泛的继承方式，也是Javascript文法中真正意思上实现继承的方式！

介绍了构造继承和原型继承。今天把剩下的两种写完，这两种的应用相对于前两种来说应用很少，因此我把他们称为是非主流继承方式。

　　首先，我们来看非主流继承一：实例继承法。

　　我也不说那么多废话了，既然是非主流继承，就一定不常用，既然不常用还存在，那就只有一个因素，他用于特定的场合。实例继承法，就主要用于核心对象的继承，也是目前为止唯一能够解决核心对象继承的方式。

　　核心对象的继承拥有一定的价值，比如说Error对象，我们公司可能要自己实现一个Error 类来简化今后的开发，那么这个时候我就要使用实例继承法来继承Error。

　　代码如下：

function ExtendingError(mes)
{
　　　　var instance=new Error(mes);
　　　　instance.NewError=function(){
　　　　　　　　alert("Your Error is "+mes);　　　　
　　　　}
　　　　return instance;
}

　　好，测试下：

var e=new ExtendingError("Your number is less than one");
e.NewError();
alert(e.toString());

　　结果让我们满意：

　　好，废话不多说，这个是非主流继承方式，基本只用于核心对象的继承，记住就好！

　　接下来看看非主流继承二：拷贝继承法.

　　顾名思义,拷贝继承，就是通过拷贝实现对象的继承，拷贝什么呢？很明显，就是对象的属性和方法，还记得Javascript中，类其实就一个Hashtable么？如果想不起来的话，就回去复习一下基础，我可能会在过一段时间写一篇关于Javascript对象的知识。

　　了解了这个就好办了，直接看代码：

　　首先写一个Extend方法：

Function.prototype.Extend=function(){
　　　　for(var pro in obj)
　　　　{
　　　　　　　　//这样其实就是把父类的属性和方法完全复制过去了
　　　　　　　　this.prototype[pro]=obj[pro];
}
}

　　好了，再写段代码看下如何使用：

function Animal()
{　　　　}
function People()
{　　　　}
People.Extend(new Animal())
{　　　　}

　　明眼人一眼看出来，这个方法的缺点太明显了：

　　将对象的属性方法一一复制的时候，其实用的是反射，反射对效率的损伤我就不多说了。

　　和原型继承一样，必须初始化父类对象，当确定继承关系时，但是参数还不确定时，玩不转！

　　总之，这个方法一般情况下不用。

　　好了，下面说个常用的东西。混合继承！

　　这个是基于两个主流继承方式的。对比两个继承方式，我们可以发现两个继承方式的优缺点是互补的，那就好办了，混合到一起吧！

function People(name)
{
　　　　this.name=name;
　　　　this.SayName=function(){
　　　　　　　　alert("My name is "+name);
}
}
function Girl(name,age)
{
　　　　//构造继承
　　　　this.father=People;
　　　　this.father(name);
　　　　delete this.father;
　　　　this.Introduce=function(){
　　　　　　　　alert("My name is "+name+".I am"+age);
}
}
//原型继承
Girl.prototype=new People();

　　好了，两种方式的混合，现在看看，是不是问题解决了呢？

var g=new Girl("Xuan",22);
alert(g instanceof People);
g.SayName();
g.Introduce();

　　测试通过！

　　这是一个相对完美的解决方案，但是却增加了代码的复杂度，所以具体的方案还要靠大家在实践中去选择。

<!-- 分页 -->