ES6 class 类

ECMAScript 6 提供了class关键字用来定义类，虽然ECMAScript 6类表面上看起来可以支持正式的面向对象编程，但实际上它背后使用的仍然是原型和构造函数的概念。

一、类的定义

• 定义类也有两种主要方式：类声明和类表达式。这两种方式都使用class关键字加大括号
• 注意：函数声明和类声明之间的一个重要区别在于，函数声明会
  提升，类声明不会。需要先声明类，然后再访问它，否则就会出现
  ReferenceError
• 另一个跟函数声明不同的地方是，函数受函数作用域限制，而类受块作用域限制

1.类声明

// 类声明
class Oop {}

// 类表达式
const Oop = class {}

2.函数声明会提升 类则不会

const oop = new Oop() // // ReferenceError: Oop is not defined

class Oop()

3.块级作用域

{
    function Oop () {}
    class ClassOop {}
    var VarOop = class {}
    let LetOop = class {}
}

console.log(Oop)       // Oop () {}
console.log(ClassOop)  // ReferenceError: ClassOop is not defined
console.log(VarOop)    // class {}
console.log(LetOop)    // ReferenceError: LetOop is not defined

二、类构造函数

• constructor 方法是一个特殊的方法，这种方法用于创建和初始化一个由class创建的对象。通过 new 关键字生成对象实例时，自动会调用该方法。一个类只能拥有一个名为constructor构造函数，不能出现多个，如果定义了多个constructor构造函数，则将抛出 一个SyntaxError错误。如果没有定义constructor构造函数，class 会默认添加一个空的constructor构造函数。

• 类必须使用new调用，否则会报错。这是它跟普通构造函数的一个主要区别，后者不用new也可以执行。

• constructor用于创建对象时给类传递一些参数

class Oop {}

// 等于

class Oop {
    constructor () {}
}

// 错误
Oop()  // TypeError:  Class constructor Oop cannot be invoked without 'new'


// 传递参数
class Oop {
    constructor (val) { 
        this.data = val
    }
}

const oop = new Oop('传递参数')

使用new调用类的构造函数会执行如下操作。 

1. 在内存中创建一个新对象；
2. 这个新对象内部的[[Prototype]]指针被赋值为构造函数的prototype属性；
3. 构造函数内部的this被赋值为这个新对象（即this指向新对象）；
4. 执行构造函数内部的代码（给新对象添加属性）；
5. 如果构造函数返回非空对象，则返回该对象；否则，返回刚创建的新对象；

三、类的属性及方法

1.实例属性及方法

• 每个实例都对应一个唯一的成员对象，所有成员都不会在原型上共享

class Oop {
    constructor (val) {
        this.val = val
        console.log(this.val)
    }
    setVal (val) {
        this.val = val
        console.log(this.val)
    }
}

const oop1 = new Oop('oop1测试') // oop1测试

const oop2 = new Oop('oop2测试') // oop2测试

oop1.setVal('更改oop1测试') // 更改oop1测试

oop2.setVal('更改oop2测试') // 更改oop2测试 

oop1 // {val: '更改oop1测试'}

oop2 // {val: '更改oop2测试'}

2.静态属性及方法(static)

• 当我们把一个属性赋值给类本身，而不是赋值给它prototype，这样子的属性被称之为静态属性。
• 静态属性直接通过类来访问，不能在实例中访问，不能通过实例继承。
• 静态方法中的this 指向的是 当前类，而不是指向实例对象。静态属性是当前类自身的属性。

class Oop {
    static val = '静态属性'
    constructor () {
        console.log('****',Oop.val)
        this.age = '18'
    }
    static getOopVal () {
        console.log('//',this.age)
    }
}

const oop = new Oop()   // **** 静态属性

console.log(oop)        // {age: '18'}

Oop.val                 // '静态属性'

Oop.getOopVal()         // // undefined

 3、私有属性及方法(#)

• 私有属性和私有方法，是只能在类的内部访问的方法和属性，外部不能访问，不可以直接通过 Class 实例来引用，定义方式只需要在方法或属性前面添加#。

class Oop {
    #age = '18'
    constructor (age) {
        this.#age = age
        console.log(this.#age)
    }
    #setVal (age) {
        this.#age = age
        console.log(this.#age)
    }
}

const oop = new Oop() // undefined

const oop = new Oop('20') // 20

oop.#age // SyntaxError: Private field '#age' must be declared in an enclosing class

oop.#setVal('测试') // SyntaxError: Private field '#setVal' must be declared in an enclosing class

 四、继承(extends)

• 使用 extends 关键字，让子类继承父类的属性和方法。
• 在子类的constructor方法中，我们使用了super关键字，在子类中它是必须存在的，否则新建实例时会抛出异常。这是因为子类的this对象是继承自父类的this对象，如果不调用super方法，子类就得不到this对象。
• super 关键字可以作函数使用，也可以作对象使用，但是其只能在继承类中使用，且只能在继承类的constructor 构造函数、实例方法和静态方法中使用。作为函数时是在 继承类的constructor 构造函数中使用，根据要求如果继承类中定义了constructor构造函数就必须要调用super方法(调用父类的constructor)，否则就会报错。

class Oop {
    constructor(val) {
        this.val = val
        console.log('val',this.val)
    }
    getOopFn(num) {
        return num 
    }
}

const oop = new Oop('oop') // val oop

class Child extends Oop {
    constructor() {
        super('参数')
       console.log(super.getOopFn(18))
    }
}

const child = new Child()
// val 参数
// 18