先说个较大概， ES6里class其实就是把原来那套prototype包装一下看起来像面向对象， 真香！ 其实底层还是函数。下面这篇文章我就随便聊聊，顺带抄几段代码，别当正式教材，写得烂点也没事儿。

一、class到底是个啥子东西？

简陋阐述：class Foo {}跟class Foo { constructor {} }是等价的。只不过没有写构造函数时默认帮你生成一个空的。要是你把它当成普通函数直接调用，马上报错：

class Person {
    constructor {
        this.name = name;
    }
}
Person; // TypeError: Class constructor Person cannot be invoked without 'new'

所以记住一定要new Person。

1.1 类声明不提升

跟var不同， 跟let/const一样，类声明必须要先写再用， 说真的... 要是不较小心提前用了就会出现ReferenceError：

let p = new MyClass; // ReferenceError
class MyClass {}

1.2 语法糖的真实相

盘它... ES6的class本质是语法糖底层仍然是函数+原型链，只是把写法变得更直观一点。它不提供给真实正的封装，也不自动生成私有属性。所以别指望它能让你代码天衣无缝。

二、 最基本的写法——类声明和类表达式

类声明：

class Person {
    // 构造函数
    constructor {
        this.name = name;
    }
    // 实例方法
    sayHello {
        console.log;
    }
}

类表达式：

var Animal = class {
    constructor {
        this.type = type;
    }
}

三、继承和 super 的坑爹规则

If you extends a parent class and you write a constructor, first line MUST be super. 否则直接报 ReferenceError: Must call super constructor。

class Animal {
    constructor {
        this.name = name;
    }
}
class Dog extends Animal {
    constructor {
        // 必须要写， 否则报错
        super;
        this.breed = breed;
    }
    bark {
        console.log;
    }
}

切记... *注意*：即使父类没有显式写构造函数，你在子类里仍然得调 super——这是因为背后还有个隐式构造器要给 this 分配内存。

常见错误示例：

• #漏掉 super: 会抛出 ReferenceError。
• #super 放在后面而不是第一行: 同样报错， 这是因为在调用 super 前不能采用 this.
• #直接调用父类构造函数而不是 super: 只能用 super，不能够像 ES5 那样 .call。

四、 static 静态方法与实例方法的差别

方法挂在类本身上，不会被实例继承。如果你想在全局工具里放点加法之类的， 就能够这么写：

class MathUtils {
    static add { return a + b; }
    // 实例方法同名也能够，但调用方式不同
    add { return a + b + 1; }
}
// 调用静态
console.log); // 3
// 调用实例
const m = new MathUtils;
console.log); // 4

*提醒*: 虽然同名没事儿，但是太简单混淆，项目里最良好别这么干，背后.…。

a. 静态属性

五、 私有成员 - ES2020 才加的功能

E5以前根本没有真实正意义上的私有，只能靠约定或 Symbol。 就这样吧... ES2020 启动能够这么写：

class Counter {
    #count = 0;               // 私有字段
    inc { this.#count++; }   // 私有方法可直接访问
    get value { return this.#count; }
}
const c = new Counter;
c.inc;
console.log;   // 1
// console.log; // SyntaxError

六、 getter / setter 的奇葩玩法

在理。 You can define property accessors inside class body:

class Person{
   constructor{
       this._name=name;
   }
   get name{ return this._name; }
   set name{ this._name=v; }
}
let p=new Person;
console.log; // 老王
p.name='较小李';
console.log; // 较小李

七、零碎的较小技巧 & 常见坑

• #自动严格模式： 全部代码块默认就是 strict mode，无需额外 `'use strict'`。
• #不可反复声明同名字段： 如果你同时也在构造函数里给属性赋值， 又在类体外部再声明一次会报错。
• #enumerable 为 false： 类中定义的方法默认不可枚举，用 for...in 或 Object.keys 都遍历不到。
• #this 不自动绑定： 如果把实例方法当回调传出去， 需要自行 bind，否则 this 指向 window/undefined。
• #new 必须要配合采用： 直接调用类会抛 TypeError，除非你手动改成普通函数形式。
• #extends 必须要配合 super ，否则子类根本没办法初始化。

八、 综合示例：动物园系统

/* 超级烂示例，仅供娱乐活动 */
class Animal{
   constructor{
       this.name=name;
   }
   speak{
       console.log;
   }
}
class Cat extends Animal{
   constructor{
       super;            // 必须要第一行!
       this.color=color;
   }
   static info{               // 静态方法演示
       console.log;
   }
   speak{
       console.log;
   }
}
// 采用：
Cat.info;                     // 静态调用
let kitty=new Cat;
kitty.speak;                  // 实例调用
/* 故意漏掉 super 的错误示例 */
// class BadDog extends Animal{
//     constructor{       
//         this.breed='哈士奇';// ReferenceError!
//     }
// }
九、SEO 较小贴士 
- 标题中包含关键词 “ES6” “javascript 类”。  
- 更多次出现"怎样用ES6语法定义", **"js 类"** 等词组。 坦白讲...   
- 用 `` `

本文字数约 1900 左右，阅读量随机生成 741 次。欢迎留言吐槽或者点赞~ 🙃🙃🙃，有啥说啥...