虽然经常说是做前端开发的，但常常使用的技术反而是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构造函数+原型创建对象，原型链+借用构造函数模式继承父类练习的更多相关文章

  1. JavaScript继承基础讲解，原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承

    说好的讲解JavaScript继承,可是迟迟到现在讲解.废话不多说,直接进入正题. 既然你想了解继承,证明你对JavaScript面向对象已经有一定的了解,如还有什么不理解的可以参考<面向对象J ...

  2. JS原型，原型链，类，继承，class，extends，由浅到深

    一.构造函数和原型 1.构造函数.静态成员和实例成员 在ES6之前,通常用一种称为构造函数的特殊函数来定义对象及其特征,然后用构造函数来创建对象.像其他面向对象的语言一样,将抽象后的属性和方法封装到对 ...

  3. JavaScript高级特性-创建对象的九种方式

    1. 对象字面量 通过这种方式创建对象极为简单,将属性名用引号括起来,再将属性名和属性值之间以冒号分隔,各属性名值对之后用逗号隔开,最后一个属性不用逗号隔开,所有的属性名值对用大括号括起来,像这样: ...

  4. 深入理解JavaScript系列（45）：代码复用模式（避免篇）

    介绍 任何编程都提出代码复用,否则话每次开发一个新程序或者写一个新功能都要全新编写的话,那就歇菜了,但是代码复用也是有好要坏,接下来的两篇文章我们将针对代码复用来进行讨论,第一篇文避免篇,指的是要尽量 ...

  5. JS学习笔记——JavaScript继承的6种方法(原型链、借用构造函数、组合、原型式、寄生式、寄生组合式)

    JavaScript继承的6种方法 1,原型链继承 2,借用构造函数继承 3,组合继承(原型+借用构造) 4,原型式继承 5,寄生式继承 6,寄生组合式继承 1.原型链继承. <script t ...

  6. javascript继承之借用构造函数与原型

    javascript继承之借用构造函数与原型 在js中,关于继承只有利用构造函数和原型链两种来现实.以前所见到的种种方法与模式,只不过是变种罢了. 借用构造函数 1 2 3 4 5 6 7 8 9 1 ...

  7. js继承之组合继承（结合原型链继承 和 借用构造函数继承）

    在我的前两篇文章中,我们已经介绍了 js 中实现继承的两种模式:原型链继承和借用构造函数继承.这两种模式都存在各自的缺点,所以,我们考虑是否能将这二者结合到一起,从而发挥二者之长.即在继承过程中,既可 ...

  8. javascript中的构造函数和原型及原型链

    纯属个人理解,有错误的地方希望大牛指出,以免误人子弟 1.构造函数: 构造函数的作用 : 初始化由new创建出来的对象    new 的作用: 创建对象(空对象) new 后面跟的是函数调用,使用ne ...

  9. javascript实现继承3种方式： 原型继承、借用构造函数继承、组合继承，模拟extends方法继承

    javascript中实现继承的三种方式:原型继承.借用构造函数继承.混合继承: /* js当中的继承 js中 构造函数 原型对象 实力对象的关系: 1 构造函数.prototype = 原型对象 2 ...

随机推荐

  1. C#通过系统API判断已经连接互联网

    win32   API函数的做法: 要用的函数:InternetGetConnectedState 函数原形:BOOL   InternetGetConnectedState(LPDWORD   lp ...

  2. Asterisk 未来之路3.0_0005

    原文:Asterisk 未来之路3.0_0005 第二章: Asterisk的架构   Asterisk 和其他众多传统的PBX是有区别的,拨号方案针对各种通道处理本质上采用同一种方式. 在传统的PB ...

  3. 我的Android 4 学习系列

    Android 简介 开始入手 创建应用程序和Activity 创建用户界面 Intent 和 Broadcast Revicever 使用 Internet 资源 文件,保存状态和首选项 数据库和C ...

  4. ios中mvc的FormsAuthentication.SetAuthCookie(cookieUserName, false)失败

    如果楼主使用.net开发,要注意FormsAuthentication.SetAuthCookie 方法的使用会导致ios出现该问题.因为这个方法在ios设备上是把票据加入到url中,导致url和你的 ...

  5. Extjs树形控件入门

    Extjs树形控件由Ext.tree.TreePanel类定义,控件的名称为TreePanel,TreePanel继承自Panel类,在Extjs中使用树形控件其实很简单. 大家知道要使用Extjs必 ...

  6. NHibernate：教你如何搭建数据访问层？

    NHibernate:教你如何搭建数据访问层? 什么是NHibernate NHibernate 是一个基于.net 的针对关系型数据库的对象持久化类库.NHibernate 来源于非常优秀的基于Ja ...

  7. Swift之函数语法详解

    函数 函数是用来完成特定任务的独立的代码块.你给一个函数起一个合适的名字,用来标识函数做什么,并且当函数需要执行的时候,这个名字会被“调用”. Swift 统一的函数语法足够灵活,可以用来表示任何函数 ...

  8. 写入与导出excel

    检索 COM 类工厂中 CLSID 为 {00024500-0000-0000-C000-000000000046} 的组件失败,原因是出现以下错误: 80070005 拒绝访问. (异常来自 HRE ...

  9. mark_May

    嗯神忙的五月总算是过完了. 草草的做完研究性学习,浑浑噩噩的考了数学联赛,以及在考试的上一周还在疯狂的看未闻花名,貌似还有前几个星期不懂是吃错药还是怎样 总急着把2013的题目刷完=-=可是貌似到现在 ...

  10. usaco 1.2.1（指针技巧）

    ★Milking Cows 挤牛奶 三个农民每天清晨 5 点起床,然后去牛棚给 3 头牛挤奶.第一个农民在 300 时刻(从 5 点开始计时,秒为单位)给他的牛挤奶,一直到 1000 时刻.第二个农民 ...