1分钟通俗易懂知道Js中的class类是什么？

前言

Js中万物皆对象，在设计之初没有class类这个概念，但是由于后端语言（类似java）都存在类，并且占据了很大的地位，同时类的使用也可以优化代码结构，提升效率，所有ES6之后提出了class类这个概念，他的实现原理是通过原型链以及构造函数等来实现的。

最基础的语法

class MyClass {

    // 构造器函数
    constructor() {}
    
    method1(){...} 
    method2(){...} 
    method3(){...}
}

let obj = new MyClass()

在调用这个类的时候，使用的是new MyClass()，来创建实例对象

最简单的例子

class Person {

    // 构造器函数
    // 这里我们分析一下构造器函数是什么
    // 首先默认返回一个实例对象this，通俗的讲constructor创建了一个空的对象{}，我们将他起名为obj
    // 然后执行obj.myname = name obj.myage = age 
    // myname 和 myage 是obj的两个属性
    // name 和 age 是new Person时的形参
    
    constructor(name, age) {
        this.myname = name
        this.myage = age
    }
    
    // class定义的方法，可以直接被new出的实例对象使用
    // 这里的this就是new出来的实例对象
    say() {
        console.log('hello');
    }


}
let p = new Person('张三', 20);

console.log(p); // {myname:'张三', myage:20}
p.say()

构造器函数 这里我们分析一下构造器函数是什么 首先默认返回一个实例对象this，通俗的讲constructor创建了一个空的对象{}，我们将他起名为obj 然后执行obj.myname = name obj.myage = age myname 和 myage 是obj的两个属性 name 和 age 是new Person时的形参

ES6之前最简单的例子该怎么写

Person.prototype.say = function () {
    console.log('hello');
}

function Person(name, age) {
    obj.myname = name
    obj.myage = age
}

可以看到 1.存储类里面的方法，相当于在函数Person的原型上设置了say方法。 2.创建了一个名为Person的函数，函数里面的代码写在constructuor构造器函数方法中。

这就是class实现的底层原理，构造函数和原型对象，其实他就是个语法糖，不要想的太难了