JavaScript面向对象原型链继承详解

最新推荐文章于 2025-04-21 23:19:25 发布

xingye123_

最新推荐文章于 2025-04-21 23:19:25 发布

阅读量261

点赞数

本文深入探讨JavaScript中的多种继承方式，包括原型继承、借用构造函数、寄生组合式继承及其改进版。通过具体示例，剖析各种继承方式的工作原理、优缺点及适用场景。

<html>
   <head>
       <meta charset="UTF-8"/>
       <title></title>
       <script type="text/javascript">
           //目标以最高性能完成属性和方法的继承建议拷贝到编辑器看黑白看的实在是难受
           //本文是对JavaScript高级程序设计面向对象的一个小总结请先看一看书适合对JavaScript面向对象有一定理解的人看
           //如果有误区麻烦大牛一定要指出来不希望误人！
           //必须看懂我说的每一种方法不要跳跃！即使你会希望你也不要跳跃顺便帮我看看哪里说的不对

           //原型继承
           //这继承方法虽然属性和方法都继承了但是一身bug 修改一个引用类型的值所有的引用类型值(不知道的话去百度)都跟着变了
           //顺便你试试SayName方法他好使吗为什么呢？
           //不卖关子了对于诸位和我一样的初学者来说我们可以这么理解：
           //Person.prototype.方法名       它是向原型链上添加一个方法
           //而Person.prototype=new 构造函数名();会对Person原型链进行破坏性的重写(也就是我们说的继承)可以理解为重装一个干净的系统里面仅有我们继承来的方法
           //那么以前定义的SayName方法呢？当然是消失啦一定要谨慎定义方法一定要在重写原型链之后否则用的时候就没了
           //但是非引用类型的值不会(修改age试试)面试可能会考引用类型 PS:顺便说一句：基础一定打好;
           //此方法不大好也不常用看懂即可我们往下看
           (function(){
               function Person(){
                   this.name='jack'
               }

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

               function More(){
                   this.age=18,
                   this.color=['yellow','blue','red']
               }

               More.prototype.SayAge=function(){
                   alert(this.age);
               }

               Person.prototype=new More();
               //测试数据:取消注释即可
//               var instance1=new Person();
//               instance1.color.push('green');
//               alert(instance1.color);

//               var instance2=new Person();
//               alert(instance2.color);
           }());

           //借用构造函数
           //嗯下面利用函数我们得目标完成了属性的继承成功了，但是方法怎么办也写进函数里？？No！违背了公用方法的本意
           //如果我们方法如果写进函数里，由于函数作用域两种方法彼此看不见啊，后面的所有都用构造函数这种方法写一遍？更No
           //如果你不明白More.call(this)什么意思仔细思考'借用构造函数实现属性继承'和下面这句话
           //将当前Person()里this指向的对象(instance)给More()，让More()里的this有和Person里的this一样的指向
           //结果代码的实际意思就变成了instance.name='jack',instance.age=18,instance.color=['yellow','blue','red']
           //如果你函数基础打的好一定能明白的
           //而且我们调用了两次构造函数一次是在1的位置一次是在2 这个我们一会接着说这句话有个印象先忽略
           (function(){
               function Person(){
                   this.name='jack',
                   More.call(this)//2
               }


               function More(){
                   this.age=18,
                   this.color=['yellow','blue','red']
               }

               More.prototype.SayAge=function(){
                   alert(this.age);
               }
               Person.prototype.SayName=function(){
                   alert(this.name);
               }
               var instance=new Person();
//               var instance1=new Person();//1
//               instance1.color.push('green');
//               alert(instance1.color);

//               var instance2=new Person();
//               alert(instance2.color);
           }());
           //寄生组合式继承
           //那么有没有一种更好的形式，可以解决方法的继承呢？当然有啦请先看代码
           //最上面的原型继承走一波！完美解决问题！不过你一定注意到了标注的1和2
           //1处通过原型继承可以继承属性和方法，2处通过构造函数继承属性，嗯看起来没问题
           //但是我们好像用原型继承，似乎多继承了一次属性啊。。多做了一次无用功消耗了机器的性能下面我们看看为什么会写入(调用)两次
           //1通过原型继承的时候将属性和方法写入到了原型链
           //2通过构造函数继承的时候将属性写入到了原型(还记得原型屏蔽原型链吗)
           //这个时候我们进行操作是访问原型中的属性原型链中的方法
           //(属性和方法都是先在原型上找在原型上找到了属性 ok 结束，在原型上没发现方法，继续找，原型链上有，ok 结束，{如果还找不到看看Object爸爸，还没有就只能报错啦})

           //我们可以看一下&&&&位置的alert 依然坚挺的输出yellow,blue,red 不给你报undefined
           //因为我命令他不许访问应该访问的原型我就想通过__proto__跳过去看看上面是否有垃圾，发现原型链上还真有看来属性绝对被写入了两次一次在原型上，一次原型链上
           //看来寄生组合式继承这种方法也有点业余不过完美可用啊不过作为一个专业的程序员是不允出现垃圾的

           //还有指针请看**** 继承后原型的constructor指针为何指向了More呢，通过继承后 Person原型的constructor指针不应该指向他自己的构造函数吗
           //实际上它先指向了他自己没错但是由于继承它还会向上级寻找看看有没有更多的继承(除了顶层Object对象，会忽略掉)
           //最终停在离顶层对象Object最近的那个也就是 More
           //constructor它才没有那么智能，继承后这货看到自己家你不让它停下去看看它真正的家，它是不会停的，啥时候快撞到Object这个顶层的爸爸，它才停
           //
           (function(){
               function Person(){
                   this.name='jack',
                   More.call(this)//2
               }



               function More(){
                   this.age=18,
                   this.color=['yellow','blue','red']
               }

               More.prototype.SayAge=function(){
                   alert(this.age);
               }

               Person.prototype=new More();//1

               Person.prototype.SayName=function(){
                   alert(this.name);
               }
//               var instance1=new Person();
//               instance1.color.push('green');
//               alert(instance1.color);
//
//               var instance2=new Person();
//               instance2.color.push('purple');
//               alert(instance2.color);
//
//               alert(Person.prototype.constructor.name);//****
//               alert(instance2.__proto__.color);//&&&&
           }());
           (function(){
               //终极寄生组合式继承(终极完美继承)
               /* 既然寄生组合式继承会写入(调用)两次
                   那么有没有一种方法可以跳过属性直接把方法写入直接继承原型链呢？
                   当然有！我们是利用一个空构造函数作为桥梁
                   PS:当然你可以不用这个方法直接Person.prototype=More.prototype试试 (他俩共享一个原型对象还继承个什么劲。。。
                   首先我们先大概看最下面的两个函数object和inherit进行方法继承他们两兄弟中的inherit顺手修复constructor指针让它回家看看
                   这俩函数就不多解释了看不懂找个豆腐撞死自己算了稍微解释下
                   把More原型(More.prototype)上面想继承的方法，给桥梁函数bridge原型(bridge.prototype)(这时候bridge的原型指向More原型看下一行
                                                           bridge.prototype →→→More.prototype
                   这时候该实例化一下继承啦把bridge函数实例化顺手修复一下指针再给Person.prototype去继承
                                                       总：   Person.prototype →→→bridge.prototype →→→More.prototype
                   当当当完成了如果你有个小疑问搞了半天不就是Person.prototype=new More(); 真费事我不想看了用上个也挺好
                   那么如果这个被继承的对象有10个属性，100个属性呢？他被调用10次 100次呢我们会释放多少机器的压力呢

               */
               function Person(){
                   this.name='jack',
                   More.call(this)//2
               }



               function More(){
                   this.age=18,
                   this.color=['yellow','blue','red']
               }

               More.prototype.SayAge=function(){
                   alert(this.age);
               }

               inherit(Person,More);
               var instance1=new Person();

               Person.prototype.SayName=function(){
                   alert(this.name);
               }
//               instance1.SayAge();

               //封装好的两兄弟函数
               function object(one){
                   function bridge(){};
                   bridge.prototype=one;
                   return new bridge();
               }
               function inherit(main,more){
                   var proto=object(more.prototype);
                   proto.constructor=main;
                   main.prototype=proto;
               }
           }());

       </script>
   </head>
   <body>

   </body>
</html>