子类SelectableTCGPlayerSKU的price属性初始化后始终为undefined求助

我搞不懂为什么子类的price属性在初始化后会变成undefined，感觉语法没问题，但可能哪里错了。翻了Stack Overflow的帖子，没找到完全匹配的解决方案。

代码示例 #

Product.ts #

import { PriceRestriction } from "@/utils/Enums";
import TCGPlayerPriceModel from "./TCGPlayerPriceModel";

export class TCGPlayerSKU {
    skuId: string;
    productId: number;
    languageId: number;
    languageName: string;
    languageAbbreviation: string;
    printingId: number;
    conditionId: number;
    conditionName: string;
    dropDownDisplayName: string;
    conditionAbbreviation: string;

    constructor() {
        this.skuId = "";
        this.productId = 0;
        this.languageId = 0;
        this.languageName = "";
        this.languageAbbreviation = "", // 此处误用逗号而非分号
        this.printingId = 0;
        this.conditionId = 0;
        this.conditionName = "";
        this.dropDownDisplayName = "";
        this.conditionAbbreviation = "";
        
    }
}

export class SelectableTCGPlayerSKU extends TCGPlayerSKU {
    isChecked: boolean;
    price: TCGPlayerPriceModel;  // 该属性始终为undefined

    constructor() {
        super();
        this.isChecked = false, // 此处误用逗号而非分号
        this.price = new TCGPlayerPriceModel(); 
    }
}

TCGPlayerPriceModel.ts #

export default class TCGPlayerPriceModel {
    sku: string;
    lowestListingPrice: number;
    lowPrice: number;

    constructor() {
        this.sku = "", // 此处误用逗号而非分号
        this.lowestListingPrice = -9, // 此处误用逗号而非分号
        this.lowPrice = -9
    }
}

Example.ts #

import {
  ImportedProduct,
  TCGPlayerSKU,
  SelectableTCGPlayerSKU,
} from "@/models/Product";

let sku = new SelectableTCGPlayerSKU();

sku.price.lowestListingPrice; // undefined

问题原因与修复方案 #

问题的根源是构造函数中误用逗号代替分号。虽然逗号表达式在JavaScript语法上允许，但这种写法极易引发解析异常或意外行为，导致属性未被正确赋值。

将所有构造函数里的逗号替换为分号即可解决问题：

修复后的Product.ts #

import { PriceRestriction } from "@/utils/Enums";
import TCGPlayerPriceModel from "./TCGPlayerPriceModel";

export class TCGPlayerSKU {
    skuId: string;
    productId: number;
    languageId: number;
    languageName: string;
    languageAbbreviation: string;
    printingId: number;
    conditionId: number;
    conditionName: string;
    dropDownDisplayName: string;
    conditionAbbreviation: string;

    constructor() {
        this.skuId = "";
        this.productId = 0;
        this.languageId = 0;
        this.languageName = "";
        this.languageAbbreviation = "";
        this.printingId = 0;
        this.conditionId = 0;
        this.conditionName = "";
        this.dropDownDisplayName = "";
        this.conditionAbbreviation = "";
        
    }
}

export class SelectableTCGPlayerSKU extends TCGPlayerSKU {
    isChecked: boolean;
    price: TCGPlayerPriceModel;

    constructor() {
        super();
        this.isChecked = false;
        this.price = new TCGPlayerPriceModel(); 
    }
}

修复后的TCGPlayerPriceModel.ts #

export default class TCGPlayerPriceModel {
    sku: string;
    lowestListingPrice: number;
    lowPrice: number;

    constructor() {
        this.sku = "";
        this.lowestListingPrice = -9;
        this.lowPrice = -9;
    }
}

修改后，sku.price会被正确初始化为TCGPlayerPriceModel的实例，sku.price.lowestListingPrice的值也会是-9，而非undefined。

内容的提问来源于stack exchange，提问作者Jonathan