<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, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", 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, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", 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, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", 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, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", 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: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", 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: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", 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: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", 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: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", 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: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", 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: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", 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(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;"><span class="" style="max-width: 100%;overflow-wrap: inherit !important;word-break: inherit !important;">function</span> <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, age</span>) </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;">this</span>.name = 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;"> <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 = 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;"> <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 = [<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>, <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>, <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;"> <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 = <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> () </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;"> Person.prototype.setAge = <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> () </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;"> <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> <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>) </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;">this</span>.price = 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;"> <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 = <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> () </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;"> Student.prototype = <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> Person() <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> s1 = <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> 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;">var</span> s2 = <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> 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;"> <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) <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: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", 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&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" crossorigin="anonymous" data-fail="0"></figure><p style="max-width: 100%;min-height: 1em;font-family: -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", 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: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", 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: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", 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: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", 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: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", 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: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", 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, 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> === 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> === 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 <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: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", 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&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" crossorigin="anonymous" data-fail="0"></figure><p style="max-width: 100%;min-height: 1em;font-family: -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", 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: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;text-align: start;overflow-wrap: break-word !important;"><span style="max-width: 100%;color: rgb(62, 62, 62);font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", 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: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", 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> <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, age</span>) </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;">this</span>.name = 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;"> <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 = 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 = <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> () </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(<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> <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>) </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;">this</span>.price = 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;"> <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 = <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> () </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(128, 128, 128);line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">// Student.prototype.sayHello = function () { }//在这里写子类的原型方法和属性是无效的，</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 = <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> 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 = <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> () </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> s1 = <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> 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) <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: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", 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: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", 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;"> 之后执行，不能放到构造器中</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: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", 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: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", 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;"> <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> <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, age</span>) </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;">this</span>.name = 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;"> <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 = 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;"> <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 = <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> () </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;"> Person.prototype.setAge = <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> () </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;"><span class="" style="max-width: 100%;overflow-wrap: inherit !important;word-break: inherit !important;">function</span> <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, age, price</span>) </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;"> 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>, name, 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;">// 相当于: this.Person(name, 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;"> <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 = 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;"> this.age = 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;"> <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 = 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;"> }<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> s1 = <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> 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>, <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>, <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: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", 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&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" crossorigin="anonymous" data-fail="0"></figure><p style="max-width: 100%;min-height: 1em;font-family: -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", 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: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;text-align: start;overflow-wrap: break-word !important;"><span style="max-width: 100%;color: rgb(62, 62, 62);font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", 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, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", 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 TypeError: s1.setAge <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> <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> a 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: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", 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: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", 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: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", 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: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", 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> <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, age</span>) </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;">this</span>.name = 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;"> <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 = 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;"> <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 = <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> () </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;">Person.prototype.setAge = <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> () </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(<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> <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, age, price</span>) </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;"> 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>, name, 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;"> <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 = 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;"> <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 = <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> () </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;">Student.prototype = <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> 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 = 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 = <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> () </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> s1 = <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> 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>, <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>, <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> s2 = <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> 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>, <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>, <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) <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) <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 </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: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", 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&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" crossorigin="anonymous" data-fail="0"></figure><p style="max-width: 100%;min-height: 1em;font-family: -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", 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: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;text-align: start;overflow-wrap: break-word !important;"><span style="max-width: 100%;color: rgb(62, 62, 62);font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", 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: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", 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: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", 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, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", 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: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", 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: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", 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> <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, age</span>) </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;">this</span>.name = 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;"> <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 = 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;"> <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 = <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> () </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;">Person.prototype.setAge = <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> () </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(<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> <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, age, price</span>) </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;"> 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>, name, 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;"> <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 = 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;"> <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 = <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> () </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;">Student.prototype = 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 = <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> () </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> s1 = <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> 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>, <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>, <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) <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: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", 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&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" crossorigin="anonymous" data-fail="0"></figure><p style="max-width: 100%;min-height: 1em;font-family: -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", 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: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;text-align: start;overflow-wrap: break-word !important;"><span style="max-width: 100%;color: rgb(62, 62, 62);font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", 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, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", 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 <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> Student, s1 <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> 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> <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: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", 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, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", 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: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", 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, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", 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: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", 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: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", 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> <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, age</span>) </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;">this</span>.name = 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;"> <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 = 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 = <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> () </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(<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> <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, age, price</span>) </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;"> 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>, name, 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;"> <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 = 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;"> <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 = <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> () </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;">Student.prototype = <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 = 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> s1 = <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> 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>, <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>, <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 <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> Student, s1 <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> Person) <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;">// true 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: 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) <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: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", 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: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", 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: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", 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: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", 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: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", 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: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", 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> <span class="" style="max-width: 100%;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">Person</span> </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;"> <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, 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;"> <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 = 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;"> <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 = 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;"> <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;"> showName () {<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(<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;"> <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, <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;"> }<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> p1 = <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> 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>, <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> <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;">extends</span> <span class="" style="max-width: 100%;line-height: inherit;overflow-wrap: inherit !important;word-break: inherit !important;">Person</span> </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;">constructor</span>(name, age, 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;"> <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, 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;"> <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 = 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;"> }<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;"> showName () {<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;">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;"> <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, <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, <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;"> }<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> s1 = <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> 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>, <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>, <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() <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: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", 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&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" crossorigin="anonymous" data-fail="0"></figure><p style="max-width: 100%;min-height: 1em;font-family: -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", 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: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", 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: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;text-align: start;overflow-wrap: break-word !important;">优点</strong><span style="max-width: 100%;color: rgb(62, 62, 62);font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", 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: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", 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, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", 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: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", 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>
JavaScript 常见的六种继承方式的相关教程结束。
