JavaScript继承实现

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
    <head>  
        <meta http-equiv="Content-Type" content="text/html; charset=GBK" />  
        <title>使用javascript实现继承</title>  
        <script type="text/javascript" charset="GBK">  
            //sub是子类,sup是父类  
            function extend(sub,sup){  
                // 目的: 实现只继承父类的原型对象  
                var F = new Function();// 1 创建一个空函数    目的:空函数进行中转  
                F.prototype = sup.prototype;// 2 实现空函数的原型对象和超类的原型对象转换  
                sub.prototype = new F(); // 3 原型继承   
                sub.prototype.constructor = sub;//4还原子类的构造器  
                //保存一下父类的原型对象: 一方面方便解耦  另一方面方便获得父类的原型对象  
                sub.superClass = sup.prototype;//自定义一个子类的静态属性 接受父类的原型对象  
                //判断父类的原型对象的构造器 (加保险)  
                if(sup.prototype.constructor == Object.prototype.constructor ){  
                    sup.prototype.constructor = sup;  
                }  
            }  
            //应用举例  
            //父类  
            function Person(name , age){  
                this.name = name;  
                this.age = age;  
            };  
            Person.prototype = {  
                constructor:Person,  
                sayHello:function(){  
                    alert("Hello world");  
                }  
            };            
            //子类  
            function Boy(name,age,sex){  
                //call 绑定父类的模版函数 实现 借用构造函数继承 只复制了父类的模版  
                Boy.superClass.constructor.call(this,name,age);  
                this.sex = sex;  
            };  
            //原型继承的方式: 即继承了父类的模版 又继承了父类的原型对象  
            //Boy.prototype = new Person();  
            // 只继承一遍父类的原型对象  
            extend(Boy , Person);  
              
            Boy.prototype.sayHello = function(){  
                alert('hi javascript!');  
            }  
            var b = new Boy('张三' , 20 , '男');  
            alert(b.name);   
            alert(b.sex);  
            b.sayHello();  
            Boy.superClass.sayHello.call(b);//父类的方法  
                  
        </script>  
    </head>  
    <body>  
    </body>  
</html>

 

欢迎分享本文,转载请保留出处:前端ABC » JavaScript继承实现

赞 (1)
分享到:更多 ()

发表评论 0