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实现的底层原理,构造函数和原型对象,其实他就是个语法糖,不要想的太难了

相关推荐
鱼樱前端43 分钟前
今天介绍下最新更新的Vite7
前端·vue.js
coder_pig1 小时前
跟🤡杰哥一起学Flutter (三十四、玩转Flutter手势✋)
前端·flutter·harmonyos
万少2 小时前
01-自然壁纸实战教程-免费开放啦
前端
独立开阀者_FwtCoder2 小时前
【Augment】 Augment技巧之 Rewrite Prompt(重写提示) 有神奇的魔法
前端·javascript·github
yuki_uix2 小时前
AI辅助网页设计:从图片到代码的实践探索
前端
我想说一句2 小时前
事件机制与委托:从冒泡捕获到高效编程的奇妙之旅
前端·javascript
陈随易2 小时前
MoonBit助力前端开发,加密&性能两不误,斐波那契测试提高3-4倍
前端·后端·程序员
小飞悟2 小时前
你以为 React 的事件很简单?错了,它暗藏玄机!
前端·javascript·面试
中微子2 小时前
JavaScript 事件机制:捕获、冒泡与事件委托详解
前端·javascript
Whoisshutiao2 小时前
网安-XSS-pikachu
前端·安全·网络安全