首页 / js教程

    javascript继承有什么特点?js继承的实例讲解

    作者:PHP中文网2018-09-15 15:25:35

    本篇文章给大家带来的内容是关于javascript继承有什么特点?js继承的实例讲解,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

    最近学了 JS 的面向对象,这篇文章主要是探讨 JS 的面向对象中继承的那些事。

    JS中继承的特点:

    1、子类继承父类;

    2、子类可以用父类的方法和属性

    3、子类的改变可以不影响父类

    下面用一个例子来说明 JS 的继承

    这段代码创建了一个父类以及它的原型,同时还创建了一个子类,并继承了父类的私有属性

    <script>
            //这是父类
            function Father(name,age,marry){
                this.name=name;
                this.age=age;
                this.marry=marry;
            }
            //父类的原型
            Father.prototype.showName=function(){
                alert(this.name);
            }
    
            //子类
            function Son(name,age,marry,weight){
                Father.call(this,name,age,marry);
                this.weight=weight;
            }
            
     </script>

    当子类Son想继承父类的原型时,我的做法一开始是这么做的

    <script>
            //这是父类
            function Father(name,age,marry){
                this.name=name;
                this.age=age;
                this.marry=marry;
            }
            //父类的原型
            Father.prototype.showName=function(){
                alert(this.name);
            }
    
            //子类
            function Son(name,age,marry,weight){
                Father.call(this,name,age,marry);
                this.weight=weight;
            }
            
            //错误的做法
            Son.prototype=Father.prototype;
            Son.prototype.showAge=function(){
                alert(this.age);
            }
            var father=new Father('王大锤',30,true);
            alert(father.showAge);
            
    </script>

    运行的结果可以发现,子类原型的改变影响了父类的原型,父类的原型中本来是没有showAge方法的,这就违背了前面继承的第三个特点了。

    分析原因:上面代码的第20行 Son.prototype=Father.prototype;这里的 '=' 两边都是对象,那么它代表的意思就是引用,如果是引用的话,左边的对象改变,肯定会影响了右边的对象

    所以才出现了子类原型的改变影响了父类的原型。

    解决办法

    方法一:核心思路,前面的问题不是说 '=' 是引用的关系才导致问题的嘛,那这里就保证 '=' 永远是赋值的关系,而不是引用。这里就定义一个 Clone() 方法,将父类对象拷贝给子类。

    Clone() 方法里用到递归的原因是,在拷贝的过程中对象中可能嵌套对象。

    <script>
            //这是父类
            function Father(name,age,marry){
                this.name=name;
                this.age=age;
                this.marry=marry;
            }
            //父类的原型
            Father.prototype.showName=function(){
                alert(this.name);
            }
    
            //子类
            function Son(name,age,marry,weight){
                Father.call(this,name,age,marry);
                this.weight=weight;
            }
            Son.prototype=new Clone(Father.prototype);
            Son.prototype.showAge=function(){
                alert(this.age);
            }
            var father=new Father('王大锤',30,true);
            alert(father.showAge);
    
            //通过克隆对象:核心思路是保证 '=' 是赋值的关系,而不是引用,也就是保证 '=' 的右边不是对象
            function Clone(obj){
                for(var i=0;i<obj.length;i++){
                    if(typeof(obj[key]=='object')){
                        this.key=new Clone(obj[key]);
                    }else{
                        this.key=obj[key];
                    }
                }
            }  
    </script>

    这时候的结果父类对象的showAge方法是undefined

    方法二:代码很简单,但是很难想到,没有第一个方法那么好理解。核心思想:对象自身属性的改变,不会影响其构造函数的属性的改变。

    <script>
            //这是父类
            function Father(name,age,marry){
                this.name=name;
                this.age=age;
                this.marry=marry;
            }
            //父类的原型
            Father.prototype.showName=function(){
                alert(this.name);
            }
            //子类
            function Son(name,age,marry,weight){
                Father.call(this,name,age,marry);
                this.weight=weight;
            }
            function fn(){}
            fn.prototype=Father.prototype;
            Son.prototype=new fn();      
            Son.prototype.showAge=function(){
                alert(this.age);
            }
            var father=new Father('王大锤',30,true);
            alert(father.showAge);
            //通过克隆对象:核心思路是保证 '=' 是赋值的关系,而不是引用,也就是保证 '=' 的右边不是对象
            // Son.prototype=new Clone(Father.prototype);
            // function Clone(obj){
            //     for(var i=0;i<obj.length;i++){
            //         if(typeof(obj[key]=='object')){
            //             this.key=new Clone(obj[key]);
            //         }else{
            //             this.key=obj[key];
            //         }
            //     }
            // }  
    </script>

    相关推荐:

    JS中的继承方式实例详解

    js继承方法有什么?js的继承的两种方法介绍(附代码)

    以上就是javascript继承有什么特点?js继承的实例讲解的详细内容,更多请关注php中文网其它相关文章!

    标签:

PHP中文网

未登录