https://fe-interview.pangcy.cn/tags/%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1/Recent content in 面向对象 on ZiYang FrontEnd InterviewHugoen-usThu, 06 Mar 2025 13:07:39 +0800https://fe-interview.pangcy.cn/docs/typescript/typescript-11/Tue, 04 Mar 2025 08:37:03 +0000https://fe-interview.pangcy.cn/docs/typescript/typescript-11/<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>：对TypeScript访问控制修饰符的语义及使用场景的掌握程度</li> <li><strong>继承机制认知</strong>：protected修饰符在类继承体系中的特殊作用域规则</li> <li><strong>编译原理基础</strong>：TypeScript类型擦除特性与私有字段的运行时实现机制</li> </ol> <p>具体技术评估点：</p> <ul> <li>public/protected/private修饰符的访问边界</li> <li>子类方法中访问protected成员的合法性边界</li> <li>private字段的编译策略差异（TS私有声明 vs ES6#私有字段）</li> <li>类型擦除对运行时的影响</li> <li>访问修饰符与设计模式的应用关系</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><p>访问修饰符 &gt; 继承可见性 &gt; 编译策略</p> <h4 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></h4><p>TypeScript通过访问修饰符实现<strong>编译阶段的访问控制</strong>：</p> <ul> <li><code>public</code>：默认修饰符，成员在任何位置可见</li> <li><code>protected</code>：允许类内部及子类访问，禁止外部直接访问</li> <li><code>private</code>：仅在声明类内部可见</li> </ul> <p><strong>protected陷阱</strong>：子类可通过<code>this</code>访问父类protected成员，但无法通过<strong>子类实例</strong>直接访问（需通过子类暴露的公共方法）</p> <p><strong>private实现差异</strong>：</p> <ul> <li>TS传统模式：通过<code>WeakMap</code>存储私有属性（每个实例对应独立存储）</li> <li>ES6#语法：编译为<strong>硬编码私有标识符</strong>（通过<code>Object.defineProperty</code>实现）</li> </ul> <div class="prism-codeblock "> <pre id="081e140" class="language-javascript "> <code>// TS编译结果（target=ES5） var _name = new WeakMap(); class A { constructor() { _name.set(this, &#39;test&#39;); } }</code> </pre> </div> <h4 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></h4><ol> <li>误以为TS的<code>private</code>在运行时完全不可访问（实际可通过<code>instance['_name']</code>绕过）</li> <li>混淆protected成员在子类中的访问方式（允许通过<code>this</code>访问，但禁止通过实例属性访问）</li> <li>忽略TS配置对私有字段编译策略的影响（如<code>useDefineForClassFields</code>参数）</li> </ol> <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>TypeScript通过访问修饰符实施<strong>编译时访问控制</strong>：</p> <ul> <li><code>public</code>成员可被任意访问</li> <li><code>protected</code>允许类及其子类内部访问，但禁止通过实例直接调用</li> <li><code>private</code>仅在声明类内部可见，子类亦无法访问</li> </ul> <p><strong>protected子类规则</strong>：子类方法可通过<code>this</code>访问父类protected成员，但外部代码通过子类实例访问protected成员仍被禁止</p> <p><strong>private运行时实现</strong>：</p> <ul> <li>当编译目标为ES5及以下时，使用<code>WeakMap</code>存储私有字段（每个实例关联独立存储空间）</li> <li>当启用ES6+的<code>#</code>语法时，编译为JavaScript原生私有字段（通过闭包与唯一标识符实现硬隔离）</li> </ul> <hr> <h2 id="深度追问">深度追问 <a href="#%e6%b7%b1%e5%ba%a6%e8%bf%bd%e9%97%ae" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h2><ol> <li> <p><strong>如何强制实现运行时私有？</strong></p>