JS & ES6 -- 语法糖：类

忘是亡心i 2022-06-03 00:10 201阅读 0赞

## 类的声明 ##

举个栗子：

class Cat{ 
        constructor(name){
            this.name = name // 这是私有属性
        }
    
        eatFish() { // 不需要 function 关键字
            console.log('MiaoMiao')
        }
    }

需要说明的是，类的声明仅仅是个语法糖而已，尝到了甜头就不好戒的那种。233

**使用ES6的类需要注意的问题**  
1、类的声明不会被提升，这一点和 let/const 声明变量的时候的规则类似——存在临时性死区。

--------------------

关于临时性死区的一点说明：

if (condition) {
        console.log(typeof value) // 引用错误！
        let value = 'red'
    }

由于 console 语句报错，因此 let 定义 value 的语句并不会执行。这时的 value 就位于 JS 所谓的临时性死区中（ TDZ ）。人们常用这个词来描述 let 和 const 的不提升的效果。

但是有一种情况，并不会报错，那就是 console 位于 let 声明的作用域之外：

console.log(typeof value)
    
    if (condition) {
        let value = 'red'
    }

这种情况下，typeof 是在 value 的代码块之外执行的，此时，value 并不在 TDZ 中。  
结论：TDZ 只是会计绑定的特色之一。

--------------------

2、类声明的所有代码都将运行在严格模式中。

## 类的表达式 ##

let Cat = class { 
        constructor(name){
            this.name = name // 这是私有属性
        }
    
        eatFish() { // 不需要 function 关键字
            console.log('MiaoMiao')
        }
    }

类的声明方式和表达式方式的一个重要的区别：

Cat.name // Cat --> 声明形式
    Cat.name // 空字符串 --> 表达式形式

当然，我们也可以命名类表达式，就好像给匿名函数命名：

let Cat = class ACat{ 
        constructor(name){
            this.name = name // 这是私有属性
        }
    
        eatFish() { // 不需要 function 关键字
            console.log('MiaoMiao')
        }
    }

但是这个ACat只能在类的定义之中被访问，在类之外无法访问。

## 作为一等公民的类 ##

总能说到一等公民，一等公民是什么呢？  
精确定义：一等公民是指一个可以传入函数作为参数，可以从函数返回，并且可以赋值给变量的值。

JS 中，函数是一等公民，ES6 中，类也是一等公民。

## 创建单例 ##

let cat = new class {
        ...
    }('CatMiMi')

## 静态方法 ##

class Cat{ 
        constructor(name){
            this.name = name // 这是私有属性
        }
    
        eatFish() { // 不需要 function 关键字
            console.log('MiaoMiao')
        }
    
        static create(name){
            return new Cat(name) // 访问方法：Cat.create('cat0') --> 直接用类访问
        }
    }

## 可计算成员名称 与 访问器属性 ##

let name = 'eatFish'
    class Cat{ 
        constructor(name, food){
            this.name = name
            this.food = food
        }
    
        [name]() { // 可计算成员名称
            console.log('MiaoMiao')
        }
    
        get food(){
            return this.food
        }
    
        set food(food){
            this.food = food
        }
    }