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. Javascript玩转继承(一)

  b. Javascript玩转继承(一)

 

c.Javascript玩转继承(一)

  d.Javascript玩转继承(一)

  e. Javascript玩转继承(一)

  f. Javascript玩转继承(一)

  测试成功!

  我们来总结一下这段代码的关键,指定父类,声明父类对象,然后删除临时变量,您是否觉得有些麻烦呢?至少我是这么觉得的,一旦忘记了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玩转继承(二)

  然而我们对上面的那段使用构造继承的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);

 

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

Javascript玩转继承(二)

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

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

  我们看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();

Javascript玩转继承(二)

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

alert(p instanceof Point);

Javascript玩转继承(二)

  成功!好,我们来分析下原型继承:

  原型继承的优点我不再多说,结构简单,容易理解,而且可以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玩转继承(三)

Javascript玩转继承(三)

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

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

  顾名思义,拷贝继承,就是通过拷贝实现对象的继承,拷贝什么呢?很明显,就是对象的属性和方法,还记得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();

Javascript玩转继承(三)

Javascript玩转继承(三)

Javascript玩转继承(三)

  测试通过!

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

<!-- 分页 -->
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值