JavaScript构造函数+原型创建对象，原型链+借用构造函数模式继承父类练习
虽然经常说是做前端开发的，但常常使用的技术反而是JQuery比较多一点。在JavaScript的使用上相对而言少些。尤其是在创建对象使用原型链继承上面，在项目开发中很少用到。所以今天做个demo练习一下，以后忘记了也可以照搬一下。
说明一下：
1. Demo中使用的是构造函数+原型模式创建的对象。构造函数中存储对象实例使用的属性，原型模式增加实例使用的方法。
2. Demo中的继承分为两个方面。一个是属性继承，使用的是借用构造函数模式 call()方法。另一个是方法继承，这个就是使用原型方式继承。让子构造函数的原型赋值为父构造函数的实例对象即可（特别需要注意的是：这样做会让子构造函数的原型构造器也更改为父构造函数的原型构造器，所以为了区分这点， 在子构造函数继承父构造函数后，需要重新制定子构造函数的构造器为本身）。这样子构造函数就可以继承父构造函数的属性和方法了。同时也可以自行为子构造函数添加属于自己的属性和方法。
关于构造函数和原型继承的一些知识，是JavaScript比较重要的知识，大家可以自行了解学习一下。本人对于这一块了解也比较粗糙。先掌握一个合理的创建对象和继承模式，以后再面对对象开发时也可以快速上手。
下面是Demo示例，创建了一个物种父类和其它的子类，并让各子类继承了父类的属性和方法。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
background: #3c3c3c;
}
.game-container{
width:60%;
margin:80px auto;
height:600px;
}
.game-container .img-block{
width:25%;
height:100%;
float:left; }
.game-container .img-block img{
width:100%;
height:100%;
border:1px solid purple;
border-radius: 10px;
}
</style>
</head>
<body> <div class="game-container">
<div id="mage" class="img-block"><img src="data:images/mage.jpg"/></div>
<div id="zhanshi" class="img-block"><img src="data:images/zhanshi.jpg"/></div>
<div id="spirit" class="img-block"><img src="data:images/spirit.jpg"/></div>
<div id="devil" class="img-block"><img src="data:images/devil.jpg"/></div>
</div> </body>
<script type="text/javascript">
/**
* 创建物种对象
*/
//物种构造函数
function Species(title,intro,desc){
this.title=title;
this.intro=intro;
this.desc=desc;
}
Species.prototype.description=function(){
alert(this.desc);
} /**
* 创建各职称对象
* 继承物种类
*/ //精灵类
function Spirit(title,intro,desc,area){
//继承属性
Species.call(this,title,intro,desc);
this.area=area;
}
//继承方法
Spirit.prototype=new Species();
Spirit.prototype.constructor=Spirit; Spirit.prototype.sayHello=function(){
alert("I am "+this.title+", I come from "+this.area);
} //恶魔类
function Devil(title,intro,desc,area){
Species.call(this,title,intro,desc);
this.area=area;
}
//继承方法
Devil.prototype=new Species();
Devil.prototype.constructor=Devil; Devil.prototype.saySomething=function(){
alert("I am devil , that's all");
} //法师类
function Mage(title,intro,desc,area){
Species.call(this,title,intro,desc,area);
this.area=area;
}
//继承方法
Mage.prototype=new Species();
Mage.prototype.constructor=Mage; Mage.prototype.sayHello=function(){
alert("I am mage, i can use ice and fire");
} //战士类
function Zhanshi(title,intro,desc,area){
Species.call(this,title,intro,desc,area);
this.area=area;
}
//继承方法
Zhanshi.prototype=new Species();
Zhanshi.prototype.constructor=Zhanshi; Zhanshi.prototype.sayHello=function(){
alert("I am zhanshi, i am strong");
} var spirit_ele=document.getElementById("spirit");
spirit_ele.onclick=function(){
var spirit_1=new Spirit("守卫精灵","爱好和平的精灵一族","守卫精灵的故事","精灵森林");
spirit_1.description();
spirit_1.sayHello();
} var devil_ele=document.getElementById("devil");
devil_ele.onclick=function(){
var devil_1=new Devil("恶魔猎手","恶魔猎手一族","恶魔猎手的故事","迷雾森林");
devil_1.description();
devil_1.saySomething();
} var mage_ele=document.getElementById("mage");
mage_ele.onclick=function(){
var mage_1=new Mage("法师","擅长冰与火元素的使用","法师的故事","亚特");
mage_1.description();
mage_1.sayHello();
} var zhanshi_ele=document.getElementById("zhanshi");
zhanshi_ele.onclick=function(){
var zhanshi_1=new Zhanshi("战士","身强体壮","战士的故事","极地");
zhanshi_1.description();
zhanshi_1.sayHello();
} </script>
</html>
如上，该模式的创建父类和使用原型继承父类的模式，是相对更合理的方式。它规避了一些问题。比如，父类创建子类使用的公共方法。使每个子类的该方法都指向同一位置；子类使用call()借用构造函数模式继承父类属性。call()中的this对象表示的是当前的执行环境，也就是子构造函数的环境。所以每个子类对象在创建后都有属于自己的属性。这样的方式继承属性可以规避在使用原型继承属性时，遇到引用类型时（比如Array等），所有子类都指向同一个引用类型值。
这篇写的较糙，只提供了一种较合理的创建对象和继承方式。感谢阅读。
JavaScript构造函数+原型创建对象，原型链+借用构造函数模式继承父类练习的更多相关文章
- JavaScript继承基础讲解，原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承
说好的讲解JavaScript继承,可是迟迟到现在讲解.废话不多说,直接进入正题. 既然你想了解继承,证明你对JavaScript面向对象已经有一定的了解,如还有什么不理解的可以参考<面向对象J ...
- JS原型，原型链，类，继承，class，extends，由浅到深
一.构造函数和原型 1.构造函数.静态成员和实例成员 在ES6之前,通常用一种称为构造函数的特殊函数来定义对象及其特征,然后用构造函数来创建对象.像其他面向对象的语言一样,将抽象后的属性和方法封装到对 ...
- JavaScript高级特性-创建对象的九种方式
1. 对象字面量 通过这种方式创建对象极为简单,将属性名用引号括起来,再将属性名和属性值之间以冒号分隔,各属性名值对之后用逗号隔开,最后一个属性不用逗号隔开,所有的属性名值对用大括号括起来,像这样: ...
- 深入理解JavaScript系列（45）：代码复用模式（避免篇）
介绍 任何编程都提出代码复用,否则话每次开发一个新程序或者写一个新功能都要全新编写的话,那就歇菜了,但是代码复用也是有好要坏,接下来的两篇文章我们将针对代码复用来进行讨论,第一篇文避免篇,指的是要尽量 ...
- JS学习笔记——JavaScript继承的6种方法(原型链、借用构造函数、组合、原型式、寄生式、寄生组合式)
JavaScript继承的6种方法 1,原型链继承 2,借用构造函数继承 3,组合继承(原型+借用构造) 4,原型式继承 5,寄生式继承 6,寄生组合式继承 1.原型链继承. <script t ...
- javascript继承之借用构造函数与原型
javascript继承之借用构造函数与原型 在js中,关于继承只有利用构造函数和原型链两种来现实.以前所见到的种种方法与模式,只不过是变种罢了. 借用构造函数 1 2 3 4 5 6 7 8 9 1 ...
- js继承之组合继承（结合原型链继承 和 借用构造函数继承）
在我的前两篇文章中,我们已经介绍了 js 中实现继承的两种模式:原型链继承和借用构造函数继承.这两种模式都存在各自的缺点,所以,我们考虑是否能将这二者结合到一起,从而发挥二者之长.即在继承过程中,既可 ...
- javascript中的构造函数和原型及原型链
纯属个人理解,有错误的地方希望大牛指出,以免误人子弟 1.构造函数: 构造函数的作用 : 初始化由new创建出来的对象 new 的作用: 创建对象(空对象) new 后面跟的是函数调用,使用ne ...
- javascript实现继承3种方式： 原型继承、借用构造函数继承、组合继承，模拟extends方法继承
javascript中实现继承的三种方式:原型继承.借用构造函数继承.混合继承: /* js当中的继承 js中 构造函数 原型对象 实力对象的关系: 1 构造函数.prototype = 原型对象 2 ...
随机推荐
- 从实例谈OOP、工厂模式和重构
有了翅膀才能飞, 欠缺灵活的代码就象冻坏了翅膀的鸟儿.不能飞翔,就少了几许灵动的气韵.我们需要给代码带去温暖的阳光, 让僵冷的翅膀重新飞起来. 结合实例, 通过应用OOP.设计模式和重构,你会看到代码 ...
- 搭建环境Visual Studio 2013 社区版
搭建环境Visual Studio 2013 社区版 ActiveReports 9刚刚发布3天,微软就发布了 Visual Studio Community 2013 开发环境. Visual St ...
- NHProfiler使用方法
NHProfiler使用方法 NHProfiler是一个针对Nhibernate运行分析的工具. 使用如下: (1)在创建ISessionFactory的项目中引用NHProfiler安装目录下的Hi ...
- 自己动手实现Expression翻译器 – Part I
伴随.Net3.5到来的Expression,围绕着它产生了各种各样有趣的技术与应用,Linq to object.Linq to sql.Linq to sqllite.Linq to Anythi ...
- SpringMVC 异常处理
SpringMVC学习系列(10) 之 异常处理 在项目中如何处理出现的异常,在每个可能出现异常的地方都写代码捕捉异常?这显然是不合理的,当项目越来越大是也是不可维护的.那么如何保证我们处理异常的代码 ...
- C#通过接口与线程通信(捕获线程状态)介绍
C#通过接口与线程通信(捕获线程状态)介绍 摘要:本文介绍C#通过接口与线程通信(捕获线程状态),并提供简单的示例代码供参考. 提示:本文所提到的线程状态变化,并不是指线程启动.暂停.停止,而是说线程 ...
- Slithice 分布式架构设计
项目原因: 参与过各种 分布式项目,有 Socket,Remoting,WCF,当然还有最常用的可以跨平台的 WebService. 分布式编码的时间浪费: 但是,无一例外的,开发分布式程序的开发遵循 ...
- 企业架构研究总结（44）——企业架构与建模之Archimate视图和视角
3. ArchiMate的视角与视图 创建.维护一个企业架构是一件非常复杂繁琐的事情,因为这项工作需要面对许多背景.利益各异的干系人,对他们所关注的问题进行解答,并能够在他们之间形成无障碍的沟通流.为 ...
- 正则表达式与领域特定语言（DSL）
如何设计一门语言(十)——正则表达式与领域特定语言(DSL) 几个月前就一直有博友关心DSL的问题,于是我想一想,我在gac.codeplex.com里面也创建了一些DSL,于是今天就来说一说这个事情 ...
- 3分钟教你做一个iphone手机浏览器
3分钟教你做一个iphone手机浏览器 第一步:新建一个Single View工程: 第二步:新建好工程,关闭arc. 第三步:拖放一个Text Field 一个UIButton 和一个 UIWebV ...