https://fe-interview.pangcy.cn/tags/%E5%8E%9F%E5%9E%8B/Recent content in 原型 on ZiYang FrontEnd InterviewHugoen-usThu, 06 Mar 2025 13:07:39 +0800https://fe-interview.pangcy.cn/docs/javascript/javascript-15/Tue, 04 Mar 2025 06:58:24 +0000https://fe-interview.pangcy.cn/docs/javascript/javascript-15/<h2 id="考察点分析">考察点分析 <a href="#%e8%80%83%e5%af%9f%e7%82%b9%e5%88%86%e6%9e%90" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h2><p>本题主要考察以下核心能力维度：</p> <ol> <li><strong>原型链机制理解</strong>：能否清晰描述<code>instanceof</code>操作符基于原型链进行类型检测的实现原理</li> <li><strong>跨执行环境问题诊断</strong>：是否了解浏览器多窗口环境对原型链检测的影响</li> <li><strong>替代方案掌握</strong>：能否给出可靠的类型检测方案及其原理依据</li> </ol> <p>具体技术评估点包括：</p> <ul> <li><code>instanceof</code>的递归原型查找机制</li> <li>浏览器多窗口（iframe）环境中的构造函数隔离问题</li> <li><code>Object.prototype.toString</code>的跨环境兼容性原理</li> <li>内置静态方法（如<code>Array.isArray</code>）的检测策略差异</li> </ul> <hr> <h2 id="技术解析">技术解析 <a href="#%e6%8a%80%e6%9c%af%e8%a7%a3%e6%9e%90" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h2><h3 id="关键知识点">关键知识点 <a href="#%e5%85%b3%e9%94%ae%e7%9f%a5%e8%af%86%e7%82%b9" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h3><ol> <li>原型链查找机制</li> <li>执行环境隔离</li> <li>类型检测替代方案</li> </ol> <h3 id="原理剖析">原理剖析 <a href="#%e5%8e%9f%e7%90%86%e5%89%96%e6%9e%90" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h3><p><strong><code>instanceof</code>工作原理</strong>：</p> <ol> <li>检查右侧构造函数是否存在<code>Symbol.hasInstance</code>方法，若有则调用该方法</li> <li>若无，则遍历左侧对象的原型链（通过<code>__proto__</code>）， 直到找到与构造函数的<code>prototype</code>相等的原型对象</li> <li>若直到原型链末端（<code>null</code>）仍未找到，返回<code>false</code></li> </ol> <div class="prism-codeblock "> <pre id="0232819" class="language-javascript "> <code>function customInstanceof(obj, constructor) { let proto = Object.getPrototypeOf(obj); while (proto) { if (proto === constructor.prototype) return true; proto = Object.getPrototypeOf(proto); } return false; }</code> </pre> </div> <p><strong>跨窗口问题</strong>：</p> <ul> <li>不同窗口的全局构造函数独立（如<code>iframeContentWindow.Array !== parentWindow.Array</code>）</li> <li>导致跨窗口对象无法通过<code>instanceof</code>检测父窗口构造函数</li> </ul> <p><strong>可靠检测方案</strong>：</p> <ol> <li><code>Object.prototype.toString.call(obj)</code>：依赖对象内部<code>[[Class]]</code>标记</li> <li><code>Array.isArray()</code>：通过<code>@@species</code>标识检测</li> <li><code>obj?.constructor === Type</code>：需确保构造函数来源一致性</li> </ol> <h3 id="常见误区">常见误区 <a href="#%e5%b8%b8%e8%a7%81%e8%af%af%e5%8c%ba" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h3><ul> <li>认为修改<code>constructor.prototype</code>会影响已创建实例的<code>instanceof</code>结果</li> <li>误将跨窗口对象的<code>constructor</code>与当前环境构造函数直接比较</li> <li>忽略<code>Symbol.hasInstance</code>自定义检测逻辑的影响</li> </ul> <hr> <h2 id="问题解答">问题解答 <a href="#%e9%97%ae%e9%a2%98%e8%a7%a3%e7%ad%94" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h2><p><code>instanceof</code>通过递归查找对象原型链，判断是否存在与构造函数<code>prototype</code>相等的原型。在跨窗口环境中，由于不同窗口的全局构造函数相互独立，导致检测失效。可靠解决方案包括：</p>