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

相关推荐
Baklib梅梅27 分钟前
探码科技再获“专精特新”认定:Baklib引领AI内容管理新方向
前端·ruby on rails·前端框架·ruby
南方以南_33 分钟前
Chrome开发者工具
前端·chrome
YiHanXii39 分钟前
this 输出题
前端·javascript·1024程序员节
楊无好1 小时前
React中ref
前端·react.js
程琬清君1 小时前
vue3 confirm倒计时
前端·1024程序员节
歪歪1001 小时前
在C#中详细介绍一下Visual Studio中如何使用数据可视化工具
开发语言·前端·c#·visual studio code·visual studio·1024程序员节
唔661 小时前
flutter实现web端实现效果
前端·flutter
csj501 小时前
前端基础之《React(2)—webpack简介-使用Babel》
前端·react
刘新明19892 小时前
算法还原案例4-OLLVM_MD5
开发语言·前端·javascript·1024程序员节
言德斐3 小时前
Python Web框架深度对比:Django vs Flask vs FastAPI(含优缺点与选型策略)
前端·python·django