ES6 里的 Class：别再用那些老古董了 树洞 那会儿 coding 遇到类，最直接想到的就是 `extends` 和 `constructor`。

那时候我们就像现成的模具，把工厂改成工厂，要么把工人改成工人，其他一切照搬。

那时候的 `prototype` 就像是那个一辈子在背景里晃悠的幽灵，明明在定义里，却像离了壳的蛋，哪位也摸不着它的软肋。 `const` 那玩意儿出来之后，我当作 Class 就是个死物。引用它的变量自动变成 `const` 属性的囚徒，这对那些想改代码的人来说简直是一场噩梦。你连变量都改不了，那还能如何折腾业务逻辑？ 直到 ES6 把灵魂拽了出来，`class` 才像个真正有生命的生物。它不再是一个死板的语法结构，而是一个自成一体的对象，就连能够说，它就是个极小的工厂。 工厂机制 ES6 的 `class` 实际上是个工厂类（factory class），它自己定义了属性，然后还能实例化出来。

这跟传统写法忒不一样了。传统写法里，`class` 只是给函数加了个标签，把参数绑定了原型，然后调用对象。

这就像是一个穿着马甲的人在干活的姿势，活动度有限。 ES6 的写法更像是一个自带工位的团队。你在定义类的时候，直接在那里写 `this`，你不需求假装自己一启动就没带过原型。

这种写法让你感觉像是在编写代码的源头，而不是旁观者。 ```javascript function User() {} User.prototype.name = function(name) { this.name = name; }; class User { constructor() { this.name = "张三"; } } const u1 = new User(); console.log(u1.name); // 张三 const u2 = new User(); u2.name = "李四"; console.log(u2.name); // 李四 ``` 这简直是把工厂从幕后推到了台前。你不需求再额外去建立 `prototype` 了，一切都在 `constructor` 里，一切都在 `this` 里。

这不仅代码更干净利落，并且逻辑的流动感更强，仿佛程序本身就是流动的河流，而不是静止的混凝土。 方式的继承 继承是类最核心的灵魂，也是最让人头疼的局部。传统写法里，`prototype` 就像是一个仓库，你把方式放进去，然后 `constructor` 只是去仓库取货。

这种情况下，子类的方式就像是仓库里的货，明明是自己设计好的，却总被仓库里的旧货给覆盖。 ES6 彻底转变了这种局面。目前，你在 `class` 里写的属性和方式，直接变成了新工厂里独有的资产。你不需求再揪心 `prototype` 里的东西会不会混进来。 比如，你想在子类里覆盖父类的某个方式，这就像是你店里新推出的新款商品，直接取代了旧款。你不需求再去管仓库的旧货如何分配。 ```javascript class Base { e() { console.log("基础行为"); } } class Child extends Base { // 这里直接定义了新方式，彻底无视 Base 的 e() d() { console.log("衍生行为"); } } const c = new Child(); c.e(); // 基础行为 c.d(); // 衍生行为，彻底独立 ``` 这种写法让代码的可维护性和扩展性呈指数级增长。你不再是去纠结方式到底是哪位的，你只管在 `class` 里写你的逻辑。`children` 集合里，每个子类都拥有独立的 `e()` 和 `d()`，互不干扰。

这就像是一个个独立的店铺，别看归于同一个集团，但里面的老板彻底掌控自己的生意。 静态行为 静态方式（静态方式）是用来做公共操作的。传统写法里，你一般得写个 `static methods` 数组，然后在 `constructor` 或 `prototype` 里一个个加上去。

这种方式就像是一个庞大的 Excel 表格，数据是散乱的。 ES6 的静态方式直接归于 `class` 对象，就像是你仓库里的一个特殊货架。你能够在一个方式里与此同时定义多个静态方式，多个构造函数，就连是一个整个的工厂模式。 ```javascript class Order { static total = 0; static addProduct(p) { Order.total += p.price; } } const o = new Order(); Order.total += 100; console.log(Order.total); // 100 // 要么你就连能够定义一个静态工厂函数 const createOrder = (id) => { const o = new Order(); o.id = id; return o; }; ``` 这种方式让你的代码结构更加扁平，逻辑更加聚拢。你不需求在层层嵌套的 `constructor` 里去处理这些全局的公共逻辑，它们直接归于 `class` 本身。

这就像是把仓库的公共区域和专属区域彻底分开了，公共的区域一辈子归公共，专属的区域一辈子归专属。 类内部函数 传统写法里，类内部的函数往往是非静态的，但只有通过 `prototype` 访问到 `this`。

这就像是你仓库里的工人在操作一台机器，他只能想办法让机器记住当前的操作，而机器本身并不认识他。 ES6 的类内部函数，变成了真正的静态方式。

这意味着，只要你在 `class` 里定义函数，它们就在 `this` 的根级别。

这就像是仓库里的一个超级管理员，他不需求依赖任何具体的机器，他能够直接管理所有的库存。 ```javascript class Order { static details = []; static startTransaction() { this.details.push("启动交易"); } } const o = new Order(); o.startTransaction(); // 直接在对象内部调用 ``` 这种写法消除了 `this` 上下文丢失的困扰。你不需求再操心 `this` 指向哪儿，直接写代码，逻辑自然顺畅。

这就像是你仓库的超级管理员，他能够直接管理所有库存，不需求依赖任何具体的机器。 私有属性与 getter ES6 的类准在内部定义私有属性，这就像是你仓库里的机密文件，一般/平平人没法随意调阅。别看从语法上看，`private` 关键字只是给属性加了个标签，但它真正的功能是隔离访问。 ```javascript class Account { private balance; constructor() { this.balance = 0; } get balance() { return this.balance; } set balance(val) { this.balance = val; } } const a = new Account(); a.balance = 1000; console.log(a.balance); // 1000 ``` `private` 关键字让代码结构更加清楚，也削减了命名空间的污染。你不需求在类外定义 `private` 属性，它直接就在 `this` 的私有域里。

这就像是你仓库里的机密文件，只有特定的承运人才能调阅，其他人彻底碰不到。 动态属性与方式 动态属性（dynamic properties）是 ES6 的另一个杀手锏。你能够直接在 `class` 对象上添加属性，不需求在 `constructor` 里定义，也不需求用到 `prototype`。 ```javascript class Mail { greeting = "你好"; static greeting = "你好"; } console.log(Mail.greeting); // 你好 console.log(Mail.greeting); // 你好（这是静态方式） Mail.greeting = "世界"; console.log(Mail.greeting); // 世界 ``` 这种写法让你能够贼灵活地扩展代码，随时为新的字段添加功能。就像是你仓库里的货架，管理员随时能够往上面添置新货，而不用去管旧的货如何处理。 尾随逗号 ES6 的另一个亮点是尾随逗号。它像一个小小的标点符号，告诉程序“这里终止，但还有更多”，进而避免不必要的空格，让代码看起来干净利落无比。 ```javascript class Config { // 这里没有空格 env = "dev"; logs = []; } ``` 这不只是是美观，更是一种逻辑上的“断言”。它明确地告诉读者：“这里的内容到此为止，后面的内容别看存有，但和当前行无涉。”这在维护大型项目时贼有用，能够防止误操作，也能让代码结构一目了然。 结论 ES6 的 `class` 不再是一个枯燥的语法糖，它是一个强大的工具，一个能承载复杂逻辑的容器。它让类变成了工厂，让方式变成了私有资产，让静态行为成为了公共枢纽。 那个曾经在 `prototype` 背景里晃悠的幽灵，目前彻底消亡了。所有的逻辑都在 `this` 和 `class` 里落地生根，形成了一个个独立的、可维护的模块。 这就像是我们仓库的改革，把散乱的货物重新整理成一个有序的系统。

那会儿我们只能看到一个整体的仓库，目前每个团队都能清楚看到自己的专属货架，公共区域也能一目了然。 故此，别再试图去写传统的 `class` 了，要么起码，不要再把它当成正经的类来写了。在 ES6 的世界里，`class` 就是一个充满活力的工厂，它定义了规则，承载了逻辑，并且随时预备着接纳新的、更精妙的变化。