javascript面向对象之Javascript 继承

上几节讲了 JavaScript 面向对象之命名空间 、 javascript 面向对象的JavaScript类 、 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="硕士";//学历

}

　　我们可以测试一下：


代码如下:

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是门非常灵活的语言，实现继承可能还有其他更好的方式，大家可以去研究挖掘，我在这就当是抛了块砖头， 希望能引出华美的玉石！

赞 (0)

相关推荐

  • javascript 面向对象封装与继承

    整理一下js面向对象中的封装和继承. 1.封装 js中封装有很多种实现方式,这里列出常用的几种. 1.1 原始模式生成对象 直接将我们的成员写入对象中,用函数返回. 缺点:很难看出是一个模式出来的实例. 代码: 复制代码 代码如下: function Stu(name, score) {             return {                 name: name,                 score: score             }         }    

  • 关于JavaScript的面向对象和继承有利新手学习

    这是一篇关于JavaScript的面向对象和继承的文章,写于1年前,作者循序渐进,对想学习JavaScript中面向对象的同学来说是很有帮助的,因此试着翻译一下,不妥之处,请指正.原文链接Objects and Inheritance in Javascript 虽然一些Javascript用户可能永远也不需要知道原型或面向对象语言的性质,但是那些来自传统面向对象的语言的开发者使用的时候会发现JavaScript的继承模型非常的奇怪.而不同的JS框架提供了各自的方法来编写类面向对象(class-

  • javascript 面向对象编程基础：继承

    我们看到这里继承的概念是多么的直白,"拷贝一个类的prototype 到另外一个类",好,Code is cheap,看代码: function class1() { } function class2() { } class2.prototype = class1.prototype; class2.moreProperty1 = " class 2 additional string " ; class2.moreMethod1 = function () {

  • javascript 面向对象全新理练之继承与多态

    1 又是几个基本概念 为什么要说又呢? 在讨论继承时,我们已经列出了一些基本概念了,那些概念是跟封装密切相关的概念,今天我们要讨论的基本概念,主要是跟继承与多态相关的,但是它们跟封装也有一些联系. 1.1 定义和赋值 变量定义是指用 var a; 这种形式来声明变量. 函数定义是指用 function a(...) {...} 这种形式来声明函数. var a = 1; 是两个过程.第一个过程是定义变量 a,第二个过程是给变量 a 赋值. 同样 var a = function(...) {};

  • javascript 面向对象,实现namespace,class,继承，重载

    由于组里项目大多的javascript,css等客户端工作是另一同事在负责,该同事又特忙无法重构,老大也就只是提建议并未立即实施重构.但是我前些日子也改过些许客户端的小bug,确实那代码看得让人有些云里雾里,不知身在哪山,轻易不敢动代码,于是就自己动手鼓捣起我曾又爱又恨的javascript来,自己写一个简单的js实现namespace,继承,重载等面向对象的特性.欢迎拍砖灌水 .定义namespace Namesapce.js 复制代码 代码如下: Namespace = new Object

  • javascript 面向对象全新理练之原型继承

    首先创建一个父类的实例化对象,然后将该对象赋给子类的 prototype 属性. 这样,父类中的所有公有实例成员都会被子类继承.并且用 instanceof 运算符判断时,子类的实例化对象既属于子类,也属于父类. 然后将子类本身赋值给它的 prototype 的 constructor 属性.(注意:这里赋值的时候是没有 () 的!) 这一步是为了保证在查看子类的实例化对象的 constructor 属性时,看到的是子类的定义,而不是其父类的定义. 接下来,通过对 o.method1() 调用的

  • javaScript面向对象继承方法经典实现

    JavaScript的出现已经将近20多年了,但是对这个预言的褒贬还是众说纷纭.很多人都说JavaScript不能算是面向对象的变成语言.但是JavaScript的类型非常松散,也没有编译器.这样一来给了程序员很大的自由,也带来了一些缺陷. 虽然JavaScript不算是一门面向对象的语言.但是我们可以模仿着其他语言实现面向对象的方式来实现JavaScript的面向编程. 下面是JavaScript教程中非常经典的继承方法. 复制代码 代码如下: //定义一个Pet对象.通过这一个名称和数量的腿

  • Javascript简单实现面向对象编程继承实例代码

    本文讲述了Javascript简单实现面向对象编程继承实例代码.分享给大家供大家参考,具体如下: 面向对象的语言必须具备四个基本特征: 1.封装能力(即允许将基本数据类型的变量或函数放到一个类里,形成类的成员或方法) 2.聚合能力(即允许类里面再包含类,这样可以应付足够复杂的设计) 3.支持继承(父类可以派生出子类,子类拥有父母的属性或方法) 4.支持多态(允许同样的方法名,根据方法签名[即函数的参数]不同,有各自独立的处理方法) 这四个基本属性,javascript都可以支持,所以javasc

  • javascript面向对象之Javascript 继承

    上几节讲了 JavaScript 面向对象之命名空间 . javascript 面向对象的JavaScript类 . JavaScript 面向对象的之私有成员和公开成员 与 Javascript 面向对象之重载,大家可以先看上面的再继续往下看. 在JavaScript中实现继承可以有多种方法,下面说两种常见的. 一,call 继承,先看代码: 先定义一个"人"类 复制代码 代码如下: //人类 Person=function(){ this.name="草泥马";

  • JavaScript面向对象之class继承类案例讲解

    JavaScript面向对象之class继承类案例讲解

    1. 面向对象class继承 在上面的章节中我们看到了JavaScript的对象模型是基于原型实现的,特点是简单,缺点是理解起来比传统的类-实例模型要困难,最大的缺点是继承的实现需要编写大量代码,并且需要正确实现原型链. 有没有更简单的写法?有! 我们先回顾用函数实现 Student 的方法: function Student(name) { this.name = name; } // 现在要给这个Student新增一个方法 Student.prototype.hello = function

  • 学习javascript面向对象 理解javascript对象

    一.编程思想 面向过程:以过程为中心,自顶向下逐步细化,程序看成一系列函数调用的集合 面向对象:对象作为程序的基本单元,程序分解为数据和相关操作 二.类.对象 类:对具有相同特性和特征事物的抽象描述 对象:某种类型对应的具体事物 三.面向对象的三大特性 封装:隐藏实现细节,实现代码模块化 继承:扩展已存在的代码模块,实现代码重用  多态:接口的不同实现方式,实现接口重用 四.对象定义:无序属性的集合,其属性可以包含基本值.对象或者函数 //简单的对象实例 var person = new Obj

  • javascript 面向对象的JavaScript类

    在上一节面 JavaScript 面向对象之命名空间 中说了怎么定义JavaScript命名空间,这一节来说下紧接着的一个概念--类.虽然JavaScript中没有class关键字,但作为开发人员我们一定要有这个思想.在C#中类可以分为实例类和静态类,JavaScript亦然. 一,定义实例类: 在上节中我定义了一个cnblogs.news的命名空间,现在就在此命名空间下定义一个名为Article类: 复制代码 代码如下: cnblogs.news.Article=function(){ var

  • 学习javascript面向对象 理解javascript原型和原型链

    学习javascript面向对象 理解javascript原型和原型链

    先看一张图,梳理梳理. 一.基本概念 [原型链]每个构造函数都有一个对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针.那么,如果原型对象等于另一个原型的实例,此时的原型对象将包含一个指向另一个原型的指针,相应地,另一个原型中也包含着一个指向另一个构造函数的指针.如果另一个原型又是另一个原型的实例,那么上述关系依然成立.如此层层递进,就构成了实例与原型的链条. [原型对象]这个对象包含可以由特定类型的所有实例共享的属性和方法.所有引用类型默认都继承了Object,

  • Javascript面向对象编程

    Javascript的重要性 使用率 1.在web应用中,涉及到前端界面编程基本上都要用到javascript语言: 2.Web2.0及Ajax推动了javascript语言. 3.随着大量的c/s应用转向b/s,富客户端技术的不断推广,javascript语言的应用范围还将不断加大: javascript的特点 简单 动态 基于对象(面向对象) Javascript面向对象概述 Javascript是一种面向(基于)对象的动态脚本语言,是一种基于对象(Object)和事件驱动(EventDri

  • Javascript 面向对象之重载

    上几节讲了 JavaScript 面向对象之命名空间 . javascript 面向对象的JavaScript类 与 JavaScript 面向对象的之私有成员和公开成员 ,大家可以先看上面的再继续往下看. 假如 我这样定义: 复制代码 代码如下: function getDate(){.....} function getDate(date){.....} 那么后一个方法将覆盖前一个,虽然不报错. 但是我们确实是可以实现重载的,如果你用过jQuery,你就会深有体会,比如$("#btn&quo

  • JavaScript 面向对象的之私有成员和公开成员

    上两节讲了 JavaScript 面向对象之命名空间 与 javascript 面向对象的JavaScript类,大家可以先看上面的再继续往下看. 其实很简单,废话少说,看了下面的代码及注释相信你就会一目了然! 复制代码 代码如下: //声明类,就是一个方法,其实在JavaScript中,命名空间.类.成员.... 一切皆对象 MyClass =function(){ var _this=this; //私有变量 var aa="11"; //公开变量 this.bb="22

随机推荐