ES6中的类（Class）个人理解

概述

ES6中提供了更接近面向对象（注意：javascript本质上是基于对象的语言）语言的写法，作为对象的模板引入了class (类)，通过 class 关键字定义类。

class 的本质是 function。

它可以看作一个语法糖，让对象原型的写法更加清晰、更像面向对象编程的语法。它的绝大部分功能，ES5都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。

类的基本语法

		// 定义类
        class Baby {
    
    
            constructor(name, age) {
    
    
                this.name = name;
                this.age = age;
            }
            kill() {
    
    
                return `${
      
      this .name} like smile`

            }
        }

        //创建对象
        var bobi = new Baby("bobi", 1);
        console.log(bobi);
        // 调用方法
        console.log(bobi.kill());

上面代码定义了一个“类”，可以看到里面有一个constructor方法，这就是构造方法，而this关键字则代表实例对象。也就是说，ES5的构造函数Baby，对应ES6的Baby类的构造方法。
可以看到上面Baby类除了构造方法，还定义了一个kill方法，注意，在定义类的方法时，不需要加function这个关键字，把定义放进去就可以，另外方法间不要加逗号，加了会报错。

可以看到，在这里编辑器直接报错了
需要注意的是我们的还需要使用new方法在来使用类，和ES5之前不同；

  		var bobi = new Baby("bobi", 1);//这里正常
        var lilm = Baby("lilm", 2)// Uncaught TypeError: Class constructor Baby cannot be invoked without 'new'

我们需要注意，一定要避免在项目中在不使用new方法的时候去使用类；
4. 还需要注意的一点是我们不要重复声明类，会报错

		class MM {
    
    }
        class MM {
    
    }

在这里插入图片描述

不可以重复声明
5. 类定义不会被提升，这意味着，必须在访问前对类进行定义，否则就会报错。
6. 类是不可以枚举的

for (var key in Baby) {
    
    
           console.log(key); // 没有任何内容打印出来
       }

constructor 方法

constructor 方法是类的默认方法，返回对创建此对象的数组函数的引用。一个类必须有constructor方法，如果没有显式定义，默认会添加一个空的constructor方法。
constructor 方法默认返回实例对象，但是当constructor方法返回一个复杂类型的时候，可以改变。

  // 定义类
        class Baby {
    
    
            constructor(name, age) {
    
    
                this.name = name;
                this.age = age;
                // return 111; //返回Baby {name: "bobi", age: 1}
                // return "asdfasd"; //返回Baby {name: "bobi", age: 1}
                // return false; //返回Baby {name: "bobi", age: 1}
                // return [1, 2] //返回[1,2]
                // return {
    
    
                //     name: "111"
                // } //返回{name:"111"}
                return function fn() {
    
    
                        console.log(11);

                    } //返回函数

            }
            kill() {
    
    
                return `${
      
      this .name} like smile`

            }
        }

        //创建对象
        var bobi = new Baby("bobi", 1);
        console.log(bobi);

Constructor与普通构造函数的区别：类的构造函数，不使用new是没法调用的，会报错。这是它跟普通构造函数的一个主要区别，后者不用new也可以执行。
上面有演示这里就不在演示；

static 关键字

类（class）通过 static 关键字定义静态方法。不能在类的实例上调用静态方法，而应该通过类本身调用。

 class Baby {
    
    
            constructor(name, age) {
    
    
                this.name = name;
                this.age = age;


            }
            kill() {
    
    
                return `${
      
      this .name} like smile`

            }
            static mama = "lucy"
        }

        //创建对象
        var bobi = new Baby("bobi", 1);
        console.log(Baby.mama);
        console.log(bobi.mama);

在这里插入图片描述
只有当类本身调用的时候才可以使用，new出来的实例化对象调用为underfined；

静态方法调用同一个类中的其他静态方法，可使用 this 关键字

  // 定义类
        class Baby {
    
    
            constructor(name, age) {
    
    
                this.name = name;
                this.age = age;


            }
            kill() {
    
    
                return `${
      
      this .name} like smile`

            }
            static mama = "lucy";
            static father = this.mama + " honey"
        }


        console.log(Baby.father);//lucy honey

非静态方法中，不能直接使用 this 关键字来访问静态方法。而是要用类名来调用;

  class Baby {
    
    
            constructor(name, age) {
    
    
                this.name = name;
                this.age = age;
                console.log(Baby.mama);
                console.log(this.constructor.father);
                //this指向新new出来的对象 this.constructor指向类
                console.log(this.constructor);

            }
            kill() {
    
    
                return `${
      
      this .name} like smile`

            }
            static mama = "lucy";
            static father = this.mama + " honey"
        }
        var boby = new Baby("boby", 1)

在这里插入图片描述

总结

本篇文章就到这里，有补充欢迎评论区补充，如果有帮助，欢迎点赞~