转自原文javascript面向对象之Javascript 继承

在JavaScript中实现继承可以有多种方法,下面说两种常见的。

一,call 继承

先定义一个“人”类

//人类
Person=function(){
this.name="草泥马";
this.eat=function(){
alert("我要吃饭");
}
this.sleep=function(){
alert("我要睡觉");
}
}

再定义一个学生类,让它继承于Person

//学生类
Student=function(){
Person.call(this);//继承Person类
this.doHomework=function(){
alert("老师来了,作业借我抄下");
}
}

关键看 Person.call(this)这句,其中this代表当前对象,即Student ,这很容易理解,而Person.call(this)的意思是:将Person类的所有的公开成员“附加”给Student类,让Student也具有了Person的所有功能
和高级语言一样,如果子类中出现了和父类中同名的成员,则会将其覆盖,也就是所谓的“重写”了。

同样的,我们再定义一个女孩类 :

//女孩类
Girl=function(){
Person.call(this);//继承Person类
this.sex="女";
}

JavaScript是可以实现多重继承的,请看下面的Master(硕士)类,这个Master 自然是个学生,但同时又是个漂亮MM,于是有了下面的代码:

//硕士类
Master=function(){
Student.call(this);//继承Student类
Girl.call(this);//继承Girl类
this.degree="硕士";//学历 }

tset

var master=new Master();
master.name="凤姐";
master.eat();
master.doHomework();
alert("偶是名字叫:"+master.name);
alert("偶的性别是:"+master.sex);

多重继承时要注意顺序,如果两个类中有相同名称的成员,那么后一个将覆盖前一个,也就是说当前类只会继承后一个类中的成员。
call 方法继承就说到这,如果大家对call方法不清楚,就请去问问谷歌兄,我就不赘述了,网上转载得不要太多。下面说下另外一种继承方式。

二、prototype 原型继承

  我们再定义一个班长类:

//班长类
SquadLeader=function (){
//打招呼
this.hi=function(){
alert("同学们好,我现在是班长了");
}
}

上面定义了一个硕士类,现在这个硕士被提升为班长了,所以这个Master要继承SquadLeader了,这次我们用prototype 来实现,请看下面代码:

Master.prototype=new SquadLeader();//prototype 属性指向一个对象
// 或者
// Master.prototype=SquadLeader.prototype;
// 这样Master就继承了SquadLeader类,就这么一句话,这里有两种形式,其实原理是一样的。意思是:将SquadLeader的“灵魂”拷贝给了Master,于是从此SquadLeader能做的事,Master都可以做了。
// 测试一下:
var master=new Master();
master.hi()//输出“同学们好,我现在是班长了”  

我个人比较喜欢用第一种方案(call 继承)来实现继承,所有代码都包在一个“{}”内,一目了然,在书写风格上较之于第二种更接近于C#。prototype 属性我一般用来对已有的类做扩展。
JavaScript是门非常灵活的语言,实现继承可能还有其他更好的方式,大家可以去研究挖掘。

javascript面向对象之Javascript 继承的更多相关文章

  1. JavaScript面向对象中的继承

    1.1继承的基本概念 使用一个子类,继承另一个父类,那么子类可以自动拥有父类中的所有属性和方法,这个过程叫做继承. >>>继承的两方,发生在两个类之间. 实现继承的三种方式: 扩展O ...

  2. Javascript面向对象(封装、继承)

    Javascript 面向对象编程(一):封装 作者:阮一峰 Javascript是一种基于对象(object-based)的语言,你遇到的所有东西几乎都是对象.但是,它又不是一种真正的面向对象编程( ...

  3. JavaScript 面向对象 原型(prototype) 继承

    1.对象的概念:无需属性的集合,属性可以为数值,对象或函数,ECMAscript中没有类的概念,这点是javascript与其他面向对象(OO)语言不同的地方. //创建一个自定义对象 var per ...

  4. JavaScript面向对象之类的继承

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. JavaScript面向对象那些东西-继承

    继承 父类里有些属性方法 子类想把父类中的这些属性方法 继承过来给子类自己的实例也用用 ( ps: →_→ 能不能专业点 没文化真可怕 ) 一.原型链继承 // 原型链继承:把子类的原型作为父类的实例 ...

  6. Javascript面向对象特性实现封装、继承、接口详细案例——进级高手篇

    Javascript面向对象特性实现(封装.继承.接口) Javascript作为弱类型语言,和Java.php等服务端脚本语言相比,拥有极强的灵活性.对于小型的web需求,在编写javascript ...

  7. javascript面向对象系列第三篇——实现继承的3种形式

    × 目录 [1]原型继承 [2]伪类继承 [3]组合继承 前面的话 学习如何创建对象是理解面向对象编程的第一步,第二步是理解继承.本文是javascript面向对象系列第三篇——实现继承的3种形式 [ ...

  8. JavaScript 面向对象程序设计(下)——继承与多态 【转】

    JavaScript 面向对象程序设计(下)--继承与多态 前面我们讨论了如何在 JavaScript 语言中实现对私有实例成员.公有实例成员.私有静态成员.公有静态成员和静态类的封装.这次我们来讨论 ...

  9. JavaScript面向对象继承方法

    JavaScript的出现已经将近20多年了,但是对这个预言的褒贬还是众说纷纭.很多人都说JavaScript不能算是面向对象的变成语言.但是JavaScript的类型非常松散,也没有编译器.这样一来 ...

随机推荐

  1. 【POJ 2442】 Sequence

    [题目链接] http://poj.org/problem?id=2442 [算法] 堆 [代码] #include <algorithm> #include <bitset> ...

  2. [python基础] Flasky-表单WTForms支持的html字段和内建函数

    WTForms 支持的HTML 标准字段如表4-1 所示.表4-1 WTForms支持的HTML标准字段字段类型              说 明StringField           文本字段T ...

  3. bzoj 1800 & 洛谷 P2165 [AHOI2009]飞行棋 —— 模拟

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1800   https://www.luogu.org/problemnew/show/P21 ...

  4. zoj3478

    最短路 吐槽一下...最先开始写了个地图哈希,6kb,然后不是正解,又写了个spfa,4kb,还是不对,无奈抄标程,结果把spfa改成dijiestra就对了... 由于只有两个变量,所以我们设一个四 ...

  5. Python 39 数据库

    一:数据存储引擎 1. 什么是引擎? 一个功能的核心部分 引擎可以被分类 例如: 自然 增压 汽油 柴油 混合动力 天然气 核动力 汽油:动力弱,噪音小,震动小 柴油:动力强,污染大,噪音大,震动大 ...

  6. 修改DIV滚动条样式

    /*滚动条样式*/ div::-webkit-scrollbar { /*滚动条整体样式*/ width: 5px; /*高宽分别对应横竖滚动条的尺寸*/ height: 5px; } div::-w ...

  7. 单个句子<code> 多行代码显示<pre> 键盘输入<kbd>

    1.用来显示单个句子或者单个单词:<code>……</code> 2.用来显示多行代码:<pre>……</pre> 当行数高度大于340px,自动出现y ...

  8. 图片懒加载插件echo.js——改造

    今天做一个列表项需要用到懒加载,搜到网友推荐的echo.js,试用了一下,还不错.除了懒加载,还提供了throttle——节流,即用户快速滑动列表时,很快滑过的项的图片不会加载,只会加载最后停下来的位 ...

  9. Hbase 简单记录

    进入hbase 客户端命令行: hbase shell 根据rowkey获取单条数据: get 'HXXT_ns:app_test_hbase', 'rowkey值'   范围查询,并指定数据量: s ...

  10. selenium菜单操作

    连接到前端这个菜单下面的HTML/CSS子菜单 driver.get("https://www.imooc.com"); WebElement login = driver.fin ...