JavaScript中的class语法

最新推荐文章于 2025-06-29 19:27:32 发布

原创最新推荐文章于 2025-06-29 19:27:32 发布 · 210 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

本文介绍了ES6中新增的Class语法，详细解释了如何使用Class来定义对象的行为和属性，对比传统构造函数，Class语法更为简洁易懂。文中通过实例展示了如何创建类以及类的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言:

原型机制是 JS 的核心概念
万物皆对象, 对象皆由构造而生
构造函数的机制就是 JS 的核心机制

从代码角度来看构造函数的书写过于繁琐, 随着大量的 Java 程序员加入 JS 的开发中, JS的原型语法广受吐槽, 终于在 2015年6月, JS发布了重量级的 ES6 -- JS的第6个版本, 加入了大量的现代化编程语言的特性, 其中 class 语法就是其中之一

class语法中, 把构造函数的两个部分整合到一起

class : 称为类

下面来看代码片段

class Rect {
    // 固定名称--称为构造方法
    // 当 new 类名 时, 就会触发此方法
    constructor(width, height) {
        console.log('constructor 被触发!');
        this.width = width
        this.height = height
    }
    // 省略 prototype, function ...
    // 会自动加入到原型中
    area(){
        return this.width * this.height
    }

    zc(){
        return (this.width + this.height) * 2
    }
}

var r1 = new Rect(10, 20)
console.log(r1);

console.log(r1.area());
console.log(r1.zc());

上方代码简单的写了一个求面积和周长的两个方法(个人感觉比构造简单多的多), 其中constructor是固定的写法, 通过打印来看