Javascript玩转继承(一)

 更新时间:2014年05月08日 17:50:55   作者:  
最近一直在学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);};
}

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

如果是新手,可能看后面的这两段代码有些晕晕乎乎,什么是call,什么是apply呢?好,在玩转继承这个专题中,我加入一个增刊系列,如果对这个有不了解,可以看我的这个文章:《玩转方法:call和apply 》。
对象伪装,这只是一种实现继承的方式,在接下来的文章,我会继续写出其他的继承方式以及几种继承方式的优劣,欢迎继续关注。

相关文章

  • JS 事件延迟执行说明分析

    JS 事件延迟执行说明分析

    为了避免用户鼠标无意识划过,而触发事件。浪费客户端资源。
    2010-05-05
  • JavaScript模板引擎原理与用法详解

    JavaScript模板引擎原理与用法详解

    这篇文章主要介绍了JavaScript模板引擎原理与用法,结合实例形式详细分析了javascript模版引擎相关概念、原理、定义及使用方法,需要的朋友可以参考下
    2018-12-12
  • Div上下居中

    Div上下居中

    Div上下居中...
    2007-02-02
  • JavaScript作用域深度剖析之动态作用域

    JavaScript作用域深度剖析之动态作用域

    这篇文章主要为大家介绍了 JavaScript作用域学习之动态作用域深度剖析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-05-05
  • JavaScript截断字符串的方法

    JavaScript截断字符串的方法

    这篇文章主要介绍了JavaScript截断字符串的方法,涉及javascript字符串截取的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-07-07
  • JS发起HTTP请求的多种方式总结

    JS发起HTTP请求的多种方式总结

    这篇文章主要为大家详细介绍了JavaScript发起HTTP请求的多种方式,文中的示例代码讲解详细,具有一定的学习价值,感兴趣的小伙伴可以跟随小编一起学习一下
    2023-11-11
  • js如何获取网页所有图片

    js如何获取网页所有图片

    这篇文章主要为大家详细介绍了js如何获取网页所有图片,js获取网页所有图片的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • 微信小程序批量上传图片到七牛(推荐)

    微信小程序批量上传图片到七牛(推荐)

    这篇文章主要介绍了微信小程序批量上传图片到七牛,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-12-12
  • 原生js和jQuery随意改变div属性style的名称和值

    原生js和jQuery随意改变div属性style的名称和值

    用原生js和jQuery实现改变随意改变div属性style的名称和值的结果,这个实例比较实用,新手朋友们可以看看
    2014-10-10
  • js为什么不能正确处理小数运算?

    js为什么不能正确处理小数运算?

    这篇文章主要介绍了js不能正确处理小数运算的原因,为大家解除js为什么不能正确处理小数运算的疑虑,感兴趣的小伙伴们可以参考一下
    2015-12-12

最新评论