ES6-class关键字

客官°小女子只卖身不卖艺 2023-07-03 16:24 27阅读 0赞

#### class 关键字 ####

es6 新增了 class 关键字，这是 es6 的新语法，用来实现 es6 中面向对象编程；可以通过该关键字来定义类。

**class不存在变量提升**，所以需要先定义再使用。

ES5:

// 定义一个构造函数
    function Person(name, age) { 
        this.name = name
        this.age = age
    }
    // 创建 preson 实例
    var person= new Person('小白', 16)
    console.log(preson)

![在这里插入图片描述][20200207203400569.png]

ES6:

语法：

class name { 
     // ...
    }

示例：

// 定义一个类
    class Person { 
        // 类的构造方法；不管写不写，类在 new 时都会被调用，构造方法默认返回 this
        constructor(name, age) { 
            this.name = name
            this.age = age
        }
        // 不需要使用 , 逗号
        // 类的一般方法，不需要使用 “function” 关键字；方法定义在实例对象的原型上
        say() { 
            console.log()
        }
        // 定义静态属性
        // 静态属性
        static info = {  name: '小白', age: 16 }  
    }
    
    let per = new Person('小白', 16)
    // 打印实例
    console.log(per)
    // 不能通过实例访问静态属性
    console.log(per.info)

![在这里插入图片描述][2020020720470498.png]

##### constructor #####

`constructor`：类的构造方法，通过 new 生成对象实例时，会自动调用该方法。

*  constructor 方法如果没有显式定义，会隐式生成一个 constructor 方法
 *  constructor 方法默认返回实例对象this，但是也可以指定 constructor 方法返回一个全新的对象，让返回的实例对象不是该类的实例
 *  constructor 外声明的属性都是定义在原型上的，可以称为原型属性

##### static #####

`static` 关键字可用于定义静态属性；静态属性可以通过类名直接访问；

实例属性：只能通过类的实例，来访问的属性 ；

静态方法挂载到构造器上，通过类名来访问；

实例方法挂载到原型上，每一个 new 的实例对象都可以使用这些实例方法

#### extends 关键字 ####

`extends`关键字用来创建一个普通类或者内建对象的子类；该类继承了父类的所有属性和方法，父类的属性和方法默认添加到子类的原型上。

语法：

class ChildClass extends ParentClass {  ... }

*  `ChildClass` 子类
 *  `PrentClass` 父类

##### super #####

`super` 这个关键字，既可以当作函数使用，也可以当作对象使用。当作函数使用时，super 代表父类的构造函数，并在子类中执行 `Parent.apply(this)`，从而将父类实例对象的属性和方法，添加到子类的 this 上面

子类必须在其 `constructor` 方法中显示调用 `super` 方法；只有调用 super 之后，才可以使用 this 关键字（子类没有自己的 `this` 对象），否则会报错

`super()` 只能用在子类的 `constructor` 方法之中，用在其他地方同样会报错

示例：

// 创建一个类作为父类
    class Parent { 
      constructor(name, age) { 
        this.name = name
        this.age = age
      }
    
      say() { 
        console.log('say')
      }
      // 静态属性
      static info = { nick: '熊熊'}
    }
    // 通过 extends 创建子类
    class Chinese extends Parent { 
      constructor(name, age, gender) { 
        // 调用 super 方法，这个 super 表示父类中 constructor 的引用
        // 将子类 constructor 的 name，age 通过 super 传给父类中的 name 和 age 属性
        super(name, age)
        this.gender = gender
      }
    }
    // 创建实例对象
    let p1 = new Chinese('熊二', 18, 'boy')
    // 打印实例
    console.log(p1)
    
    // 子类可以继承父类的所有，子类都能继承到
    console.log(Chinese.info)

![在这里插入图片描述][20200208113742436.png]

[20200207203400569.png]: https://img-blog.csdnimg.cn/20200207203400569.png
[2020020720470498.png]: https://img-blog.csdnimg.cn/2020020720470498.png
[20200208113742436.png]: https://img-blog.csdnimg.cn/20200208113742436.png