JavaScript构造函数+原型创建对象，原型链+借用构造函数模式继承父类练习

Posted 2020-08-27 Jeremy阳仔

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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="images/mage.jpg"/></div>
    <div id="zhanshi" class="img-block"><img src="images/zhanshi.jpg"/></div>
    <div id="spirit" class="img-block"><img src="images/spirit.jpg"/></div>
    <div id="devil" class="img-block"><img src="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构造函数，原型对象原型链，this指向，错误处理

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

JavaScript 原型继承原型链

浅谈Javascript中的原型原型链继承

javascript原型原型链神图

Javascript的原型和原型链