JavaScript 常见的六种继承方式

时间:2024-02-01 21:57:21
            <h2 class="rich_media_title" id="activity-name">
                
                
                
        JavaScript 常见的六种继承方式
                  </h2>
            <div id="meta_content" class="rich_media_meta_list">
                                                                         
                  <div id="js_profile_qrcode" class="profile_container" style="display:none;">
                      <span class="profile_arrow_wrp" id="js_profile_arrow_wrp">
                          <i class="profile_arrow arrow_out"></i>
                          <i class="profile_arrow arrow_in"></i>
                      </span>
                  </div>
                </span>

            </div>
            
            
            
            
                                            
                                                            
                            
            
            <div class="rich_media_content " id="js_content">
                

                

                
                
                <p style="max-width: 100%;min-height: 1em;color: rgb(51, 51, 51);text-align: center;"><span style="max-width: 100%;color: rgb(255, 41, 65);font-size: 14px;line-height: 22.4px;box-sizing: border-box !important;word-wrap: break-word !important;"></span><span class="" style="orphans: 2;text-align: center;widows: 2;font-family: -apple-system-font, system-ui, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei UI&quot;, &quot;Microsoft YaHei&quot;, Arial, sans-serif;letter-spacing: 0.544px;max-width: 100%;white-space: pre-wrap;font-size: 14px;color: rgb(255, 41, 65);line-height: 22.4px;box-sizing: border-box !important;overflow-wrap: break-word !important;"></span><span style="orphans: 2;text-align: center;widows: 2;font-family: -apple-system-font, system-ui, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei UI&quot;, &quot;Microsoft YaHei&quot;, Arial, sans-serif;letter-spacing: 0.544px;max-width: 100%;white-space: pre-wrap;font-size: 14px;line-height: 22.4px;color: rgb(0, 128, 255);box-sizing: border-box !important;overflow-wrap: break-word !important;"></span><span class="" style="orphans: 2;text-align: center;widows: 2;font-family: -apple-system-font, system-ui, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei UI&quot;, &quot;Microsoft YaHei&quot;, Arial, sans-serif;letter-spacing: 0.544px;max-width: 100%;white-space: pre-wrap;font-size: 14px;color: rgb(255, 41, 65);line-height: 22.4px;box-sizing: border-box !important;overflow-wrap: break-word !important;"></span><span class="" style="orphans: 2;text-align: center;widows: 2;font-family: -apple-system-font, system-ui, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei UI&quot;, &quot;Microsoft YaHei&quot;, Arial, sans-serif;letter-spacing: 0.544px;max-width: 100%;white-space: pre-wrap;color: rgb(255, 41, 65);font-size: 14px;line-height: 22.4px;box-sizing: border-box !important;overflow-wrap: break-word !important;"></span></p><blockquote style="white-space: normal;font-variant-ligatures: normal;orphans: 2;widows: 2;"><p><span style="font-size: 14px;"></span></p></blockquote><p><strong><span style="font-size: 15px;color: rgb(51, 51, 51);">前言</span></strong><span style="font-size: 15px;color: rgb(51, 51, 51);"></span><br></p><p style="margin-top: 1.5em;margin-bottom: 1.5em;max-width: 100%;box-sizing: border-box;min-height: 1em;letter-spacing: 0.544px;white-space: normal;font-size: 16px;color: rgb(62, 62, 62);line-height: inherit;font-family: &quot;Helvetica Neue&quot;, Helvetica, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, Arial, sans-serif;text-align: start;background-color: rgb(255, 255, 255);overflow-wrap: break-word !important;"><span style="font-size: 15px;">面向对象编程很重要的一个方面,就是对象的继承。<strong style="max-width: 100%;box-sizing: border-box;color: inherit;font-size: inherit;line-height: inherit;overflow-wrap: break-word !important;">A 对象通过继承 B 对象,就能直接拥有 B 对象的所有属性和方法</strong>。这对于代码的复用是非常有用的。</span></p><p style="margin-top: 1.5em;margin-bottom: 1.5em;max-width: 100%;box-sizing: border-box;min-height: 1em;letter-spacing: 0.544px;white-space: normal;font-size: 16px;color: rgb(62, 62, 62);line-height: inherit;font-family: &quot;Helvetica Neue&quot;, Helvetica, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, Arial, sans-serif;text-align: start;background-color: rgb(255, 255, 255);overflow-wrap: break-word !important;"><span style="font-size: 15px;">大部分面向对象的编程语言,都是通过“类”(class)实现对象的继承。传统上,JavaScript 语言的继承不通过 class(ES6 引入了class 语法),而是通过“原型对象”(prototype)实现。那么在JS中常见的继承方式有几种呢?</span></p><p style="margin-top: 1.5em;margin-bottom: 1.5em;max-width: 100%;box-sizing: border-box;min-height: 1em;letter-spacing: 0.544px;white-space: normal;font-size: 16px;color: rgb(62, 62, 62);line-height: inherit;font-family: &quot;Helvetica Neue&quot;, Helvetica, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, Arial, sans-serif;text-align: start;background-color: rgb(255, 255, 255);overflow-wrap: break-word !important;"></p><p style="margin-top: 1.5em;margin-bottom: 1.5em;max-width: 100%;box-sizing: border-box;min-height: 1em;letter-spacing: 0.544px;white-space: normal;font-size: 16px;color: rgb(62, 62, 62);line-height: inherit;font-family: &quot;Helvetica Neue&quot;, Helvetica, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, Arial, sans-serif;text-align: start;background-color: rgb(255, 255, 255);overflow-wrap: break-word !important;"></p><h2 style="margin-top: 1.5em;margin-bottom: 1.5em;font-weight: bold;font-size: 1.4em;max-width: 100%;box-sizing: border-box;letter-spacing: 0.544px;white-space: normal;color: rgb(62, 62, 62);line-height: inherit;font-family: &quot;Helvetica Neue&quot;, Helvetica, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, Arial, sans-serif;text-align: start;background-color: rgb(255, 255, 255);overflow-wrap: break-word !important;"><span style="max-width: 100%;box-sizing: border-box;color: inherit;line-height: inherit;font-size: 15px;overflow-wrap: break-word !important;">方式一、原型链继承</span></h2><p style="margin-top: 1.5em;margin-bottom: 1.5em;max-width: 100%;box-sizing: border-box;min-height: 1em;letter-spacing: 0.544px;white-space: normal;font-size: 16px;color: rgb(62, 62, 62);line-height: inherit;font-family: &quot;Helvetica Neue&quot;, Helvetica, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, Arial, sans-serif;text-align: start;background-color: rgb(255, 255, 255);overflow-wrap: break-word !important;"><span style="font-size: 15px;">这种方式关键在于:<strong style="max-width: 100%;box-sizing: border-box;color: inherit;font-size: inherit;line-height: inherit;overflow-wrap: break-word !important;">子类型的原型为父类型的一个实例对象。</strong></span></p><pre style="max-width: 100%;box-sizing: border-box;letter-spacing: 0.544px;font-size: 16px;color: rgb(62, 62, 62);line-height: inherit;text-align: start;background-color: rgb(255, 255, 255);overflow-wrap: break-word !important;"><code class="" style="margin-right: 2px;margin-left: 2px;padding: 0.5em;max-width: 100%;box-sizing: border-box;font-size: 14px;color: rgb(169, 183, 198);line-height: 18px;border-radius: 0px;background: rgb(40, 43, 46);font-family: Consolas, Inconsolata, Courier, monospace;display: block;overflow-x: auto;letter-spacing: 0px;overflow-wrap: normal !important;word-break: normal !important;overflow-y: auto !important;">&nbsp;&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(128, 128, 128);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">//父类型</span><br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">&nbsp;&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;"><span class="" style="max-width: 100%;overflow-wrap: inherit !important;word-break: inherit !important;">function</span>&nbsp;<span class="" style="max-width: 100%;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">Person</span>(<span class="" style="max-width: 100%;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">name,&nbsp;age</span>)&nbsp;</span>{<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">&nbsp;&nbsp;&nbsp;&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">this</span>.name&nbsp;=&nbsp;name,<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">&nbsp;&nbsp;&nbsp;&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">this</span>.age&nbsp;=&nbsp;age,<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">&nbsp;&nbsp;&nbsp;&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">this</span>.play&nbsp;=&nbsp;[<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(174, 135, 250);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">1</span>,&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(174, 135, 250);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">2</span>,&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(174, 135, 250);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">3</span>]<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">&nbsp;&nbsp;&nbsp;&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">this</span>.setName&nbsp;=&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;"><span class="" style="max-width: 100%;overflow-wrap: inherit !important;word-break: inherit !important;">function</span>&nbsp;()&nbsp;</span>{}<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">&nbsp;&nbsp;}<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">&nbsp;&nbsp;Person.prototype.setAge&nbsp;=&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;"><span class="" style="max-width: 100%;overflow-wrap: inherit !important;word-break: inherit !important;">function</span>&nbsp;()&nbsp;</span>{}<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">&nbsp;&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(128, 128, 128);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">//子类型</span><br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">&nbsp;&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;"><span class="" style="max-width: 100%;overflow-wrap: inherit !important;word-break: inherit !important;">function</span>&nbsp;<span class="" style="max-width: 100%;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">Student</span>(<span class="" style="max-width: 100%;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">price</span>)&nbsp;</span>{<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">&nbsp;&nbsp;&nbsp;&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">this</span>.price&nbsp;=&nbsp;price<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">&nbsp;&nbsp;&nbsp;&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">this</span>.setScore&nbsp;=&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;"><span class="" style="max-width: 100%;overflow-wrap: inherit !important;word-break: inherit !important;">function</span>&nbsp;()&nbsp;</span>{}<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">&nbsp;&nbsp;}<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">&nbsp;&nbsp;Student.prototype&nbsp;=&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">new</span>&nbsp;Person()&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(128, 128, 128);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">//&nbsp;子类型的原型为父类型的一个实例对象</span><br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">&nbsp;&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">var</span>&nbsp;s1&nbsp;=&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">new</span>&nbsp;Student(<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(174, 135, 250);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">15000</span>)<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">&nbsp;&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">var</span>&nbsp;s2&nbsp;=&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">new</span>&nbsp;Student(<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(174, 135, 250);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">14000</span>)<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">&nbsp;&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">console</span>.log(s1,s2)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;"></code></pre><figure style="max-width: 100%;box-sizing: border-box;letter-spacing: 0.544px;white-space: normal;font-size: 16px;color: rgb(62, 62, 62);line-height: inherit;font-family: &quot;Helvetica Neue&quot;, Helvetica, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, Arial, sans-serif;text-align: start;background-color: rgb(255, 255, 255);overflow-wrap: break-word !important;"><img class="" data-ratio="0.25940996948118006" data-type="png" data-w="983" title="" data-src="https://mmbiz.qpic.cn/mmbiz_png/zewrLkrYfsNPh34HhyGRHGhZAZQaFulibP3gVIoWia2F6glicsk56JRqmT6KicypmHyDBic9oT2AORoAMWmCSkpcljw/640?wx_fmt=png" style="margin-right: auto; margin-left: auto; box-sizing: border-box; border-width: 2px; border-style: solid; border-color: rgb(238, 238, 238); border-radius: 6px; font-size: inherit; color: inherit; line-height: inherit; display: block; overflow-wrap: break-word !important; visibility: visible !important; width: 677px !important; height: auto !important;" _width="677px" src="https://mmbiz.qpic.cn/mmbiz_png/zewrLkrYfsNPh34HhyGRHGhZAZQaFulibP3gVIoWia2F6glicsk56JRqmT6KicypmHyDBic9oT2AORoAMWmCSkpcljw/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" crossorigin="anonymous" data-fail="0"></figure><p style="max-width: 100%;min-height: 1em;font-family: -apple-system-font, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei UI&quot;, &quot;Microsoft YaHei&quot;, Arial, sans-serif;letter-spacing: 0.544px;white-space: normal;background-color: rgb(255, 255, 255);box-sizing: border-box !important;overflow-wrap: break-word !important;"><br style="max-width: 100%;box-sizing: border-box;font-size: 16px;color: rgb(62, 62, 62);line-height: inherit;font-family: &quot;Helvetica Neue&quot;, Helvetica, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, Arial, sans-serif;text-align: start;overflow-wrap: break-word !important;"><span style="font-size: 15px;"><span style="max-width: 100%;color: rgb(62, 62, 62);font-family: &quot;Helvetica Neue&quot;, Helvetica, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, Arial, sans-serif;text-align: start;box-sizing: border-box !important;overflow-wrap: break-word !important;">但这种方式实现的本质是通过将子类的原型指向了父类的实例,所以</span><strong style="max-width: 100%;box-sizing: border-box;color: rgb(62, 62, 62);font-size: 16px;line-height: inherit;font-family: &quot;Helvetica Neue&quot;, Helvetica, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, Arial, sans-serif;text-align: start;overflow-wrap: break-word !important;">子类的实例就可以通过<strong style="max-width: 100%;box-sizing: border-box;color: inherit;font-size: inherit;line-height: inherit;overflow-wrap: break-word !important;">proto__访问到 Student.prototype 也就是Person的实例,这样就可以访问到父类的私有方法,然后再通过__proto</strong>指向父类的prototype就可以获得到父类原型上的方法</strong><span style="max-width: 100%;color: rgb(62, 62, 62);font-family: &quot;Helvetica Neue&quot;, Helvetica, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, Arial, sans-serif;text-align: start;box-sizing: border-box !important;overflow-wrap: break-word !important;">。于是做到了将父类的私有、公有方法和属性都当做子类的公有属性</span></span></p><p style="margin-top: 1.5em;margin-bottom: 1.5em;max-width: 100%;box-sizing: border-box;min-height: 1em;letter-spacing: 0.544px;white-space: normal;font-size: 16px;color: rgb(62, 62, 62);line-height: inherit;font-family: &quot;Helvetica Neue&quot;, Helvetica, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, Arial, sans-serif;text-align: start;background-color: rgb(255, 255, 255);overflow-wrap: break-word !important;"><span style="font-size: 15px;"><strong style="max-width: 100%;box-sizing: border-box;color: inherit;font-size: inherit;line-height: inherit;overflow-wrap: break-word !important;">子类继承父类的属性和方法是将父类的私有属性和公有方法都作为自己的公有属性和方法</strong>,我们都知道在操作基本数据类型的时候操作的是值,在操作引用数据类型的时候操作的是地址,如果说父类的私有属性中有引用类型的属性,那它被子类继承的时候会作为公有属性,这样子类1操作这个属性的时候,就会影响到子类2。</span></p><pre style="max-width: 100%;box-sizing: border-box;letter-spacing: 0.544px;font-size: 16px;color: rgb(62, 62, 62);line-height: inherit;text-align: start;background-color: rgb(255, 255, 255);overflow-wrap: break-word !important;"><code class="" style="margin-right: 2px;margin-left: 2px;padding: 0.5em;max-width: 100%;box-sizing: border-box;font-size: 14px;color: rgb(169, 183, 198);line-height: 18px;border-radius: 0px;background: rgb(40, 43, 46);font-family: Consolas, Inconsolata, Courier, monospace;display: block;overflow-x: auto;letter-spacing: 0px;overflow-wrap: normal !important;word-break: normal !important;overflow-y: auto !important;">s1.play.push(4)<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">console.log(s1.play,&nbsp;s2.play)<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">console.log(s1.<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;font-weight: bold;overflow-wrap: inherit !important;word-break: inherit !important;">__proto__</span>&nbsp;===&nbsp;s2.<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;font-weight: bold;overflow-wrap: inherit !important;word-break: inherit !important;">__proto__</span>)//true<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">console.log(s1.<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;font-weight: bold;overflow-wrap: inherit !important;word-break: inherit !important;">__proto__</span>.<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;font-weight: bold;overflow-wrap: inherit !important;word-break: inherit !important;">__proto__</span>&nbsp;===&nbsp;s2.<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;font-weight: bold;overflow-wrap: inherit !important;word-break: inherit !important;">__proto__</span>.<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;font-weight: bold;overflow-wrap: inherit !important;word-break: inherit !important;">__proto__</span>)//true&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;"></code></pre><figure style="max-width: 100%;box-sizing: border-box;letter-spacing: 0.544px;white-space: normal;font-size: 16px;color: rgb(62, 62, 62);line-height: inherit;font-family: &quot;Helvetica Neue&quot;, Helvetica, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, Arial, sans-serif;text-align: start;background-color: rgb(255, 255, 255);overflow-wrap: break-word !important;"><img class="" data-ratio="0.1720183486238532" data-type="png" data-w="872" title="" data-src="https://mmbiz.qpic.cn/mmbiz_png/zewrLkrYfsNPh34HhyGRHGhZAZQaFulibH8zzpLVhB5Y7h4fe2b4Ox2HsVXx7ibkN54fu9cY7BI97rkEcB4XYKFw/640?wx_fmt=png" style="margin-right: auto; margin-left: auto; box-sizing: border-box; background-color: rgb(238, 237, 235); border-width: 2px; border-style: solid; border-color: rgb(238, 238, 238); background-size: 22px; background-position: center center; background-repeat: no-repeat; border-radius: 6px; font-size: inherit; color: inherit; line-height: inherit; display: block; overflow-wrap: break-word !important; width: 677px !important; height: auto !important; visibility: visible !important;" _width="677px" src="https://mmbiz.qpic.cn/mmbiz_png/zewrLkrYfsNPh34HhyGRHGhZAZQaFulibH8zzpLVhB5Y7h4fe2b4Ox2HsVXx7ibkN54fu9cY7BI97rkEcB4XYKFw/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" crossorigin="anonymous" data-fail="0"></figure><p style="max-width: 100%;min-height: 1em;font-family: -apple-system-font, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei UI&quot;, &quot;Microsoft YaHei&quot;, Arial, sans-serif;letter-spacing: 0.544px;white-space: normal;background-color: rgb(255, 255, 255);box-sizing: border-box !important;overflow-wrap: break-word !important;"><br style="max-width: 100%;box-sizing: border-box;font-size: 16px;color: rgb(62, 62, 62);line-height: inherit;font-family: &quot;Helvetica Neue&quot;, Helvetica, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, Arial, sans-serif;text-align: start;overflow-wrap: break-word !important;"><span style="max-width: 100%;color: rgb(62, 62, 62);font-family: &quot;Helvetica Neue&quot;, Helvetica, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, Arial, sans-serif;text-align: start;font-size: 15px;box-sizing: border-box !important;overflow-wrap: break-word !important;">s1中play属性发生变化,与此同时,s2中play属性也会跟着变化。</span></p><p style="margin-top: 1.5em;margin-bottom: 1.5em;max-width: 100%;box-sizing: border-box;min-height: 1em;letter-spacing: 0.544px;white-space: normal;font-size: 16px;color: rgb(62, 62, 62);line-height: inherit;font-family: &quot;Helvetica Neue&quot;, Helvetica, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, Arial, sans-serif;text-align: start;background-color: rgb(255, 255, 255);overflow-wrap: break-word !important;"><span style="font-size: 15px;">另外注意一点的是,<strong style="max-width: 100%;box-sizing: border-box;color: inherit;font-size: inherit;line-height: inherit;overflow-wrap: break-word !important;">我们需要在子类中添加新的方法或者是重写父类的方法时候,切记一定要放到替换原型的语句之后</strong></span></p><pre style="max-width: 100%;box-sizing: border-box;letter-spacing: 0.544px;font-size: 16px;color: rgb(62, 62, 62);line-height: inherit;text-align: start;background-color: rgb(255, 255, 255);overflow-wrap: break-word !important;"><code class="" style="margin-right: 2px;margin-left: 2px;padding: 0.5em;max-width: 100%;box-sizing: border-box;font-size: 14px;color: rgb(169, 183, 198);line-height: 18px;border-radius: 0px;background: rgb(40, 43, 46);font-family: Consolas, Inconsolata, Courier, monospace;display: block;overflow-x: auto;letter-spacing: 0px;overflow-wrap: normal !important;word-break: normal !important;overflow-y: auto !important;"><span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;"><span class="" style="max-width: 100%;overflow-wrap: inherit !important;word-break: inherit !important;">function</span>&nbsp;<span class="" style="max-width: 100%;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">Person</span>&nbsp;(<span class="" style="max-width: 100%;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">name,&nbsp;age</span>)&nbsp;</span>{<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">&nbsp;&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">this</span>.name&nbsp;=&nbsp;name,<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">&nbsp;&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">this</span>.age&nbsp;=&nbsp;age<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">}<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">Person.prototype.setAge&nbsp;=&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;"><span class="" style="max-width: 100%;overflow-wrap: inherit !important;word-break: inherit !important;">function</span>&nbsp;()&nbsp;</span>{<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">&nbsp;&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">console</span>.log(<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(238, 220, 112);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">"111"</span>)<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">}<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;"><span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;"><span class="" style="max-width: 100%;overflow-wrap: inherit !important;word-break: inherit !important;">function</span>&nbsp;<span class="" style="max-width: 100%;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">Student</span>&nbsp;(<span class="" style="max-width: 100%;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">price</span>)&nbsp;</span>{<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">&nbsp;&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">this</span>.price&nbsp;=&nbsp;price<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">&nbsp;&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">this</span>.setScore&nbsp;=&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;"><span class="" style="max-width: 100%;overflow-wrap: inherit !important;word-break: inherit !important;">function</span>&nbsp;()&nbsp;</span>{&nbsp;}<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">}<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;"><span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(128, 128, 128);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">//&nbsp;Student.prototype.sayHello&nbsp;=&nbsp;function&nbsp;()&nbsp;{&nbsp;}//在这里写子类的原型方法和属性是无效的,</span><br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;"><span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(128, 128, 128);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">//因为会改变原型的指向,所以应该放到重新指定之后</span><br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">Student.prototype&nbsp;=&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">new</span>&nbsp;Person()<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">Student.prototype.sayHello&nbsp;=&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;"><span class="" style="max-width: 100%;overflow-wrap: inherit !important;word-break: inherit !important;">function</span>&nbsp;()&nbsp;</span>{&nbsp;}<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;"><span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">var</span>&nbsp;s1&nbsp;=&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">new</span>&nbsp;Student(<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(174, 135, 250);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">15000</span>)<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;"><span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">console</span>.log(s1)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;"></code></pre><p style="margin-top: 1.5em;margin-bottom: 1.5em;max-width: 100%;box-sizing: border-box;min-height: 1em;letter-spacing: 0.544px;white-space: normal;font-size: 16px;color: rgb(62, 62, 62);line-height: inherit;font-family: &quot;Helvetica Neue&quot;, Helvetica, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, Arial, sans-serif;text-align: start;background-color: rgb(255, 255, 255);overflow-wrap: break-word !important;"><span style="font-size: 15px;"><strong style="max-width: 100%;box-sizing: border-box;color: inherit;font-size: inherit;line-height: inherit;overflow-wrap: break-word !important;">特点</strong>:</span></p><ul class="list-paddingleft-2" style=""><li><p style="max-width: 100%;min-height: 1em;box-sizing: border-box !important;overflow-wrap: break-word !important;"><span style="max-width: 100%;box-sizing: border-box;color: inherit;line-height: inherit;font-size: 15px;overflow-wrap: break-word !important;">父类新增原型方法/原型属性,子类都能访问到</span></p></li><li><p style="max-width: 100%;min-height: 1em;box-sizing: border-box !important;overflow-wrap: break-word !important;"><span style="max-width: 100%;box-sizing: border-box;color: inherit;line-height: inherit;font-size: 15px;overflow-wrap: break-word !important;">简单,易于实现</span></p></li></ul><p style="margin-top: 1.5em;margin-bottom: 1.5em;max-width: 100%;box-sizing: border-box;min-height: 1em;letter-spacing: 0.544px;white-space: normal;font-size: 16px;color: rgb(62, 62, 62);line-height: inherit;font-family: &quot;Helvetica Neue&quot;, Helvetica, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, Arial, sans-serif;text-align: start;background-color: rgb(255, 255, 255);overflow-wrap: break-word !important;"><span style="font-size: 15px;"><strong style="max-width: 100%;box-sizing: border-box;color: inherit;font-size: inherit;line-height: inherit;overflow-wrap: break-word !important;">缺点</strong>:</span></p><ul class="list-paddingleft-2" style=""><li><p style="max-width: 100%;min-height: 1em;box-sizing: border-box !important;overflow-wrap: break-word !important;"><span style="max-width: 100%;box-sizing: border-box;color: inherit;line-height: inherit;font-size: 15px;overflow-wrap: break-word !important;">无法实现多继承</span></p></li><li><p style="max-width: 100%;min-height: 1em;box-sizing: border-box !important;overflow-wrap: break-word !important;"><span style="max-width: 100%;box-sizing: border-box;color: inherit;line-height: inherit;font-size: 15px;overflow-wrap: break-word !important;">来自原型对象的所有属性被所有实例共享</span></p></li><li><p style="max-width: 100%;min-height: 1em;box-sizing: border-box !important;overflow-wrap: break-word !important;"><span style="max-width: 100%;box-sizing: border-box;color: inherit;line-height: inherit;font-size: 15px;overflow-wrap: break-word !important;">创建子类实例时,无法向父类构造函数传参</span></p></li><li><p style="max-width: 100%;min-height: 1em;box-sizing: border-box !important;overflow-wrap: break-word !important;"><span style="font-size: 15px;">要想为子类新增属性和方法,必须要在</span><code style="margin-right: 2px;margin-left: 2px;padding: 2px 4px;max-width: 100%;box-sizing: border-box;overflow-wrap: break-word;font-size: inherit;color: rgb(233, 105, 0);line-height: inherit;border-radius: 4px;background: rgb(248, 248, 248);"><span style="font-size: 15px;">Student.prototype = new Person()</span></code><span style="font-size: 15px;">&nbsp;之后执行,不能放到构造器中</span></p></li></ul><h2 style="margin-top: 1.5em;margin-bottom: 1.5em;font-weight: bold;font-size: 1.4em;max-width: 100%;box-sizing: border-box;letter-spacing: 0.544px;white-space: normal;color: rgb(62, 62, 62);line-height: inherit;font-family: &quot;Helvetica Neue&quot;, Helvetica, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, Arial, sans-serif;text-align: start;background-color: rgb(255, 255, 255);overflow-wrap: break-word !important;"><span style="max-width: 100%;box-sizing: border-box;color: inherit;line-height: inherit;font-size: 15px;overflow-wrap: break-word !important;">方式二: 借用构造函数继承</span></h2><p style="margin-top: 1.5em;margin-bottom: 1.5em;max-width: 100%;box-sizing: border-box;min-height: 1em;letter-spacing: 0.544px;white-space: normal;font-size: 16px;color: rgb(62, 62, 62);line-height: inherit;font-family: &quot;Helvetica Neue&quot;, Helvetica, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, Arial, sans-serif;text-align: start;background-color: rgb(255, 255, 255);overflow-wrap: break-word !important;"><span style="font-size: 15px;">这种方式关键在于:<strong style="max-width: 100%;box-sizing: border-box;color: inherit;font-size: inherit;line-height: inherit;overflow-wrap: break-word !important;">在子类型构造函数中通用call()调用父类型构造函数</strong></span></p><pre style="max-width: 100%;box-sizing: border-box;letter-spacing: 0.544px;font-size: 16px;color: rgb(62, 62, 62);line-height: inherit;text-align: start;background-color: rgb(255, 255, 255);overflow-wrap: break-word !important;"><code class="" style="margin-right: 2px;margin-left: 2px;padding: 0.5em;max-width: 100%;box-sizing: border-box;font-size: 14px;color: rgb(169, 183, 198);line-height: 18px;border-radius: 0px;background: rgb(40, 43, 46);font-family: Consolas, Inconsolata, Courier, monospace;display: block;overflow-x: auto;letter-spacing: 0px;overflow-wrap: normal !important;word-break: normal !important;overflow-y: auto !important;">&nbsp;&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;"><span class="" style="max-width: 100%;overflow-wrap: inherit !important;word-break: inherit !important;">function</span>&nbsp;<span class="" style="max-width: 100%;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">Person</span>(<span class="" style="max-width: 100%;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">name,&nbsp;age</span>)&nbsp;</span>{<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">&nbsp;&nbsp;&nbsp;&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">this</span>.name&nbsp;=&nbsp;name,<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">&nbsp;&nbsp;&nbsp;&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">this</span>.age&nbsp;=&nbsp;age,<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">&nbsp;&nbsp;&nbsp;&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">this</span>.setName&nbsp;=&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;"><span class="" style="max-width: 100%;overflow-wrap: inherit !important;word-break: inherit !important;">function</span>&nbsp;()&nbsp;</span>{}<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">&nbsp;&nbsp;}<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">&nbsp;&nbsp;Person.prototype.setAge&nbsp;=&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;"><span class="" style="max-width: 100%;overflow-wrap: inherit !important;word-break: inherit !important;">function</span>&nbsp;()&nbsp;</span>{}<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">&nbsp;&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;"><span class="" style="max-width: 100%;overflow-wrap: inherit !important;word-break: inherit !important;">function</span>&nbsp;<span class="" style="max-width: 100%;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">Student</span>(<span class="" style="max-width: 100%;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">name,&nbsp;age,&nbsp;price</span>)&nbsp;</span>{<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">&nbsp;&nbsp;&nbsp;&nbsp;Person.call(<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">this</span>,&nbsp;name,&nbsp;age)&nbsp;&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(128, 128, 128);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">//&nbsp;相当于:&nbsp;this.Person(name,&nbsp;age)</span><br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">&nbsp;&nbsp;&nbsp;&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(128, 128, 128);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">/*this.name&nbsp;=&nbsp;name<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">&nbsp;&nbsp;&nbsp;&nbsp;this.age&nbsp;=&nbsp;age*/</span><br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">&nbsp;&nbsp;&nbsp;&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">this</span>.price&nbsp;=&nbsp;price<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">&nbsp;&nbsp;}<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">&nbsp;&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">var</span>&nbsp;s1&nbsp;=&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">new</span>&nbsp;Student(<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(238, 220, 112);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">\'Tom\'</span>,&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(174, 135, 250);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">20</span>,&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(174, 135, 250);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">15000</span>)<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;"></code></pre><figure style="max-width: 100%;box-sizing: border-box;letter-spacing: 0.544px;white-space: normal;font-size: 16px;color: rgb(62, 62, 62);line-height: inherit;font-family: &quot;Helvetica Neue&quot;, Helvetica, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, Arial, sans-serif;text-align: start;background-color: rgb(255, 255, 255);overflow-wrap: break-word !important;"><img class="" data-ratio="0.13186813186813187" data-type="png" data-w="1001" title="" data-src="https://mmbiz.qpic.cn/mmbiz_png/zewrLkrYfsNPh34HhyGRHGhZAZQaFulibEK73JMMD8AoAu5WWxCsHTfIWJBFewwoKT3598ybOTNMPHsL6Hjk79A/640?wx_fmt=png" style="margin-right: auto; margin-left: auto; box-sizing: border-box; background-color: rgb(238, 237, 235); border-width: 2px; border-style: solid; border-color: rgb(238, 238, 238); background-size: 22px; background-position: center center; background-repeat: no-repeat; border-radius: 6px; font-size: inherit; color: inherit; line-height: inherit; display: block; overflow-wrap: break-word !important; width: 677px !important; height: auto !important; visibility: visible !important;" _width="677px" src="https://mmbiz.qpic.cn/mmbiz_png/zewrLkrYfsNPh34HhyGRHGhZAZQaFulibEK73JMMD8AoAu5WWxCsHTfIWJBFewwoKT3598ybOTNMPHsL6Hjk79A/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" crossorigin="anonymous" data-fail="0"></figure><p style="max-width: 100%;min-height: 1em;font-family: -apple-system-font, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei UI&quot;, &quot;Microsoft YaHei&quot;, Arial, sans-serif;letter-spacing: 0.544px;white-space: normal;background-color: rgb(255, 255, 255);box-sizing: border-box !important;overflow-wrap: break-word !important;"><br style="max-width: 100%;box-sizing: border-box;font-size: 16px;color: rgb(62, 62, 62);line-height: inherit;font-family: &quot;Helvetica Neue&quot;, Helvetica, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, Arial, sans-serif;text-align: start;overflow-wrap: break-word !important;"><span style="max-width: 100%;color: rgb(62, 62, 62);font-family: &quot;Helvetica Neue&quot;, Helvetica, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, Arial, sans-serif;text-align: start;font-size: 15px;box-sizing: border-box !important;overflow-wrap: break-word !important;">这种方式只是实现部分的继承,如果父类的原型还有方法和属性,子类是拿不到这些方法和属性的。</span></p><p style="max-width: 100%;min-height: 1em;font-family: -apple-system-font, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei UI&quot;, &quot;Microsoft YaHei&quot;, Arial, sans-serif;letter-spacing: 0.544px;white-space: normal;background-color: rgb(255, 255, 255);box-sizing: border-box !important;overflow-wrap: break-word !important;"><br></p><pre style="max-width: 100%;box-sizing: border-box;letter-spacing: 0.544px;font-size: 16px;color: rgb(62, 62, 62);line-height: inherit;text-align: start;background-color: rgb(255, 255, 255);overflow-wrap: break-word !important;"><code class="" style="margin-right: 2px;margin-left: 2px;padding: 0.5em;max-width: 100%;box-sizing: border-box;font-size: 14px;color: rgb(169, 183, 198);line-height: 18px;border-radius: 0px;background: rgb(40, 43, 46);font-family: Consolas, Inconsolata, Courier, monospace;display: block;overflow-x: auto;letter-spacing: 0px;overflow-wrap: normal !important;word-break: normal !important;overflow-y: auto !important;"><span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">console</span>.log(s1.setAge())<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">//</span>Uncaught&nbsp;TypeError:&nbsp;s1.setAge&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">is</span>&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">not</span>&nbsp;a&nbsp;function<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;"></code></pre><p style="margin-top: 1.5em;margin-bottom: 1.5em;max-width: 100%;box-sizing: border-box;min-height: 1em;letter-spacing: 0.544px;white-space: normal;font-size: 16px;color: rgb(62, 62, 62);line-height: inherit;font-family: &quot;Helvetica Neue&quot;, Helvetica, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, Arial, sans-serif;text-align: start;background-color: rgb(255, 255, 255);overflow-wrap: break-word !important;"><span style="font-size: 15px;"><strong style="max-width: 100%;box-sizing: border-box;color: inherit;font-size: inherit;line-height: inherit;overflow-wrap: break-word !important;">特点</strong>:</span></p><ul class="list-paddingleft-2" style=""><li><p style="max-width: 100%;min-height: 1em;box-sizing: border-box !important;overflow-wrap: break-word !important;"><span style="max-width: 100%;box-sizing: border-box;color: inherit;line-height: inherit;font-size: 15px;overflow-wrap: break-word !important;">解决了原型链继承中子类实例共享父类引用属性的问题</span></p></li><li><p style="max-width: 100%;min-height: 1em;box-sizing: border-box !important;overflow-wrap: break-word !important;"><span style="max-width: 100%;box-sizing: border-box;color: inherit;line-height: inherit;font-size: 15px;overflow-wrap: break-word !important;">创建子类实例时,可以向父类传递参数</span></p></li><li><p style="max-width: 100%;min-height: 1em;box-sizing: border-box !important;overflow-wrap: break-word !important;"><span style="max-width: 100%;box-sizing: border-box;color: inherit;line-height: inherit;font-size: 15px;overflow-wrap: break-word !important;">可以实现多继承(call多个父类对象)</span></p></li></ul><p style="margin-top: 1.5em;margin-bottom: 1.5em;max-width: 100%;box-sizing: border-box;min-height: 1em;letter-spacing: 0.544px;white-space: normal;font-size: 16px;color: rgb(62, 62, 62);line-height: inherit;font-family: &quot;Helvetica Neue&quot;, Helvetica, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, Arial, sans-serif;text-align: start;background-color: rgb(255, 255, 255);overflow-wrap: break-word !important;"><span style="font-size: 15px;"><strong style="max-width: 100%;box-sizing: border-box;color: inherit;font-size: inherit;line-height: inherit;overflow-wrap: break-word !important;">缺点</strong>:</span></p><ul class="list-paddingleft-2" style=""><li><p style="max-width: 100%;min-height: 1em;box-sizing: border-box !important;overflow-wrap: break-word !important;"><span style="max-width: 100%;box-sizing: border-box;color: inherit;line-height: inherit;font-size: 15px;overflow-wrap: break-word !important;">实例并不是父类的实例,只是子类的实例</span></p></li><li><p style="max-width: 100%;min-height: 1em;box-sizing: border-box !important;overflow-wrap: break-word !important;"><span style="max-width: 100%;box-sizing: border-box;color: inherit;line-height: inherit;font-size: 15px;overflow-wrap: break-word !important;">只能继承父类的实例属性和方法,不能继承原型属性和方法</span></p></li><li><p style="max-width: 100%;min-height: 1em;box-sizing: border-box !important;overflow-wrap: break-word !important;"><span style="max-width: 100%;box-sizing: border-box;color: inherit;line-height: inherit;font-size: 15px;overflow-wrap: break-word !important;">无法实现函数复用,每个子类都有父类实例函数的副本,影响性能</span></p></li></ul><h2 style="margin-top: 1.5em;margin-bottom: 1.5em;font-weight: bold;font-size: 1.4em;max-width: 100%;box-sizing: border-box;letter-spacing: 0.544px;white-space: normal;color: rgb(62, 62, 62);line-height: inherit;font-family: &quot;Helvetica Neue&quot;, Helvetica, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, Arial, sans-serif;text-align: start;background-color: rgb(255, 255, 255);overflow-wrap: break-word !important;"><span style="max-width: 100%;box-sizing: border-box;color: inherit;line-height: inherit;font-size: 15px;overflow-wrap: break-word !important;">方式三: 原型链+借用构造函数的组合继承</span></h2><p style="margin-top: 1.5em;margin-bottom: 1.5em;max-width: 100%;box-sizing: border-box;min-height: 1em;letter-spacing: 0.544px;white-space: normal;font-size: 16px;color: rgb(62, 62, 62);line-height: inherit;font-family: &quot;Helvetica Neue&quot;, Helvetica, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, Arial, sans-serif;text-align: start;background-color: rgb(255, 255, 255);overflow-wrap: break-word !important;"><span style="font-size: 15px;">这种方式关键在于:<strong style="max-width: 100%;box-sizing: border-box;color: inherit;font-size: inherit;line-height: inherit;overflow-wrap: break-word !important;">通过调用父类构造,继承父类的属性并保留传参的优点,然后通过将父类实例作为子类原型,实现函数复用。</strong></span></p><pre style="max-width: 100%;box-sizing: border-box;letter-spacing: 0.544px;font-size: 16px;color: rgb(62, 62, 62);line-height: inherit;text-align: start;background-color: rgb(255, 255, 255);overflow-wrap: break-word !important;"><code class="" style="margin-right: 2px;margin-left: 2px;padding: 0.5em;max-width: 100%;box-sizing: border-box;font-size: 14px;color: rgb(169, 183, 198);line-height: 18px;border-radius: 0px;background: rgb(40, 43, 46);font-family: Consolas, Inconsolata, Courier, monospace;display: block;overflow-x: auto;letter-spacing: 0px;overflow-wrap: normal !important;word-break: normal !important;overflow-y: auto !important;"><span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;"><span class="" style="max-width: 100%;overflow-wrap: inherit !important;word-break: inherit !important;">function</span>&nbsp;<span class="" style="max-width: 100%;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">Person</span>&nbsp;(<span class="" style="max-width: 100%;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">name,&nbsp;age</span>)&nbsp;</span>{<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">&nbsp;&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">this</span>.name&nbsp;=&nbsp;name,<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">&nbsp;&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">this</span>.age&nbsp;=&nbsp;age,<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">&nbsp;&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">this</span>.setAge&nbsp;=&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;"><span class="" style="max-width: 100%;overflow-wrap: inherit !important;word-break: inherit !important;">function</span>&nbsp;()&nbsp;</span>{&nbsp;}<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">}<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">Person.prototype.setAge&nbsp;=&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;"><span class="" style="max-width: 100%;overflow-wrap: inherit !important;word-break: inherit !important;">function</span>&nbsp;()&nbsp;</span>{<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">&nbsp;&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">console</span>.log(<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(238, 220, 112);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">"111"</span>)<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">}<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;"><span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;"><span class="" style="max-width: 100%;overflow-wrap: inherit !important;word-break: inherit !important;">function</span>&nbsp;<span class="" style="max-width: 100%;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">Student</span>&nbsp;(<span class="" style="max-width: 100%;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">name,&nbsp;age,&nbsp;price</span>)&nbsp;</span>{<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">&nbsp;&nbsp;Person.call(<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">this</span>,&nbsp;name,&nbsp;age)<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">&nbsp;&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">this</span>.price&nbsp;=&nbsp;price<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">&nbsp;&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">this</span>.setScore&nbsp;=&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;"><span class="" style="max-width: 100%;overflow-wrap: inherit !important;word-break: inherit !important;">function</span>&nbsp;()&nbsp;</span>{&nbsp;}<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">}<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">Student.prototype&nbsp;=&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">new</span>&nbsp;Person()<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">Student.prototype.constructor&nbsp;=&nbsp;Student<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(128, 128, 128);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">//组合继承也是需要修复构造函数指向的</span><br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">Student.prototype.sayHello&nbsp;=&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;"><span class="" style="max-width: 100%;overflow-wrap: inherit !important;word-break: inherit !important;">function</span>&nbsp;()&nbsp;</span>{&nbsp;}<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;"><span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">var</span>&nbsp;s1&nbsp;=&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">new</span>&nbsp;Student(<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(238, 220, 112);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">\'Tom\'</span>,&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(174, 135, 250);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">20</span>,&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(174, 135, 250);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">15000</span>)<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;"><span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">var</span>&nbsp;s2&nbsp;=&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">new</span>&nbsp;Student(<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(238, 220, 112);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">\'Jack\'</span>,&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(174, 135, 250);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">22</span>,&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(174, 135, 250);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">14000</span>)<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;"><span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">console</span>.log(s1)<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;"><span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">console</span>.log(s1.constructor)&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(128, 128, 128);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">//Student</span><br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;"><span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">console</span>.log(p1.constructor)&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(128, 128, 128);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">//Person&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;"></code></pre><figure style="max-width: 100%;box-sizing: border-box;letter-spacing: 0.544px;white-space: normal;font-size: 16px;color: rgb(62, 62, 62);line-height: inherit;font-family: &quot;Helvetica Neue&quot;, Helvetica, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, Arial, sans-serif;text-align: start;background-color: rgb(255, 255, 255);overflow-wrap: break-word !important;"><img class="" data-ratio="0.31243680485338726" data-type="png" data-w="989" title="" data-src="https://mmbiz.qpic.cn/mmbiz_png/zewrLkrYfsNPh34HhyGRHGhZAZQaFulibgMDITZMwm4VLNq4y6Dz1T6M9PvnEMHwlVHWlelZ5whZiamslDL9dayQ/640?wx_fmt=png" style="margin-right: auto; margin-left: auto; box-sizing: border-box; background-color: rgb(238, 237, 235); border-width: 2px; border-style: solid; border-color: rgb(238, 238, 238); background-size: 22px; background-position: center center; background-repeat: no-repeat; border-radius: 6px; font-size: inherit; color: inherit; line-height: inherit; display: block; overflow-wrap: break-word !important; width: 677px !important; height: auto !important; visibility: visible !important;" _width="677px" src="https://mmbiz.qpic.cn/mmbiz_png/zewrLkrYfsNPh34HhyGRHGhZAZQaFulibgMDITZMwm4VLNq4y6Dz1T6M9PvnEMHwlVHWlelZ5whZiamslDL9dayQ/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" crossorigin="anonymous" data-fail="0"></figure><p style="max-width: 100%;min-height: 1em;font-family: -apple-system-font, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei UI&quot;, &quot;Microsoft YaHei&quot;, Arial, sans-serif;letter-spacing: 0.544px;white-space: normal;background-color: rgb(255, 255, 255);box-sizing: border-box !important;overflow-wrap: break-word !important;"><br style="max-width: 100%;box-sizing: border-box;font-size: 16px;color: rgb(62, 62, 62);line-height: inherit;font-family: &quot;Helvetica Neue&quot;, Helvetica, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, Arial, sans-serif;text-align: start;overflow-wrap: break-word !important;"><span style="max-width: 100%;color: rgb(62, 62, 62);font-family: &quot;Helvetica Neue&quot;, Helvetica, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, Arial, sans-serif;text-align: start;font-size: 15px;box-sizing: border-box !important;overflow-wrap: break-word !important;">这种方式融合原型链继承和构造函数的优点,是 JavaScript 中最常用的继承模式。不过也存在缺点就是无论在什么情况下,都会调用两次构造函数:一次是在创建子类型原型的时候,另一次是在子类型构造函数的内部,子类型最终会包含父类型对象的全部实例属性,但我们不得不在调用子类构造函数时重写这些属性。</span></p><p style="margin-top: 1.5em;margin-bottom: 1.5em;max-width: 100%;box-sizing: border-box;min-height: 1em;letter-spacing: 0.544px;white-space: normal;font-size: 16px;color: rgb(62, 62, 62);line-height: inherit;font-family: &quot;Helvetica Neue&quot;, Helvetica, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, Arial, sans-serif;text-align: start;background-color: rgb(255, 255, 255);overflow-wrap: break-word !important;"><span style="font-size: 15px;"><strong style="max-width: 100%;box-sizing: border-box;color: inherit;font-size: inherit;line-height: inherit;overflow-wrap: break-word !important;">优点</strong>:</span></p><ul class="list-paddingleft-2" style=""><li><p style="max-width: 100%;min-height: 1em;box-sizing: border-box !important;overflow-wrap: break-word !important;"><span style="max-width: 100%;box-sizing: border-box;color: inherit;line-height: inherit;font-size: 15px;overflow-wrap: break-word !important;">可以继承实例属性/方法,也可以继承原型属性/方法</span></p></li><li><p style="max-width: 100%;min-height: 1em;box-sizing: border-box !important;overflow-wrap: break-word !important;"><span style="max-width: 100%;box-sizing: border-box;color: inherit;line-height: inherit;font-size: 15px;overflow-wrap: break-word !important;">不存在引用属性共享问题</span></p></li><li><p style="max-width: 100%;min-height: 1em;box-sizing: border-box !important;overflow-wrap: break-word !important;"><span style="max-width: 100%;box-sizing: border-box;color: inherit;line-height: inherit;font-size: 15px;overflow-wrap: break-word !important;">可传参</span></p></li><li><p style="max-width: 100%;min-height: 1em;box-sizing: border-box !important;overflow-wrap: break-word !important;"><span style="max-width: 100%;box-sizing: border-box;color: inherit;line-height: inherit;font-size: 15px;overflow-wrap: break-word !important;">函数可复用</span></p></li></ul><p style="margin-top: 1.5em;margin-bottom: 1.5em;max-width: 100%;box-sizing: border-box;min-height: 1em;letter-spacing: 0.544px;white-space: normal;font-size: 16px;color: rgb(62, 62, 62);line-height: inherit;font-family: &quot;Helvetica Neue&quot;, Helvetica, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, Arial, sans-serif;text-align: start;background-color: rgb(255, 255, 255);overflow-wrap: break-word !important;"><span style="font-size: 15px;"><strong style="max-width: 100%;box-sizing: border-box;color: inherit;font-size: inherit;line-height: inherit;overflow-wrap: break-word !important;">缺点</strong>:</span><span style="max-width: 100%;color: inherit;font-family: -apple-system-font, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei UI&quot;, &quot;Microsoft YaHei&quot;, Arial, sans-serif;text-align: justify;font-size: 15px;box-sizing: border-box !important;overflow-wrap: break-word !important;">调用了两次父类构造函数,生成了两份实例</span></p><h2 style="margin-top: 1.5em;margin-bottom: 1.5em;font-weight: bold;font-size: 1.4em;max-width: 100%;box-sizing: border-box;letter-spacing: 0.544px;white-space: normal;color: rgb(62, 62, 62);line-height: inherit;font-family: &quot;Helvetica Neue&quot;, Helvetica, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, Arial, sans-serif;text-align: start;background-color: rgb(255, 255, 255);overflow-wrap: break-word !important;"><span style="max-width: 100%;box-sizing: border-box;color: inherit;line-height: inherit;font-size: 15px;overflow-wrap: break-word !important;">方式四: 组合继承优化1</span></h2><p style="margin-top: 1.5em;margin-bottom: 1.5em;max-width: 100%;box-sizing: border-box;min-height: 1em;letter-spacing: 0.544px;white-space: normal;font-size: 16px;color: rgb(62, 62, 62);line-height: inherit;font-family: &quot;Helvetica Neue&quot;, Helvetica, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, Arial, sans-serif;text-align: start;background-color: rgb(255, 255, 255);overflow-wrap: break-word !important;"><span style="font-size: 15px;"><strong style="max-width: 100%;box-sizing: border-box;color: inherit;font-size: inherit;line-height: inherit;overflow-wrap: break-word !important;">这种方式通过父类原型和子类原型指向同一对象,子类可以继承到父类的公有方法当做自己的公有方法,而且不会初始化两次实例方法/属性,避免的组合继承的缺点</strong>。</span></p><pre style="max-width: 100%;box-sizing: border-box;letter-spacing: 0.544px;font-size: 16px;color: rgb(62, 62, 62);line-height: inherit;text-align: start;background-color: rgb(255, 255, 255);overflow-wrap: break-word !important;"><code class="" style="margin-right: 2px;margin-left: 2px;padding: 0.5em;max-width: 100%;box-sizing: border-box;font-size: 14px;color: rgb(169, 183, 198);line-height: 18px;border-radius: 0px;background: rgb(40, 43, 46);font-family: Consolas, Inconsolata, Courier, monospace;display: block;overflow-x: auto;letter-spacing: 0px;overflow-wrap: normal !important;word-break: normal !important;overflow-y: auto !important;"><span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;"><span class="" style="max-width: 100%;overflow-wrap: inherit !important;word-break: inherit !important;">function</span>&nbsp;<span class="" style="max-width: 100%;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">Person</span>&nbsp;(<span class="" style="max-width: 100%;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">name,&nbsp;age</span>)&nbsp;</span>{<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">&nbsp;&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">this</span>.name&nbsp;=&nbsp;name,<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">&nbsp;&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">this</span>.age&nbsp;=&nbsp;age,<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">&nbsp;&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">this</span>.setAge&nbsp;=&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;"><span class="" style="max-width: 100%;overflow-wrap: inherit !important;word-break: inherit !important;">function</span>&nbsp;()&nbsp;</span>{&nbsp;}<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">}<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">Person.prototype.setAge&nbsp;=&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;"><span class="" style="max-width: 100%;overflow-wrap: inherit !important;word-break: inherit !important;">function</span>&nbsp;()&nbsp;</span>{<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">&nbsp;&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">console</span>.log(<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(238, 220, 112);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">"111"</span>)<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">}<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;"><span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;"><span class="" style="max-width: 100%;overflow-wrap: inherit !important;word-break: inherit !important;">function</span>&nbsp;<span class="" style="max-width: 100%;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">Student</span>&nbsp;(<span class="" style="max-width: 100%;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">name,&nbsp;age,&nbsp;price</span>)&nbsp;</span>{<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">&nbsp;&nbsp;Person.call(<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">this</span>,&nbsp;name,&nbsp;age)<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">&nbsp;&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">this</span>.price&nbsp;=&nbsp;price<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">&nbsp;&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">this</span>.setScore&nbsp;=&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;"><span class="" style="max-width: 100%;overflow-wrap: inherit !important;word-break: inherit !important;">function</span>&nbsp;()&nbsp;</span>{&nbsp;}<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">}<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">Student.prototype&nbsp;=&nbsp;Person.prototype<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">Student.prototype.sayHello&nbsp;=&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;"><span class="" style="max-width: 100%;overflow-wrap: inherit !important;word-break: inherit !important;">function</span>&nbsp;()&nbsp;</span>{&nbsp;}<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;"><span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">var</span>&nbsp;s1&nbsp;=&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">new</span>&nbsp;Student(<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(238, 220, 112);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">\'Tom\'</span>,&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(174, 135, 250);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">20</span>,&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(174, 135, 250);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">15000</span>)<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;"><span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">console</span>.log(s1)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;"></code></pre><figure style="max-width: 100%;box-sizing: border-box;letter-spacing: 0.544px;white-space: normal;font-size: 16px;color: rgb(62, 62, 62);line-height: inherit;font-family: &quot;Helvetica Neue&quot;, Helvetica, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, Arial, sans-serif;text-align: start;background-color: rgb(255, 255, 255);overflow-wrap: break-word !important;"><img class="" data-ratio="0.3071625344352617" data-type="png" data-w="726" title="" data-src="https://mmbiz.qpic.cn/mmbiz_png/zewrLkrYfsNPh34HhyGRHGhZAZQaFulibTaI0SdQmIvgtzzsgqJVqyfYLw2dsZrrSyQHiaBPfOBSsSdQOfZTtDKg/640?wx_fmt=png" style="margin-right: auto; margin-left: auto; box-sizing: border-box; background-color: rgb(238, 237, 235); border-width: 2px; border-style: solid; border-color: rgb(238, 238, 238); background-size: 22px; background-position: center center; background-repeat: no-repeat; border-radius: 6px; font-size: inherit; color: inherit; line-height: inherit; display: block; overflow-wrap: break-word !important; width: 677px !important; height: auto !important; visibility: visible !important;" _width="677px" src="https://mmbiz.qpic.cn/mmbiz_png/zewrLkrYfsNPh34HhyGRHGhZAZQaFulibTaI0SdQmIvgtzzsgqJVqyfYLw2dsZrrSyQHiaBPfOBSsSdQOfZTtDKg/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" crossorigin="anonymous" data-fail="0"></figure><p style="max-width: 100%;min-height: 1em;font-family: -apple-system-font, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei UI&quot;, &quot;Microsoft YaHei&quot;, Arial, sans-serif;letter-spacing: 0.544px;white-space: normal;background-color: rgb(255, 255, 255);box-sizing: border-box !important;overflow-wrap: break-word !important;"><br style="max-width: 100%;box-sizing: border-box;font-size: 16px;color: rgb(62, 62, 62);line-height: inherit;font-family: &quot;Helvetica Neue&quot;, Helvetica, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, Arial, sans-serif;text-align: start;overflow-wrap: break-word !important;"><span style="max-width: 100%;color: rgb(62, 62, 62);font-family: &quot;Helvetica Neue&quot;, Helvetica, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, Arial, sans-serif;text-align: start;font-size: 15px;box-sizing: border-box !important;overflow-wrap: break-word !important;">但这种方式没办法辨别是对象是子类还是父类实例化</span></p><p style="max-width: 100%;min-height: 1em;font-family: -apple-system-font, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei UI&quot;, &quot;Microsoft YaHei&quot;, Arial, sans-serif;letter-spacing: 0.544px;white-space: normal;background-color: rgb(255, 255, 255);box-sizing: border-box !important;overflow-wrap: break-word !important;"><br></p><pre style="max-width: 100%;box-sizing: border-box;letter-spacing: 0.544px;font-size: 16px;color: rgb(62, 62, 62);line-height: inherit;text-align: start;background-color: rgb(255, 255, 255);overflow-wrap: break-word !important;"><code class="" style="margin-right: 2px;margin-left: 2px;padding: 0.5em;max-width: 100%;box-sizing: border-box;font-size: 14px;color: rgb(169, 183, 198);line-height: 18px;border-radius: 0px;background: rgb(40, 43, 46);font-family: Consolas, Inconsolata, Courier, monospace;display: block;overflow-x: auto;letter-spacing: 0px;overflow-wrap: normal !important;word-break: normal !important;overflow-y: auto !important;"><span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">console</span>.log(s1&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">instanceof</span>&nbsp;Student,&nbsp;s1&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">instanceof</span>&nbsp;Person)<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">//</span><span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(174, 135, 250);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">true</span>&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(174, 135, 250);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">true</span><br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;"><span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">console</span>.log(s1.constructor)<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">//</span>Person<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;"></code></pre><p style="margin-top: 1.5em;margin-bottom: 1.5em;max-width: 100%;box-sizing: border-box;min-height: 1em;letter-spacing: 0.544px;white-space: normal;font-size: 16px;color: rgb(62, 62, 62);line-height: inherit;font-family: &quot;Helvetica Neue&quot;, Helvetica, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, Arial, sans-serif;text-align: start;background-color: rgb(255, 255, 255);overflow-wrap: break-word !important;"><span style="font-size: 15px;"><strong style="max-width: 100%;box-sizing: border-box;color: inherit;font-size: inherit;line-height: inherit;overflow-wrap: break-word !important;">优点</strong>:</span><span style="max-width: 100%;color: inherit;font-family: -apple-system-font, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei UI&quot;, &quot;Microsoft YaHei&quot;, Arial, sans-serif;text-align: justify;font-size: 15px;box-sizing: border-box !important;overflow-wrap: break-word !important;">不会初始化两次实例方法/属性,避免的组合继承的缺点</span></p><p style="margin-top: 1.5em;margin-bottom: 1.5em;max-width: 100%;box-sizing: border-box;min-height: 1em;letter-spacing: 0.544px;white-space: normal;font-size: 16px;color: rgb(62, 62, 62);line-height: inherit;font-family: &quot;Helvetica Neue&quot;, Helvetica, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, Arial, sans-serif;text-align: start;background-color: rgb(255, 255, 255);overflow-wrap: break-word !important;"><span style="font-size: 15px;"><strong style="max-width: 100%;box-sizing: border-box;color: inherit;font-size: inherit;line-height: inherit;overflow-wrap: break-word !important;">缺点</strong>:</span><span style="max-width: 100%;color: inherit;font-family: -apple-system-font, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei UI&quot;, &quot;Microsoft YaHei&quot;, Arial, sans-serif;text-align: justify;font-size: 15px;box-sizing: border-box !important;overflow-wrap: break-word !important;">没办法辨别是实例是子类还是父类创造的,子类和父类的构造函数指向是同一个。</span></p><h2 style="margin-top: 1.5em;margin-bottom: 1.5em;font-weight: bold;font-size: 1.4em;max-width: 100%;box-sizing: border-box;letter-spacing: 0.544px;white-space: normal;color: rgb(62, 62, 62);line-height: inherit;font-family: &quot;Helvetica Neue&quot;, Helvetica, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, Arial, sans-serif;text-align: start;background-color: rgb(255, 255, 255);overflow-wrap: break-word !important;"><span style="max-width: 100%;box-sizing: border-box;color: inherit;line-height: inherit;font-size: 15px;overflow-wrap: break-word !important;">方式五: 组合继承优化2</span></h2><p style="margin-top: 1.5em;margin-bottom: 1.5em;max-width: 100%;box-sizing: border-box;min-height: 1em;letter-spacing: 0.544px;white-space: normal;font-size: 16px;color: rgb(62, 62, 62);line-height: inherit;font-family: &quot;Helvetica Neue&quot;, Helvetica, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, Arial, sans-serif;text-align: start;background-color: rgb(255, 255, 255);overflow-wrap: break-word !important;"><span style="font-size: 15px;"><strong style="max-width: 100%;box-sizing: border-box;color: inherit;font-size: inherit;line-height: inherit;overflow-wrap: break-word !important;">借助原型可以基于已有的对象来创建对象,</strong><strong style="max-width: 100%;box-sizing: border-box;color: inherit;font-size: inherit;line-height: inherit;overflow-wrap: break-word !important;"><code style="margin-right: 2px;margin-left: 2px;padding: 2px 4px;max-width: 100%;box-sizing: border-box;overflow-wrap: break-word;font-size: inherit;color: rgb(233, 105, 0);line-height: inherit;border-radius: 4px;background: rgb(248, 248, 248);">var B = Object.create(A)</code>以A对象为原型,生成了B对象。B继承了A的所有属性和方法。</strong></span></p><pre style="max-width: 100%;box-sizing: border-box;letter-spacing: 0.544px;font-size: 16px;color: rgb(62, 62, 62);line-height: inherit;text-align: start;background-color: rgb(255, 255, 255);overflow-wrap: break-word !important;"><code class="" style="margin-right: 2px;margin-left: 2px;padding: 0.5em;max-width: 100%;box-sizing: border-box;font-size: 14px;color: rgb(169, 183, 198);line-height: 18px;border-radius: 0px;background: rgb(40, 43, 46);font-family: Consolas, Inconsolata, Courier, monospace;display: block;overflow-x: auto;letter-spacing: 0px;overflow-wrap: normal !important;word-break: normal !important;overflow-y: auto !important;"><span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;"><span class="" style="max-width: 100%;overflow-wrap: inherit !important;word-break: inherit !important;">function</span>&nbsp;<span class="" style="max-width: 100%;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">Person</span>&nbsp;(<span class="" style="max-width: 100%;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">name,&nbsp;age</span>)&nbsp;</span>{<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">&nbsp;&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">this</span>.name&nbsp;=&nbsp;name,<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">&nbsp;&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">this</span>.age&nbsp;=&nbsp;age<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">}<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">Person.prototype.setAge&nbsp;=&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;"><span class="" style="max-width: 100%;overflow-wrap: inherit !important;word-break: inherit !important;">function</span>&nbsp;()&nbsp;</span>{<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">&nbsp;&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">console</span>.log(<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(238, 220, 112);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">"111"</span>)<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">}<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;"><span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;"><span class="" style="max-width: 100%;overflow-wrap: inherit !important;word-break: inherit !important;">function</span>&nbsp;<span class="" style="max-width: 100%;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">Student</span>&nbsp;(<span class="" style="max-width: 100%;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">name,&nbsp;age,&nbsp;price</span>)&nbsp;</span>{<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">&nbsp;&nbsp;Person.call(<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">this</span>,&nbsp;name,&nbsp;age)<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">&nbsp;&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">this</span>.price&nbsp;=&nbsp;price<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">&nbsp;&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">this</span>.setScore&nbsp;=&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;"><span class="" style="max-width: 100%;overflow-wrap: inherit !important;word-break: inherit !important;">function</span>&nbsp;()&nbsp;</span>{&nbsp;}<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">}<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">Student.prototype&nbsp;=&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">Object</span>.create(Person.prototype)<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(128, 128, 128);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">//核心代码</span><br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">Student.prototype.constructor&nbsp;=&nbsp;Student<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(128, 128, 128);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">//核心代码</span><br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;"><span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">var</span>&nbsp;s1&nbsp;=&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">new</span>&nbsp;Student(<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(238, 220, 112);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">\'Tom\'</span>,&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(174, 135, 250);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">20</span>,&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(174, 135, 250);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">15000</span>)<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;"><span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">console</span>.log(s1&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">instanceof</span>&nbsp;Student,&nbsp;s1&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">instanceof</span>&nbsp;Person)&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(128, 128, 128);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">//&nbsp;true&nbsp;true</span><br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;"><span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">console</span>.log(s1.constructor)&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(128, 128, 128);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">//Student</span><br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;"><span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">console</span>.log(s1)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;"></code></pre><p style="margin-top: 1.5em;margin-bottom: 1.5em;max-width: 100%;box-sizing: border-box;min-height: 1em;letter-spacing: 0.544px;white-space: normal;font-size: 16px;color: rgb(62, 62, 62);line-height: inherit;font-family: &quot;Helvetica Neue&quot;, Helvetica, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, Arial, sans-serif;text-align: start;background-color: rgb(255, 255, 255);overflow-wrap: break-word !important;"><span style="font-size: 15px;">同样的,Student继承了所有的Person原型对象的属性和方法。目前来说,最完美的继承方法!</span><br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: break-word !important;"></p><figure style="max-width: 100%;box-sizing: border-box;letter-spacing: 0.544px;white-space: normal;font-size: 16px;color: rgb(62, 62, 62);line-height: inherit;font-family: &quot;Helvetica Neue&quot;, Helvetica, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, Arial, sans-serif;text-align: start;background-color: rgb(255, 255, 255);overflow-wrap: break-word !important;"><img class="img_loading" data-ratio="0.27994011976047906" data-type="png" data-w="668" title="" data-src="https://mmbiz.qpic.cn/mmbiz_png/zewrLkrYfsNPh34HhyGRHGhZAZQaFulibfibxpYCqOKichXDzgykwaDHRd8lic9sBlWTP8WktvC0sq0nJJpa8ics6xA/640?wx_fmt=png" style="margin-right: auto; margin-left: auto; box-sizing: border-box; background-color: rgb(238, 237, 235); border-width: 2px; border-style: solid; border-color: rgb(238, 238, 238); background-size: 22px; background-position: center center; background-repeat: no-repeat; border-radius: 6px; font-size: inherit; color: inherit; line-height: inherit; display: block; overflow-wrap: break-word !important; width: 668px !important; height: 189.88px !important;" _width="668px" src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==" crossorigin="anonymous"></figure><h2 style="margin-top: 1.5em;margin-bottom: 1.5em;font-weight: bold;font-size: 1.4em;max-width: 100%;box-sizing: border-box;letter-spacing: 0.544px;white-space: normal;color: rgb(62, 62, 62);line-height: inherit;font-family: &quot;Helvetica Neue&quot;, Helvetica, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, Arial, sans-serif;text-align: start;background-color: rgb(255, 255, 255);overflow-wrap: break-word !important;"><span style="max-width: 100%;box-sizing: border-box;color: inherit;line-height: inherit;font-size: 15px;overflow-wrap: break-word !important;">方式六:ES6中class 的继承</span></h2><p style="margin-top: 1.5em;margin-bottom: 1.5em;max-width: 100%;box-sizing: border-box;min-height: 1em;letter-spacing: 0.544px;white-space: normal;font-size: 16px;color: rgb(62, 62, 62);line-height: inherit;font-family: &quot;Helvetica Neue&quot;, Helvetica, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, Arial, sans-serif;text-align: start;background-color: rgb(255, 255, 255);overflow-wrap: break-word !important;"><span style="font-size: 15px;">ES6中引入了class关键字,class可以通过extends关键字实现继承,还可以通过static关键字定义类的静态方法,这比 ES5 的通过修改原型链实现继承,要清晰和方便很多。</span></p><p style="margin-top: 1.5em;margin-bottom: 1.5em;max-width: 100%;box-sizing: border-box;min-height: 1em;letter-spacing: 0.544px;white-space: normal;font-size: 16px;color: rgb(62, 62, 62);line-height: inherit;font-family: &quot;Helvetica Neue&quot;, Helvetica, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, Arial, sans-serif;text-align: start;background-color: rgb(255, 255, 255);overflow-wrap: break-word !important;"><span style="font-size: 15px;">ES5 的继承,实质是先创造子类的实例对象this,然后再将父类的方法添加到this上面(Parent.apply(this))。ES6 的继承机制完全不同,实质是先将父类实例对象的属性和方法,加到this上面(所以必须先调用super方法),然后再用子类的构造函数修改this。</span></p><p style="margin-top: 1.5em;margin-bottom: 1.5em;max-width: 100%;box-sizing: border-box;min-height: 1em;letter-spacing: 0.544px;white-space: normal;font-size: 16px;color: rgb(62, 62, 62);line-height: inherit;font-family: &quot;Helvetica Neue&quot;, Helvetica, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, Arial, sans-serif;text-align: start;background-color: rgb(255, 255, 255);overflow-wrap: break-word !important;"><span style="font-size: 15px;"><strong style="max-width: 100%;box-sizing: border-box;color: inherit;font-size: inherit;line-height: inherit;overflow-wrap: break-word !important;">需要注意的是,class关键字只是原型的语法糖,JavaScript继承仍然是基于原型实现的</strong>。</span></p><pre style="max-width: 100%;box-sizing: border-box;letter-spacing: 0.544px;font-size: 16px;color: rgb(62, 62, 62);line-height: inherit;text-align: start;background-color: rgb(255, 255, 255);overflow-wrap: break-word !important;"><code class="" style="margin-right: 2px;margin-left: 2px;padding: 0.5em;max-width: 100%;box-sizing: border-box;font-size: 14px;color: rgb(169, 183, 198);line-height: 18px;border-radius: 0px;background: rgb(40, 43, 46);font-family: Consolas, Inconsolata, Courier, monospace;display: block;overflow-x: auto;letter-spacing: 0px;overflow-wrap: normal !important;word-break: normal !important;overflow-y: auto !important;"><span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;"><span class="" style="max-width: 100%;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">class</span>&nbsp;<span class="" style="max-width: 100%;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">Person</span>&nbsp;</span>{<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">&nbsp;&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(128, 128, 128);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">//调用类的构造方法</span><br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">&nbsp;&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">constructor</span>(name,&nbsp;age)&nbsp;{<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">&nbsp;&nbsp;&nbsp;&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">this</span>.name&nbsp;=&nbsp;name<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">&nbsp;&nbsp;&nbsp;&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">this</span>.age&nbsp;=&nbsp;age<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">&nbsp;&nbsp;}<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">&nbsp;&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(128, 128, 128);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">//定义一般的方法</span><br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">&nbsp;&nbsp;showName&nbsp;()&nbsp;{<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">&nbsp;&nbsp;&nbsp;&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">console</span>.log(<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(238, 220, 112);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">"调用父类的方法"</span>)<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">&nbsp;&nbsp;&nbsp;&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">console</span>.log(<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">this</span>.name,&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">this</span>.age);<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">&nbsp;&nbsp;}<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">}<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;"><span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">let</span>&nbsp;p1&nbsp;=&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">new</span>&nbsp;Person(<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(238, 220, 112);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">\'kobe\'</span>,&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(174, 135, 250);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">39</span>)<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;"><span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">console</span>.log(p1)<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;"><span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(128, 128, 128);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">//定义一个子类</span><br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;"><span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;"><span class="" style="max-width: 100%;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">class</span>&nbsp;<span class="" style="max-width: 100%;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">Student</span>&nbsp;<span class="" style="max-width: 100%;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">extends</span>&nbsp;<span class="" style="max-width: 100%;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">Person</span>&nbsp;</span>{<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">&nbsp;&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">constructor</span>(name,&nbsp;age,&nbsp;salary)&nbsp;{<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">&nbsp;&nbsp;&nbsp;&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">super</span>(name,&nbsp;age)<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(128, 128, 128);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">//通过super调用父类的构造方法</span><br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">&nbsp;&nbsp;&nbsp;&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">this</span>.salary&nbsp;=&nbsp;salary<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">&nbsp;&nbsp;}<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">&nbsp;&nbsp;showName&nbsp;()&nbsp;{<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(128, 128, 128);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">//在子类自身定义方法</span><br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">&nbsp;&nbsp;&nbsp;&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">console</span>.log(<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(238, 220, 112);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">"调用子类的方法"</span>)<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">&nbsp;&nbsp;&nbsp;&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">console</span>.log(<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">this</span>.name,&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">this</span>.age,&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">this</span>.salary);<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">&nbsp;&nbsp;}<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">}<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;"><span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">let</span>&nbsp;s1&nbsp;=&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">new</span>&nbsp;Student(<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(238, 220, 112);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">\'wade\'</span>,&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(174, 135, 250);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">38</span>,&nbsp;<span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(174, 135, 250);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">1000000000</span>)<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;"><span class="" style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: rgb(248, 35, 117);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">console</span>.log(s1)<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">s1.showName()&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br style="max-width: 100%;box-sizing: border-box;font-size: inherit;color: inherit;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;"></code></pre><figure style="max-width: 100%;box-sizing: border-box;letter-spacing: 0.544px;white-space: normal;font-size: 16px;color: rgb(62, 62, 62);line-height: inherit;font-family: &quot;Helvetica Neue&quot;, Helvetica, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, Arial, sans-serif;text-align: start;background-color: rgb(255, 255, 255);overflow-wrap: break-word !important;"><img class="" data-ratio="0.4218566392479436" data-type="png" data-w="851" title="" data-src="https://mmbiz.qpic.cn/mmbiz_png/zewrLkrYfsNPh34HhyGRHGhZAZQaFulibkqFhSPrcLSrviaUaDW3dBiccmOWuqk197lmrNbZAIsYrHiaWd31eID1Tw/640?wx_fmt=png" style="margin-right: auto; margin-left: auto; box-sizing: border-box; border-width: 2px; border-style: solid; border-color: rgb(238, 238, 238); border-radius: 6px; font-size: inherit; color: inherit; line-height: inherit; display: block; overflow-wrap: break-word !important; visibility: visible !important; width: 677px !important; height: auto !important;" _width="677px" src="https://mmbiz.qpic.cn/mmbiz_png/zewrLkrYfsNPh34HhyGRHGhZAZQaFulibkqFhSPrcLSrviaUaDW3dBiccmOWuqk197lmrNbZAIsYrHiaWd31eID1Tw/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" crossorigin="anonymous" data-fail="0"></figure><p style="max-width: 100%;min-height: 1em;font-family: -apple-system-font, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei UI&quot;, &quot;Microsoft YaHei&quot;, Arial, sans-serif;letter-spacing: 0.544px;white-space: normal;background-color: rgb(255, 255, 255);box-sizing: border-box !important;overflow-wrap: break-word !important;"><br style="max-width: 100%;box-sizing: border-box;font-size: 16px;color: rgb(62, 62, 62);line-height: inherit;font-family: &quot;Helvetica Neue&quot;, Helvetica, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, Arial, sans-serif;text-align: start;overflow-wrap: break-word !important;"><span style="font-size: 15px;"><strong style="max-width: 100%;box-sizing: border-box;color: rgb(62, 62, 62);font-size: 16px;line-height: inherit;font-family: &quot;Helvetica Neue&quot;, Helvetica, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, Arial, sans-serif;text-align: start;overflow-wrap: break-word !important;">优点</strong><span style="max-width: 100%;color: rgb(62, 62, 62);font-family: &quot;Helvetica Neue&quot;, Helvetica, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, Arial, sans-serif;text-align: start;box-sizing: border-box !important;overflow-wrap: break-word !important;">:</span><span style="max-width: 100%;color: inherit;box-sizing: border-box !important;overflow-wrap: break-word !important;">语法简单易懂,操作更方便</span></span></p><p style="margin-top: 1.5em;margin-bottom: 1.5em;max-width: 100%;box-sizing: border-box;min-height: 1em;letter-spacing: 0.544px;white-space: normal;font-size: 16px;color: rgb(62, 62, 62);line-height: inherit;font-family: &quot;Helvetica Neue&quot;, Helvetica, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, Arial, sans-serif;text-align: start;background-color: rgb(255, 255, 255);overflow-wrap: break-word !important;"><span style="font-size: 15px;"><strong style="max-width: 100%;box-sizing: border-box;color: inherit;font-size: inherit;line-height: inherit;overflow-wrap: break-word !important;">缺点</strong>:</span><span style="max-width: 100%;color: inherit;font-family: -apple-system-font, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei UI&quot;, &quot;Microsoft YaHei&quot;, Arial, sans-serif;text-align: justify;font-size: 15px;box-sizing: border-box !important;overflow-wrap: break-word !important;">并不是所有的浏览器都支持class关键字</span></p><h2 style="margin-top: 1.5em;margin-bottom: 1.5em;font-weight: bold;font-size: 1.4em;max-width: 100%;box-sizing: border-box;letter-spacing: 0.544px;white-space: normal;color: rgb(62, 62, 62);line-height: inherit;font-family: &quot;Helvetica Neue&quot;, Helvetica, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, Arial, sans-serif;text-align: start;background-color: rgb(255, 255, 255);overflow-wrap: break-word !important;"><span style="max-width: 100%;box-sizing: border-box;color: inherit;line-height: inherit;font-size: 15px;overflow-wrap: break-word !important;">参考文章</span></h2><ul class="list-paddingleft-2" style=""><li><p style="max-width: 100%;min-height: 1em;box-sizing: border-box !important;overflow-wrap: break-word !important;"><span style="font-size: 15px;">JS实现继承的几种方式</span></p></li><li><p style="max-width: 100%;min-height: 1em;box-sizing: border-box !important;overflow-wrap: break-word !important;"><span style="font-size: 15px;">JavaScript深入之继承的多种方式和优缺点</span></p></li><li><p style="max-width: 100%;min-height: 1em;box-sizing: border-box !important;overflow-wrap: break-word !important;"><span style="font-size: 15px;">JavaScript常见的继承方式</span></p></li><li><p style="max-width: 100%;min-height: 1em;box-sizing: border-box !important;overflow-wrap: break-word !important;"><span style="font-size: 15px;">阮一峰ES6入门之class的继承</span></p></li></ul><p style="white-space: normal;"><br></p><p style="white-space: normal;"><br></p>
            </div>
            <script nonce="" type="text/javascript">
                var first_sceen__time = (+new Date());

                if ("" == 1 && document.getElementById(\'js_content\')) {
                    document.getElementById(\'js_content\').addEventListener("selectstart",function(e){ e.preventDefault(); });
                }

                
                (function(){
                    if (navigator.userAgent.indexOf("WindowsWechat") != -1){
                        var link = document.createElement(\'link\');
                        var head = document.getElementsByTagName(\'head\')[0];
                        link.rel = \'stylesheet\';
                        link.type = \'text/css\';
                        link.href = "//res.wx.qq.com/mmbizwap/zh_CN/htmledition/style/page/appmsg_new/winwx46b604.css";
                        head.appendChild(link);
                    }
                })();
            </script>
            <div class="read-more__area" id="js_more_read_area" style="display:none;">
                
            </div>
            
                            
            
                            <a class="original_tool_area" id="copyright_info" href="##" style="visibility: visible;">
              
            </a>
                        </div>