争怎路由网/网站教程/内容

JS 的面向对象中继承的那些小事（案例）

网站教程2024-06-03 阅读
网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。因而，超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。
本章给大家介绍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>

1.png

运行的结果可以发现，子类原型的改变影响了父类的原型，父类的原型中本来是没有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>
2.png
方法二：代码很简单，但是很难想到，没有第一个方法那么好理解。核心思想：对象自身属性的改变，不会影响其构造函数的属性的改变。
<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>
3.png
以上就是JS 的面向对象中继承的那些小事（实例）的详细内容，更多请关注php中文网其它相关文章！
				
				
网站建设是一个广义的术语，涵盖了许多不同的技能和学科中所使用的生产和维护的网站。



      
……
标签:JS 的面向对象中继承的那些小事（案例）
 
相关阅读