讲师中心 微信公众号
AI工具推荐 视频效率加速

JavaScript class如何定义_它和构造函数有何区别?

千婷君_9507

千婷君_9507

发布时间:2025-12-15 21:55:02

|

309人浏览过

|

来源于php中文网

原创

JavaScript 中的 class 是构造函数的语法糖,本质基于原型机制,非全新对象模型;它使构造器、原型方法和静态方法定义更清晰,但底层仍等价于函数与原型操作。

javascript class如何定义_它和构造函数有何区别?

JavaScript 中的 class 是构造函数的语法糖,本质仍是基于原型的面向对象机制,不是全新对象模型。它让定义构造器、原型方法和静态方法更清晰直观,但底层运行逻辑和传统构造函数完全一致。

class 的基本定义方式

使用 class 关键字声明类,内部用 constructor() 定义初始化逻辑,其他方法直接写在类体中(自动挂载到原型上):

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  sayHello() {
    return `Hello, I'm ${this.name}`;
  }
  static createAnonymous() {
    return new Person('Anonymous', 0);
  }
}

注意:constructor 是可选的,省略时会默认添加空构造函数;类内部方法默认不可枚举;类声明不会被提升(必须先声明后使用)。

与传统构造函数的核心区别

  • 语法更简洁统一:把构造逻辑、原型方法、静态方法集中在一个块内,避免手动操作 prototype 或重复写 Person.prototype.xxx = function(){}
  • 强制使用 new:类构造器调用时若不加 new,会直接报错(TypeError);而普通构造函数不加 new 可能静默失败或污染全局
  • 严格模式默认开启:类内部所有代码自动运行在严格模式下,无需手动声明 "use strict"
  • 没有变量提升:类声明是 let 类似的行为,存在“暂时性死区”,不能在声明前访问

继承写法更直观(extends + super)

相比构造函数手动设置原型链(Student.prototype = Object.create(Person.prototype)),class 用 extends 和 super() 明确表达继承关系:

立即学习“Java免费学习笔记(深入)”;

OpenJDK 24
OpenJDK 24

OpenJDK 24 Windows x64 官方参考实现(24+36),适合 Windows 环境进行 Java 开发、编译、运行和版本兼容性验证。

下载
class Student extends Person {
  constructor(name, age, grade) {
    super(name, age); // 调用父类 constructor
    this.grade = grade;
  }
  study() {
    return `${this.name} is studying`;
  }
}

子类中必须在使用 this 前调用 super(),否则报错;这也强制了继承链的初始化顺序。

class 不是“真正的类”,只是语法包装

编译后的结果(如 Babel)或浏览器底层执行时,class 仍会被转为基于函数和原型的操作。例如:

  • class A {} 实际等价于 function A() {}
  • A.prototype.method = function(){} 依然在幕后发生
  • instanceof、原型链查找、Object.getPrototypeOf() 等行为与构造函数完全一致

所以 class 并没有改变 JavaScript 的原型本质,只是让开发者更容易写出结构清晰、符合直觉的面向对象代码。

基本上就这些。用 class 写更安全、更易读,但理解它背后的构造函数和原型机制,才能真正掌握 JavaScript 的对象模型。

热门AI工具

更多
Laper
Laper Hot

Laper是专为编剧、导演和制片人推出的 AI 原生剧本创作工具。

咔片AIPPT

一款在线AI演示文稿制作工具,可根据主题和内容需求辅助生成PPT结构与页面,提高演示材料制作效率。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

Loomy
Loomy Hot

一款AI工具,主要用于科大讯飞发布的桌面级 AI 助理,比 OpenClaw 更易用、更安全!,适合需要提升相关任务效率的用户。

VibeKnow
VibeKnow Hot

一款AI视频创作工具,主要用于全球首个AI知识视频创作平台,文档、文章、网页,一键生成视频,适合需要提升相关任务效率的用户。

UP简历
UP简历 Hot

一款AI办公效率工具,主要用于基于AI技术的免费在线简历制作工具,适合需要提升相关任务效率的用户。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

切问学术

切问学术是一款AI论文写作工具,复旦大学NLP团队推出的AI学术智能体。

相关专题

更多
go语言 面向对象
go语言 面向对象

本专题整合了go语言面向对象相关内容,阅读专题下面的文章了解更多详细内容。

6215

2025.09.05

java面向对象
java面向对象

本专题整合了java面向对象相关内容,阅读专题下面的文章了解更多详细内容。

322

2025.11.27

C++ 面向对象编程与设计模式实践
C++ 面向对象编程与设计模式实践

本专题整合了 C++ 面向对象编程的核心机制,涵盖类的定义与访问控制、构造函数与析构函数、拷贝语义与移动语义、继承与虚函数多态、抽象类与接口、运算符重载、友元函数等关键知识点,同时结合单例模式、工厂模式、观察者模式、策略模式等常用设计模式的 C++ 实现,帮助开发者写出结构清晰、易于维护的面向对象代码。

344

2026.04.09

Java 面向对象与核心编程机制
Java 面向对象与核心编程机制

系统讲解 Java 面向对象编程的核心知识体系,涵盖类的定义与封装、构造方法与 this/super 关键字、继承与方法重写、多态与向上向下转型、抽象类与接口的区别与设计原则、异常处理机制(try-catch-finally / 自定义异常)、泛型的类型参数与通配符、集合框架(List/Set/Map)的使用与遍历方式,帮助开发者全面掌握 Java 程序设计的核心机制与面向对象思维。

223

2026.04.17

go语言 面向对象
go语言 面向对象

本专题整合了go语言面向对象相关内容,阅读专题下面的文章了解更多详细内容。

6215

2025.09.05

java面向对象
java面向对象

本专题整合了java面向对象相关内容,阅读专题下面的文章了解更多详细内容。

322

2025.11.27

C++ 面向对象编程与设计模式实践
C++ 面向对象编程与设计模式实践

本专题整合了 C++ 面向对象编程的核心机制,涵盖类的定义与访问控制、构造函数与析构函数、拷贝语义与移动语义、继承与虚函数多态、抽象类与接口、运算符重载、友元函数等关键知识点,同时结合单例模式、工厂模式、观察者模式、策略模式等常用设计模式的 C++ 实现,帮助开发者写出结构清晰、易于维护的面向对象代码。

344

2026.04.09

Java 面向对象与核心编程机制
Java 面向对象与核心编程机制

系统讲解 Java 面向对象编程的核心知识体系,涵盖类的定义与封装、构造方法与 this/super 关键字、继承与方法重写、多态与向上向下转型、抽象类与接口的区别与设计原则、异常处理机制(try-catch-finally / 自定义异常)、泛型的类型参数与通配符、集合框架(List/Set/Map)的使用与遍历方式,帮助开发者全面掌握 Java 程序设计的核心机制与面向对象思维。

223

2026.04.17

剧云AI短剧创作教程合集
剧云AI短剧创作教程合集

本专题聚焦剧云AI短剧创作,讲解从短剧灵感、梗概、全局大纲到分集、分场和正文的完整流程及节奏设计方法。

0

2026.10.14

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WebStorm 官方调试文档
WebStorm 官方调试文档

共0课时 | 0人学习

React 教程
React 教程

共58课时 | 12.2万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.6万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn