js原型继承机制实例详解

最新推荐文章于 2024-04-07 02:13:26 发布

原创最新推荐文章于 2024-04-07 02:13:26 发布 · 300 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #继承 #实例

JavaScript 专栏收录该内容

6 篇文章

订阅专栏

本文通过一个具体的JavaScript示例展示了如何实现面向对象编程中的继承机制。利用构造函数和原型链，作者详细解释了父类Person和子类PersonPlus之间的继承关系及其实现细节。

<!DOCTYPE HTML>
<html>
    <head>
        <title>please enter your title</title>
        <meta charset="utf-8">
        <meta name="Author" content="潭州学院-阿飞老师">
        <style type='text/css'>
            *{ margin:0; padding:0;}

        </style>
    </head>
    <body>

        <script type="text/javascript">
            //父类
            function Person( name ){ // 构造函数 就是 类
                this.name = name;
            }

            Person.prototype.showName = function(){
                alert( this.name );
            }

            var p1 = new Person( 'Eva' );

            //子类
            function PersonPlus( name , age ){
                Person.call( this , name );
                this.age = age;
            }


            var Fn = function(){};
            Fn.prototype = Person.prototype;
            PersonPlus.prototype = new Fn();
            PersonPlus.prototype.consturctor = PersonPlus;


            // PersonPlus.prototype = Person.prototype

            PersonPlus.prototype.showAge = function(){
                alert( this.age )
            }

            var p2 = new PersonPlus('Eva' , 15);

            alert( p2.constructor )
        </script>
    </body>
</html>