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

JavaScript 中静态属性访问的正确方式:使用类名调用而非直接引用

老芳小哥_6320

老芳小哥_6320

发布时间:2026-02-07 09:16:00

|

586人浏览过

|

来源于php中文网

原创

JavaScript 中静态属性访问的正确方式:使用类名调用而非直接引用

在 javascript 类中定义的静态属性(如 `static validgears = [...]`)无法在实例方法中直接通过变量名访问,必须通过类名(如 `car.validgears`)或 `this.constructor.validgears` 显式引用,否则会抛出 `referenceerror`。

你遇到的 ReferenceError: validGears is not defined 错误,并非因为 validGears 没有定义,而是因为在实例方法 changeGear() 中,你试图像访问局部变量一样直接使用 validGears —— 但 JavaScript 不会自动将静态成员注入方法作用域。静态属性属于类本身,而非实例或函数作用域,因此必须显式通过类名或构造器引用。

✅ 正确写法:通过类名访问静态属性

修改 changeGear 方法中的判断逻辑即可:

class Car {
    constructor(data = {}) {
        this.color = data.color || "blue";
        this.currentSpeed = data.currentSpeed || 0;
        this.topSpeed = data.topSpeed || 25;
        this.currentGear = data.currentGear || "Park";
        this.maxGas = data.maxGas || 10;
        this.currentGas = data.currentGas || this.maxGas;
    }

    static validGears = ["Park", "Neutral", "Drive"];

    changeGear(newGear) {
        // ✅ 正确:通过类名访问静态数组
        if (Car.validGears.includes(newGear)) {
            if (newGear === this.currentGear) {
                console.log("Car is already in " + newGear);
            } else {
                this.currentGear = newGear;
                console.log("Gear changed to " + newGear);
            }
        } else {
            console.log("Invalid gear.");
        }
    }
}
? 提示:Array.prototype.includes() 比 switch + validGears[newGear] 更语义清晰、更安全。原代码中 validGears[newGear] 实际是在尝试用字符串(如 "Drive")作为数组索引,这会导致 undefined,进而使 case undefined 不匹配任何分支,最终落入 default —— 这不仅逻辑错误,还掩盖了根本的引用问题。

? 替代方案:使用 this.constructor(适用于继承场景)

若未来 Car 类被继承(例如 ElectricCar extends Car),且希望子类能复用或覆盖 validGears,推荐使用 this.constructor.validGears,它能动态绑定到当前实例的实际构造器:

chartjs-reporter
chartjs-reporter

此技能用于在用户需要将结构化数据(查询结果、CSV 摘要、JSON 记录或 Python 字典/列表)转换为独立的 HTML 页面时使用。

下载
changeGear(newGear) {
    const validGears = this.constructor.validGears;
    if (validGears && Array.isArray(validGears) && validGears.includes(newGear)) {
        this.currentGear = newGear;
        console.log(`Gear set to ${newGear}`);
    } else {
        console.log("Invalid gear.");
    }
}

此时若定义 class ElectricCar extends Car { static validGears = ["Park", "Drive", "Reverse", "Eco"]; },ElectricCar 实例调用 changeGear 将自动使用其自身的 validGears。

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

⚠️ 注意事项总结

  • ❌ validGears 是静态成员,不是全局变量,也不是方法内的局部变量,不可裸名引用;
  • ✅ 静态属性只能通过 ClassName.staticProperty 或 this.constructor.staticProperty 访问;
  • ? static 字段是 ES2022 正式标准语法(Node.js ≥ v16.0.0 原生支持),VS Code 和现代 Node.js 环境无需额外配置;
  • ? 调试时可在 VS Code 断点处输入 Car.validGears 查看值,验证静态属性已正确定义;
  • ? 若需模块化,确保该类已正确导出/导入(本例为单文件运行,无此问题)。

掌握静态成员的访问机制,是写出可维护、可扩展 JavaScript 类的关键一步。从“为什么报错”到“如何正确访问”,本质是理解 JavaScript 的作用域链与 this 绑定规则——而这里,this 指向实例,不携带静态属性;只有类对象本身才持有它们。

热门AI工具

更多
Laper
Laper Hot

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

WorkBuddy

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

DeepSeek

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

Lovart
Lovart Hot

一款面向视觉设计创作的AI设计平台,可通过智能体和画布工作流辅助制作海报、Logo、网页、PPT及其他视觉内容。

超级简历WonderCV

一款AI办公效率工具,主要用于免费求职简历模版下载制作,应届生职场人必备简历制作神器,适合需要提升相关任务效率的用户。

Atoms
Atoms Hot

Atoms是一款AI智能体工具,第一支自动构建真实业务的 AI 团队。

豆包大模型

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

Loomy
Loomy Hot

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

SkildArt
SkildArt Hot

SkildArt是一款AI文本写作工具,一站式 AI 视觉创作平台。

相关专题

更多
switch语句用法
switch语句用法

switch语句用法:1、Switch语句只能用于整数类型,枚举类型和String类型,不能用于浮点数类型和布尔类型;2、每个case语句后面必须跟着一个break语句,以防止执行其他case的代码块,没有break语句,将会继续执行下一个case的代码块;3、可以在一个case语句中匹配多个值,使用逗号分隔;4、Switch语句中的default代码块是可选的等等。

1071

2023.09.21

Java switch的用法
Java switch的用法

Java中的switch语句用于根据不同的条件执行不同的代码块。想了解更多switch的相关内容,可以阅读本专题下面的文章。

1417

2024.03.13

switch语句用法
switch语句用法

switch语句用法:1、Switch语句只能用于整数类型,枚举类型和String类型,不能用于浮点数类型和布尔类型;2、每个case语句后面必须跟着一个break语句,以防止执行其他case的代码块,没有break语句,将会继续执行下一个case的代码块;3、可以在一个case语句中匹配多个值,使用逗号分隔;4、Switch语句中的default代码块是可选的等等。

1071

2023.09.21

Java switch的用法
Java switch的用法

Java中的switch语句用于根据不同的条件执行不同的代码块。想了解更多switch的相关内容,可以阅读本专题下面的文章。

1417

2024.03.13

全局变量怎么定义
全局变量怎么定义

本专题整合了全局变量相关内容,阅读专题下面的文章了解更多详细内容。

4645

2025.09.18

python 全局变量
python 全局变量

本专题整合了python中全局变量定义相关教程,阅读专题下面的文章了解更多详细内容。

1930

2025.09.18

c++ 全局变量
c++ 全局变量

本专题整合了c++全局变量的使用、定义、作用域等等内容,阅读专题下面的文章了解更多详细内容。

199

2026.03.17

js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

1778

2023.08.03

Gradle插件开发入门教程
Gradle插件开发入门教程

本专题介绍Gradle插件开发的基本流程,涵盖插件类编写、自定义任务注册、扩展参数设计和插件应用方法,帮助你理解插件如何组织构建逻辑,减少多个项目之间的重复配置。

0

2026.10.22

热门下载

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

精品课程

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

共0课时 | 0人学习

React 教程
React 教程

共58课时 | 12.3万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.7万人学习

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

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