JS和TS中的修饰符等之间的映射关系（原型链、继承、private、public、protected、static）【不权威，只是推测】

已于 2023-09-09 11:49:59 修改
阅读量356 收藏
点赞数 1
CC 4.0 BY-SA版权
分类专栏： JavaScript 文章标签： javascript typescript 原型模式
于 2023-09-09 11:48:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Huanzhi_Lin/article/details/132775268
本文讨论了JavaScript和TypeScript中的属性分类，包括静态属性（static）、实例属性（独有属性和共享属性），并指出TypeScript中static和非私有属性遵循原型链搜索原则。文章通过实例和测试说明了这些属性的特性以及内存占用策略。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

文章目录

结论

在这里插入图片描述

鸿蒙开发TS基础:ArkTS语言之:类class、类声明、字段、方法、构造函数、可见性修饰符、对象字面量
阿辉的博客
06-18 3291
鸿蒙开发TS基础:ArkTS语言之:类class、类声明、字段、方法、构造函数、可见性修饰符、对象字面量
TypeScript详解（安装使用、基础类型总结、类型断言用法、接口、类、函数、泛型、相同类型之间赋值、unknown、枚举等）
AIWWY的博客
03-06 2319
TypeScript概念 是 JavaScript 的一个超集，它可以编译成纯JavaScript，也可以在任何浏览器操作系统运行。简单来说就是JS的一个升级版本，给JS加了限制规范（接口等），也扩展了JS（类等）的能力 基础类型 注意和JS不同，JS区分基础类型和复杂数据类型，TS不区分，即基础类型就是数据类型，它包括JS中的6中数据类型（undefined、null、boolean、number、string、object），不包含symbol。除此之外还包含函数、数组、元祖、枚举、任意值(.
关于public static ＜T＞ T解析
qq_45774406的博客
10-16 1430
关于public static T的解析
ts详解和js区别
你还有我
06-04 9114
ts和js区别 阮一峰ts官网http://ts.xcatliu.com/introduction/what-is-typescript.html ts官网https://www.tslang.cn/docs/home.html
静态sattic 私有private（易混淆）
Stitch__的博客
04-23 250
静态：时将数据和方法共享化直接被类名调用数据：每个对象都有并且值都一样方法：方法中没有调用到对象中的数据私有化：将数据成员封装，只能类的内部访问...
ts如何使用class类？与js的class类有什么区别？
Youyzq的博客
08-23 2141
ts如何使用class类？与js的class类有什么区别？
TS-修饰符 与 static
qq_41709082的博客
07-19 6352
TS-修饰符 与 static 1.static: 用于 修饰 变量 或者方法，表示 静态的 当类 中 的 方法 被 声明 为 static 时，其实例化 对象 不可 调用 该方法，只有 类 本身 ，以及 其子类 可以 调用。 eg: class A { name:string; age:number; constructor(name:string,age:number){ th...
Creator与Laya的Ts和JsTS的版属性声明详解,属性详解，Enum枚举,dataSource组件综合赋值,box容器复杂赋值[子对象的属性名的geChildByName],clip切片动画
qq_42838904的博客
06-19 1708
//0—）TS中实现构造函数 // class person{ // name:string;//属性 // constructor(n:string) // { // this.name=n; // } // run():void { // alert(this.name); // } // } // var p=n...
【TypeScript】TS入门到实战（详解：高级类型）
qq_45796592的博客
07-03 1859
彻底理解typescript的语法并会用
TypeScript（TS） 学习笔记
qq_33365152的博客
09-17 910
TypeScript（TS） 简单学习笔记
ts中的类非常详细通俗易懂，看这一篇就够了
m0_51512211的博客
12-14 2310
ts中的类非常详细通俗易懂。从初识class到构造函数再到继承然后说super,还说到了abstract抽象类以及private，public,protected 的区别
ts 类中的修饰符
weixin_42289080的博客
06-06 1366
ts类中的修饰符（public、private、protected、readonly、static）
typescript学习之路(四) —— ts类的继承（包含es5以及es6的类继承）
北极那企鹅丶
11-21 4728
上一文已经写了es5，es6等类的定义，所以本章主要写es5和es6的继承，由于es6的继承和ts的继承如出一辙，只是加了类型定义而已，所以ts的继承稍微写下，不会太详细。 文章目录es5继承原型链继承构造函数继承组合继承es6继承ts继承 es5继承 原型链继承 所谓原型链继承，就是将一个实例对象挂载到另一个原型上。即继承对象的prototype = new 实例化的对象 // 声明一个Pa...
TypeScript 类
weixin_45394033的博客
10-25 3141
new可以实例化一个类super：继承类中super直接调用到父级类static：定义静态的属性和方法等get/set ：存取器implements：类和接口之间的继承所用的关键字abstract：抽象类// 类作用域 // 字段 name : '' age : '' // 构造函数 constructor() {} // 方法 getName() {} }字段 - 字段是类里面声明的变量，字段表示对象的有关数据构造函数 - 类实例化时调用，可以为类的对象分配内存。
typescript class类中 public、private、protected、static、abstract 区别
alokka的博客
05-23 1100
类的修饰符 public 默认修饰符 可以自由的访问程序里定义的成员 private 只能在类内部访问 class Animal { private name: string; constructor(theName: string) { this.name = theName; } } let zoo = new Animal('panda') zoo.name // Property 'name' is private and only accessible within class
typescript 入门教程二
qq_21770727的博客
10-30 683
ts中面向对象成员修饰符：public , private , protexted（ts官方网站：ts） 在ts中，默认的成员修饰符就是public public：是表示是公开的，在任何地方，都可以调用，不管在类中，还是子类中，还是对象中均是可以直接调用 private:是表示私有的，只能在类中访问，不能在子类或者对象中访问，要调用私有的属性或者方法，可以通过在类中设置公有的方法访问私有的成员，...
TypeScript 学习笔记03-类的修饰符/静态属性/多态以及抽象类和方法
weixin_44922515的博客
02-13 401
ts类的修饰符 public： 公有 在类里面、子类、类外部都可以访问 protected： 保护类型 在类里面 子类里面可以访问，在类外部没法访问 private： 私有 在类里面可以访问，在子类、类外部都没法访问 public： 公有 在类里面、子类、类外部都可以访问 class Person { public name:string; constructor(name:string) { this.name = name } run() {
原型 原型链
neversleepy的博客
10-17 573
因为ES6 的继承机制，与 ES5 完全不同。ES5 的继承机制，是先创造一个独立的子类的实例对象，然后再将父类的方法添加到这个对象上面，即“实例在前，继承在后”。属性，是否在左边对象的原型链上。有一种特殊情况，就是左边对象的原型链上，只有。es6：先生成父类实例，然后再添加子类的属性，实例变成子类。运算符只能用于对象，不适用原始类型的值。拷贝父类的显式原型，将拷贝的原型对象的。不止能继承类，也能继承普通的构造函数。方法，因为这一步会生成一个继承父类的。在node环境下是取的原型对象的。
TypeScript中的类
qq_44746132的博客
03-17 543
这次我们接着说TypeScript中的类的定义 类是面向对象开发的一个标志，Js作为一门面向对象的开发语言，从Es6开始也支持了class关键字进行类的定义，而Ts作为Js的超集，也是一门静态的开发语言，其对于类的定义和使用也是必不可少的。现在我们先来简单的看下Ts中类的定义: // 这里我们以定义一个学生类为例 class Student{ constructor(name: string,...
ts 中 public和private 处理区分访问还有其他区别么
最新发布
03-11
<think>好的，我现在需要回答用户关于 TypeScript 中 public 和 private 访问修饰符的区别的问题。用户已经知道它们用于区分访问权限，但想了解是否有其他区别。首先，我需要回忆TypeScript中的访问修饰符的基本概念和用法。 首先，public和private是访问修饰符，用于控制类成员的可见性。public成员可以在类的内部和外部访问，而private成员只能在类内部访问。这是最基本的区别。但用户问的是除了访问控制之外的其他区别，所以我需要深入思考。 接下来，我需要考虑TypeScript在编译后的JavaScript中的表现。因为TypeScript最终会被编译成JavaScript，而JavaScript本身没有访问修饰符的概念，所以private成员在编译后其实会被转换为普通的属性，只是在编译阶段进行类型检查。不过，TypeScript 3.8引入了ECMAScript的#私有字段语法，这时候private和#私有字段在运行时确实会有不同的表现。这里可能需要区分传统的private关键字和新的#语法。 然后，还有其他访问修饰符吗？比如protected和readonly。但用户只问了public和private，所以暂时不需要涉及这些，不过可能需要提到它们的对比。不过用户的问题仅限于public和private之间的其他区别。 接着，想到在继承和子类中的表现。public成员在子类中是可访问的，而private成员在子类中不可访问。protected则是在子类中可访问，但用户没问这个，所以可能不需要展开，但可以作为对比。 另外，类型兼容性方面，如果两个类有相同的结构，但其中一个类的某个成员是private的，即使结构相同，它们的实例也不兼容。例如，如果两个类都有一个名为name的private成员，它们不会被认为是兼容的。但如果是public成员，结构相同的话会被认为是兼容的。这可能是一个区别点。 还有，在接口实现方面，如果一个类实现了一个接口，接口中的成员必须是public的，private成员无法满足接口的要求。这可能也是一个需要注意的地方。 另外，装饰器对public和private成员的处理是否有不同？可能需要考虑，比如装饰器是否可以应用于private成员，或者是否有不同的行为。例如，某些装饰器可能只能应用于public成员，或者在访问时会有不同的处理。 此外，初始化参数属性。在TypeScript中，构造函数参数如果使用public或private修饰符，会自动成为类的属性。例如，constructor(public x: number)会自动生成this.x = x。而private修饰符同样适用，但生成的属性是private的。这也可能是一个区别点，但用户可能已经知道这一点，所以是否需要强调？ 还需要考虑在派生类中是否可以重新声明private成员。例如，如果在基类中有private成员，派生类是否可以声明同名但不同类型的private成员？这可能会导致错误，但需要具体分析。 另外，关于JavaScript的输出，当使用传统的private关键字时，编译后的代码中该属性仍然是可见的，只是TypeScript在编译时检查访问权限。而使用#私有字段时，编译后的代码会使用真正的私有字段，运行时无法访问。这可能是一个重要的区别，特别是当用户使用较新的TypeScript版本时。 总结一下，除了访问控制之外，public和private的区别可能包括： 1. 类型兼容性：私有成员影响类型兼容性。 2. 继承中的可访问性：private成员在子类中不可访问。 3. 装饰器的应用可能性。 4. 构造函数参数自动生成属性时的可见性。 5. 与ECMAScript私有字段（#前缀）的运行时行为差异。 6. 在接口实现中的限制：private成员不能实现接口的公共成员。 需要逐步展开这些点，并确保解释清晰，同时提供代码示例帮助理解。要注意用户的背景可能是TypeScript开发者，可能已经了解基础，但需要更深入的细节。同时，用户可能关心实际开发中的影响，比如设计类时的注意事项，或者遇到的常见问题。 需要验证每个点是否正确，比如类型兼容性的例子是否正确，装饰器的处理是否有差异等。如果有不确定的地方，可能需要查阅TypeScript文档或进行测试。例如，两个类有相同结构的private成员是否会导致类型不兼容，这确实是TypeScript中的行为，称为“名义类型系统”的一部分，即私有成员会影响类型的兼容性。 另外，在构造函数中使用private参数自动生成属性时，该属性是private的，而public参数生成的是public的，这也是一个区别点，虽然属于访问控制的一部分，但可能用户没有意识到这也是一个区别。 最后，组织这些点，用清晰的标题和示例代码进行说明，确保用户能够逐步理解每个区别，并提供实际应用的建议。</think>以下是 TypeScript 中 `public` 和 `private` 访问修饰符的核心区别解析，除了基本的访问控制外，还包含其他关键差异： --- ### **一、类型系统层面的差异** #### 1. **类型兼容性规则** - **`public` 成员**：允许结构类型兼容 ```typescript class A { public value: number = 1; } class B { public value: number = 2; } let obj: A = new B(); // 允许，因为结构兼容 ``` - **`private` 成员**：破坏结构兼容性（需名义类型一致） ```typescript class C { private secret = 1; } class D { private secret = 2; } let obj: C = new D(); // 报错：类型不兼容，尽管结构相同 ``` #### 2. **接口实现限制** - `private` 成员无法实现接口要求： ```typescript interface IExample { id: number; // 接口成员默认为 public } class Example implements IExample { private id: number; // 报错：属性 'id' 在类型中为 private，但接口要求 public } ``` --- ### **二、运行时行为差异** #### 1. **传统 `private` 的编译结果** - 编译后仅为普通属性（无真正私有化）： ```javascript // TypeScript class LegacyPrivate { private key = 123; } // 编译后的 JavaScript class LegacyPrivate { constructor() { this.key = 123; // 仍可通过 obj.key 访问 } } ``` #### 2. **ECMAScript 私有字段 (`#` 语法)** - 真正运行时私有化（需 TypeScript 3.8+）： ```typescript class ModernPrivate { #secret = 456; showSecret() { console.log(this.#secret); // 允许访问 } } const obj = new ModernPrivate(); console.log(obj.#secret); // 编译时和运行时均报错 ``` --- ### **三、设计模式影响** #### 1. **继承关系中的可见性** - `private` 成员在派生类中不可见： ```typescript class Base { private baseKey = 10; public publicKey = 20; } class Derived extends Base { logKeys() { console.log(this.publicKey); // 允许 console.log(this.baseKey); // 报错：属性为 private } } ``` #### 2. **构造函数参数快捷声明** - 参数属性生成规则： ```typescript class ParamDemo { constructor( public x: number, // 生成 public 属性 private y: number // 生成 private 属性 ) {} } ``` --- ### **四、元编程特性支持** #### 1. **装饰器应用限制** - `private` 成员使用装饰器需特殊处理： ```typescript function LogAccess( target: any, propertyKey: string, descriptor: PropertyDescriptor ) {} class DecoratorDemo { @LogAccess public publicMethod() {} // 正常应用装饰器 @LogAccess private privateMethod() {} // 允许，但需注意访问限制 } ``` #### 2. **反射元数据获取** - 通过 `reflect-metadata` 库获取类型信息时： ```typescript import "reflect-metadata"; class MetadataDemo { public pubVal: string; private priVal: number; } // 获取设计阶段类型元数据 console.log(Reflect.getMetadata("design:type", MetadataDemo.prototype, "pubVal")); // 输出 String console.log(Reflect.getMetadata("design:type", MetadataDemo.prototype, "priVal")); // 输出 Number ``` --- ### **五、最佳实践对照表** | 场景 | 推荐修饰符 | 原因说明 | |--------------------------|------------|-----------------------------------| | 公共API接口 | `public` | 明确公开契约 | | 内部状态管理 | `private` | 封装实现细节 | | 需要继承扩展的基类成员 | `protected`| 允许子类访问但阻止外部访问 | | 需要运行时严格私有化 | `#` 语法 | 利用 ECMAScript 标准私有字段特性 | | 依赖注入的构造函数参数 | `public` | 自动生成属性简化代码 | --- ### **六、典型错误案例** #### 1. **误用 `private` 导致类型断言失效** ```typescript class Box<T> { constructor(private content: T) {} } // 尝试强制类型转换 const stringBox = new Box("hello"); const numberBox: Box<number> = stringBox; // 本应报错但实际通过（传统 private 不保证类型安全） // 使用 # 语法则能正确检测类型错误 class SafeBox<T> { #content: T; constructor(content: T) { this.#content = content; } } const safeStringBox = new SafeBox("test"); const safeNumberBox: SafeBox<number> = safeStringBox; // 正确报错 ``` #### 2. **跨实例访问 `private` 成员** ```typescript class SameClassPrivate { private key: number = 100; compare(other: SameClassPrivate) { // 允许访问同类其他实例的 private 成员 return this.key === other.key; // 编译通过但可能违反设计预期 } } // 使用 # 语法修复： class SameClassHashPrivate { #key: number = 200; compare(other: SameClassHashPrivate) { return this.#key === other.#key; // 编译报错：无法跨实例访问私有字段 } } ``` --- **工程化建议**： 1. 新项目优先使用 `#` 语法实现真正私有化 2. 库开发时用 `private` 保持编译兼容性 3. 对需要序列化的数据避免使用 `private` 4. 结合 `@internal` 注释强化文档提示： ```typescript /** @internal */ public internalMethod() {} // 标记为内部实现（虽公开但不应外部调用） ```
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值