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

前言

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

最基础的语法

js 复制代码
class MyClass {

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

let obj = new MyClass()

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

最简单的例子

js 复制代码
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之前最简单的例子该怎么写

js 复制代码
Person.prototype.say = function () {
    console.log('hello');
}

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

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

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

相关推荐
Mintopia11 分钟前
🌀曲面细分求交:在无限细节中捕捉交点的浪漫
前端·javascript·计算机图形学
Mintopia14 分钟前
🧙‍♂️用 Three.js 判断一个点是否在圆内 —— 一次圆心和点的对话
前端·javascript·three.js
liliangcsdn29 分钟前
mac mlx大模型框架的安装和使用
java·前端·人工智能·python·macos
CssHero33 分钟前
基于vue3完成领域模型架构建设
前端
PanZonghui36 分钟前
用项目说话:我的React博客构建成果与经验复盘
前端·react.js·typescript
言兴39 分钟前
教你如何理解useContext加上useReducer
前端·javascript·面试
sunbyte42 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | GoodCheapFast(Good - Cheap - Fast三选二开关)
前端·javascript·css·vue.js·tailwindcss
前端的日常44 分钟前
网页视频录制新技巧,代码实现超简单!
前端
前端的日常1 小时前
什么是 TypeScript 中的泛型?请给出一个使用泛型的示例。
前端
今禾1 小时前
一行代码引发的血案:new Array(5) 到底发生了什么?
前端·javascript·算法