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

在 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,它能动态绑定到当前实例的实际构造器:

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。

夏夕资源网专注于CMS网站模板,主流语言整站网站源码下载,网站建设相关教程分享,好用的软件素材整合下载,提供一站式便捷自助服务。
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如遇到加密压缩包,默认解压密码为"zy.lucklyus.top",如遇到无法解压的请联系管理员!
夏夕资源网-网站模板_免费源码_资源素材 » JavaScript 中静态属性访问的正确方式:使用类名调用而非直接引用-js教程
在线时间:12:00 - 22:00
关注微信公众号:微信公众号
站长邮箱:[email protected]
  • 运营天数: 1393+
  • 资源总数: 47989+
  • 用户总数: 1+
  • 今日更新: 0+
  • 访问次数: 4022763+
  • 本周更新: 0+
  • 最后更新: 2026-03-16

本站指数

×
  • 运营天数: 1393+
  • 资源总数: 47989+
  • 用户总数: 1+
  • 今日更新: 0+
  • 访问次数: 4022764+
  • 本周更新: 0+
  • 最后更新: 2026-03-16