JavaScript 常见的六种继承方式
<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 常见的六种继承方式的更多相关文章
- JavaScript常见的六种继承方式
前言 面向对象编程很重要的一个方面,就是对象的继承.A 对象通过继承 B 对象,就能直接拥有 B 对象的所有属性和方法.这对于代码的复用是非常有用的. 大部分面向对象的编程语言,都是通过"类 ...
- JavaScript 六种继承方式
title: JS的六种继承方式 date: 2017-06-27 05:55:49 tags: JS categories: 学习 --- 继承是面向对象编程中又一非常重要的概念,JavaScrip ...
- JavaScript的3种继承方式
JavaScript的继承方式有多种,这里列举3种,分别是原型继承.类继承以及混合继承. 1.原型继承 优点:既继承了父类的模板,又继承了父类的原型对象: 缺点:不是子类实例传参,而是需要通过父类实例 ...
- Javascript的四种继承方式
在Javascript中,所有开发者定义的类都可以作为基类,但出于安全性考虑,本地类和宿主类不能作为基类,这样可以防止公用访问编译过的浏览器级的代码,因为这些代码可以被用于恶意攻击. 选定基类后,就可 ...
- 都0202年了，你还不知道javascript有几种继承方式？
前言 当面试官问你:你了解js哪些继承方式?es6的class继承是如何实现的?你心中有很清晰的答案吗?如果没有的话,可以通过阅读本文,帮助你更深刻地理解js的所有继承方式. js ...
- JavaScript的六种继承方式
继承是面向对象编程中又一非常重要的概念,JavaScript支持实现继承,不支持接口继承,实现继承主要依靠原型链来实现的 原型链 首先得要明白什么是原型链,在一篇文章看懂proto和prototype ...
- JavaScript的几种继承方式
看<JavaScript高级程序设计>做的一些笔记 ECMAScript只支持实现继承,不支持接口继承(因为函数没有签名) 原型链(实现继承的主要方法): function SuperTy ...
- Javascript之对象的继承
继承是面向对象语言一个非常重要的部分.许多OOP语言都支持接口继承和实现继承两种方式.接口继承:继承方法签名:实现继承:继承实际的方法.在ECMAScript中函数是没有签名的,所以也就无法实现接口继 ...
- 深入浅出：了解JavaScript的六种继承
了解继承前我们需要了解函数的构造,方便我们理解. 常见六种继承方式: 1.原型继承call和apply: 2.原型拷贝:循环父函数protype的key值=子函数prototype的key值: 3.原 ...
随机推荐
- WPF中画虚线
原文:WPF中画虚线 在WPF中,画线的方法十分简单,只要声明一个Line然后添加到指定的位置就可以了,但Line并不仅仅只能画一条直线,还可以对直线进行修饰. 1.Line.StrokeDashAr ...
- OpenSSL RSA加解密 (.Net公钥加密/ Linux端私钥解密)
要求在.Net端生成公钥私钥对. 然后在.Net端使用RSA公钥加密:在Linux端使用RSA私钥解密. 最初的尝试是:.Net端使用RSACryptoServiceProvider; linux端使 ...
- Ubuntu 15.04 clang++ 3.6 编译boost 1.59/1.55
Ubuntu 15.04已经可以直接通过apt-get insall 安装clang 3.6, 并且预装的gcc版本是4.9.2.这些安装过程在这里介绍. 首先下载boost源码 wget -O bo ...
- 开源数据源使用 DBCP 和 C3PO
jar包: commons-dbcp-1.4.jar commons-pool-1.5.6.jar mysql-connector-java-5.0.8-bin.jar 建立dbcp的配置文件 dbc ...
- jquery 显示图片
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
- WPF MVVM+EF增删改查 简单示例(二) 1对1 映射
WPF MVVM+EF增删改查 简单示例(一)实现了对学生信息的管理. 现在需求发生变更,在录入学生资料的时候同时需要录入学生的图片信息,并且一名学生只能有一张图片资料.并可对学生的图片资料进行更新. ...
- 图像滤镜艺术--PS平均(滤镜-模糊-平均)效果
原文:图像滤镜艺术--PS平均(滤镜-模糊-平均)效果 本文介绍PS中滤镜-模糊-平均模糊的效果实现: 这个效果很简单,原理如下: 1,统计全图像素的R,G,B值得和sumR,sumG,sumB; 2 ...
- 【Gerrit】Add a Member
add user email:XXXX@163.com username:XXXX( songfei) Add Step: System Server:1. ssh 服务器用户 ...
- SQLServer 可更新订阅数据在线架构更改（增加字段）方案
原文:SQLServer 可更新订阅数据在线架构更改(增加字段)方案 之前一直查找冲突发布和订阅数据不一致的原因,后来发现多少数据库升级引起,因为一直以来都是在发布数据库增加字段,订阅也会自动同步.在 ...
- python脚本，重新设置图片大小
最近在做一个android的电台,此android程序要访问自己服务器上的歌曲文件,包括图片.这些文件要自己手动上传. 每天十首歌,需要二十个图片(一个大图450*450.一个小图140*140). ...