很多C#或C++开发人员习惯使用继承来开发项目,所以当他们想学习JavaScript语言时,第一个问题一般是:“我怎么在JavaScript中使用继承?”。

实际上JavaScript使用了一种不同于C#或C++的方法来创建面向对象语言。它是基于prototype的语言。原型概念表明行为是可以通过clone已经存在的对象来作为原型复用的。在JavaScript中每个对象都有原型,它定义了一系列对象可以使用的方法和成员。没有class,只有对象。每一个对象可以作为另一个对象的原型。

这个概念是非常灵活的,我们可以用它来模拟OOP继承。

实现继承

让我们想象我们使用JavaScript创建这个层次机构:

首先我们可以简单地创建ClassA。因为没有明确的类,我们只需创建一个函数定义一组行为:

var ClassA = function(){
this.name = "class A";
}

使用new 关键字来实例化这个“类”:

var a = new ClassA();
ClassA.prototype.print = function(){
console.log(this.name);
}

然后使用对象来使用它:

a.print()

很简单,对吧?

完整的样式只用了8行代码:

var ClassA = function() {
this.name = "class A";
} ClassA.prototype.print = function() {
console.log(this.name);
} var a = new ClassA(); a.print();

现在让我们来创建类之间的“继承”。这个工具只做一件简单的事:克隆原型:

var inheritsFrom = function(child, parent) {
child.prototype = Object.create(parent,prototype);
};

奇迹发生了!通过clone原型,我们将所有成员和函数传给新类。

所以如果我们想添加第一个类的子类,只需要使用这段代码:

var ClassB = function() {
this.name = "class B";
this.surname = "I'm the child";
} inheritsFrom(ClassB, ClassA);

所以ClassB继承了ClassA的print函数,所以下面代码是有效的:

var b = new ClassB();
b.print();

所以产生以下输出:

class B

我们甚至可以覆盖ClassB的print函数:

ClassB.prototype.print = function(){
ClassA.prototype.print.call(this);
console.log(this.surname);
}

在这种情况下,输出是这样的:

class B
I’m the child

这里的技巧是调用ClassA.prototype来获取print函数。由于call函数我们可以对当前对象(this)调用基本函数。

创建ClassC是显而易见的:

var ClassC = function () {
this.name = "class C";
this.surname = "I'm the grandchild";
} inheritsFrom(ClassC, ClassB); ClassC.prototype.foo = function() {
// Do some funky stuff here...
} ClassC.prototype.print = function () {
ClassB.prototype.print.call(this);
console.log("Sounds like this is working!");
} var c = new ClassC();
c.print();

输出:

class C
I’m the grandchild
Sounds like this is working!

总结

最后,我想说明JavaScript不是C#或C++。它有自己的哲学。如果你说C++或C#程序员,并且你真的很想了解JavaScript所有精华,我给你最好的提示:不要试图将你的语言复制到JavaScript。没有最好的语言或最差的语言。只是不同的哲学!

链接: http://www.sitepoint.com/simple-inheritance-javascript/

JavaScript简单继承的更多相关文章

  1. 简述一个javascript简单继承工具的实现原理

    背景 由于本人非常希望能够开发自己的游戏,所以业余时间一直在想着能不能自己一些好玩又有趣的东西出来,最近随着steam上众多独立游戏的爆发,感觉自己又燃烧了起来,所以又拾起了很久以前的一个2d引擎,决 ...

  2. 详解Javascript的继承实现(二)

    上文<详解Javascript的继承实现>介绍了一个通用的继承库,基于该库,可以快速构建带继承关系和静态成员的javascript类,好使用也好理解,额外的好处是,如果所有类都用这种库来构 ...

  3. 再谈javascript原型继承

    Javascript原型继承是一个被说烂掉了的话题,但是自己对于这个问题一直没有彻底理解,今天花了点时间又看了一遍<Javascript模式>中关于原型实现继承的几种方法,下面来一一说明下 ...

  4. [转]Javascript原型继承

    真正意义上来说Javascript并不是一门面向对象的语言,没有提供传统的继承方式,但是它提供了一种原型继承的方式,利用自身提供的原型属性来实现继承.Javascript原型继承是一个被说烂掉了的话题 ...

  5. JavaScript 的继承与多态

    本文先对es6发布之前javascript各种继承实现方式进行深入的分析比较,然后再介绍es6中对类继承的支持以及优缺点讨论.最后介绍了javascript面向对象编程中很少被涉及的“多态”,并提供了 ...

  6. javascript的继承模式

    在javascript里面看到javascript的继承模式和传统的继承模式是有区别的,就想查资料看一下到底有区别,就看到了这篇文章,觉得讲得还可以,暂时先放上来,以后有别的东西再补充: http:/ ...

  7. JavaScript面向对象—继承的实现

    JavaScript面向对象-继承的实现 前言 面向对象的三大特性:封装.继承和多态.上一篇我们简单的了解了封装的过程,也就是把对象的属性和方法封装到一个函数中,这一篇讲一下JavaScript中继承 ...

  8. Javascript模拟继承(赠送.net吐槽一段)

    首先吐槽一句,今年的就业形势很不乐观啊,特别是搞.net的(相对java),特特别是还没出校门没有正式工作经验的,找个实习很难,前些天接了个面试电话,上来就质疑我“你一个在校大学生怎么可能做了那么多项 ...

  9. JavaScript之继承(原型链)

    JavaScript之继承(原型链) 我们知道继承是oo语言中不可缺少的一部分,对于JavaScript也是如此.一般的继承有两种方式:其一,接口继承,只继承方法的签名:其二,实现继承,继承实际的方法 ...

随机推荐

  1. JavaScirpt 的垃圾(garbage collection)回收机制

    一.垃圾回收机制—GC Javascript具有自动垃圾回收机制(GC:Garbage Collecation),也就是说,执行环境会负责管理代码执行过程中使用的内存. 原理:垃圾收集器会定期(周期性 ...

  2. [拾零]C/C++_代码复用的实现_静态链接库_动态链接库_使用.def导出

    1 静态链接库 1.1 创建静态链接库: 1.在VC6中创建项目:Win32 Static Library 2.在项目中创建两个文件:xxx.h 和 xxx.cpp 3.编译 1.2 使用静态链接库 ...

  3. Arduino ESP8266编程深入要点

    Arduino for ESP8266的话,如果不修改代码,默认没有办法进入轻睡眠的省电模式,只能进入Modem Sleep,也就是说Wifi可以暂时睡眠但是CPU没法睡,Modem Sleep最低功 ...

  4. servlet config

    <webapp> <!--servlet是指编写的Servlet的路径,以及定义别名--> <servlet> <servlet-name>test&l ...

  5. Beginning Python Chapter 2 Notes

    Python基本数据类型用Python官方说法应该叫Python内建数据类型,英文叫built-in type.下面稍微总结了一下我看到过的Python内建数据类型. Python基本数据类型 数据类 ...

  6. python爬虫之路——变量和变量类型

    变量类型: ①单值:int ②多值:数组 ③复杂:类 变量类型:就是变量的数据结构,表示这个变量所代表的内容的格式是怎样的. (多值)四种基本数据结构: 列表,字典,元组,集合 列表: ①元素可变,  ...

  7. java.lang.NoClassDefFoundError: javax/servlet/jsp/jstl/core/Config

    今天写SpringMvc时,遇到这样一个问题: java.lang.NoClassDefFoundError: javax/servlet/jsp/jstl/core/Config at org.sp ...

  8. Python XML 解析

    什么是 XML? XML 指可扩展标记语言(eXtensible Markup Language). XML 被设计用来传输和存储数据. XML 是一套定义语义标记的规则,这些标记将文档分成许多部件并 ...

  9. 使用FontDialog组件设置字体

    实现效果: 知识运用: FontDialog组件的Font属性 //获取或设置选定的字体 public Font Font  { get;set; } 实现代码: private void butto ...

  10. python_96_类的继承1

    #面向对象3大特性:封装,多态,继承 # 继承可节省内存,减少代码 class People(): def __init__(self,name,age): self.Name=name self.A ...