JavaScript简单继承
很多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简单继承的更多相关文章
- 简述一个javascript简单继承工具的实现原理
背景 由于本人非常希望能够开发自己的游戏,所以业余时间一直在想着能不能自己一些好玩又有趣的东西出来,最近随着steam上众多独立游戏的爆发,感觉自己又燃烧了起来,所以又拾起了很久以前的一个2d引擎,决 ...
- 详解Javascript的继承实现(二)
上文<详解Javascript的继承实现>介绍了一个通用的继承库,基于该库,可以快速构建带继承关系和静态成员的javascript类,好使用也好理解,额外的好处是,如果所有类都用这种库来构 ...
- 再谈javascript原型继承
Javascript原型继承是一个被说烂掉了的话题,但是自己对于这个问题一直没有彻底理解,今天花了点时间又看了一遍<Javascript模式>中关于原型实现继承的几种方法,下面来一一说明下 ...
- [转]Javascript原型继承
真正意义上来说Javascript并不是一门面向对象的语言,没有提供传统的继承方式,但是它提供了一种原型继承的方式,利用自身提供的原型属性来实现继承.Javascript原型继承是一个被说烂掉了的话题 ...
- JavaScript 的继承与多态
本文先对es6发布之前javascript各种继承实现方式进行深入的分析比较,然后再介绍es6中对类继承的支持以及优缺点讨论.最后介绍了javascript面向对象编程中很少被涉及的“多态”,并提供了 ...
- javascript的继承模式
在javascript里面看到javascript的继承模式和传统的继承模式是有区别的,就想查资料看一下到底有区别,就看到了这篇文章,觉得讲得还可以,暂时先放上来,以后有别的东西再补充: http:/ ...
- JavaScript面向对象—继承的实现
JavaScript面向对象-继承的实现 前言 面向对象的三大特性:封装.继承和多态.上一篇我们简单的了解了封装的过程,也就是把对象的属性和方法封装到一个函数中,这一篇讲一下JavaScript中继承 ...
- Javascript模拟继承(赠送.net吐槽一段)
首先吐槽一句,今年的就业形势很不乐观啊,特别是搞.net的(相对java),特特别是还没出校门没有正式工作经验的,找个实习很难,前些天接了个面试电话,上来就质疑我“你一个在校大学生怎么可能做了那么多项 ...
- JavaScript之继承(原型链)
JavaScript之继承(原型链) 我们知道继承是oo语言中不可缺少的一部分,对于JavaScript也是如此.一般的继承有两种方式:其一,接口继承,只继承方法的签名:其二,实现继承,继承实际的方法 ...
随机推荐
- Kendo MVVM 数据绑定(六) Html
Kendo MVVM 数据绑定(六) Html Html 绑定可以使用 ViewMod e 的属性来设置 DOM 元素的 innerHTML 属性.如果 ViewModel 的属性的数据类型不是字符串 ...
- zblog忘记后台密码怎么办 官方解决方案
刚装的zblog还没开始研究,结果发现密码弄错了进不去后台,也是醉了 为节省时间,直接用官方方案,就是一个无密码进后台的文件.下载后把文件上传至网站根目录,然后直接访问后台修改密码 zblog密码找回 ...
- PADS 9.5封装向导 多一个管脚
使用PADS 9.5封装向导(Decal Wizard)建立封装(Decals) 时遇到封装的中间多了一个管脚,如图红圈位置,通过一番搜寻,才知道这是热焊盘,不需要就在右边的红圈处去掉勾选热焊盘即可.
- LNK2005错误——重复定义错误
编程中经常能遇到LNK2005错误——重复定义错误,其实LNK2005错误并不是一个很难解决的错误.弄清楚它形成的原因,就可以轻松解决它了. 造成LNK2005错误主要有以下几种情况: 1.重复定义全 ...
- C语言的sprintf()和snprintf()
1.sprintf()函数 送格式化输出到字符串中,返回实际输出到字符串中的个数. 例如: char buffer[80]; sprint(buffer,"1234567890") ...
- 为什么我的C4C Service Request没办法Release到ERP?
问题 UI上发现找不到Release to ERP的按钮: 但是在UI Designer里是能看到这个按钮的.检查其Visible的属性,绑到了一个Calculated Rule上面: 发现其显示在r ...
- 使用JPA + Eclipselink操作PostgreSQL数据库
首先确保您已经安装了PostgreSQL.您可以参考我这篇文章PostgreSQL扫盲教程. 使用Eclipse创建一个新的JPA project: Platform选择EclipseLink,作为J ...
- 从PEP-8学习Python编码风格
(搬运自我在SegmentFault的博客) 关于空行 类与顶级函数(top-level function)的定义之间应当空两行. 类中的方法之间应当空一行. 方法中的逻辑部分之间可以空一行. 关于原 ...
- ansible 任务委派 delegate_to
ansible 任务委派功能delegate_to run_noce: true 在一个主机上面只执行一次一个任务. ,如果没有这个参数的话,每个playbook中的组的主机都会执行一次. 我们有的 ...
- MySQL基础教程——创建数据库并插入数据
本节将介绍 MySQL 新建数据库,新建表,插入数据以及基本数据类型的相关知识.本节实验将创建一个名为 mysql_shiyan 的数据库,其中有两张表 employee和 department. 1 ...