JS实例返回undefined问题：Square实例sideLength属性值异常求助

问题出在Square类调用父类Shape的构造函数时参数传递不匹配。

Shape的构造函数需要三个参数：name、sides、sideLength，但你在Square的构造函数里仅传入一个参数sideLength给super()，这会导致：

• Shape的this.name被错误赋值为你传入的4
• Shape的this.sides和this.sideLength因未传入对应参数，保持undefined
• 后续你重新赋值了name和sides，但sideLength始终未被正确初始化，因此访问时返回undefined

修正后的代码 #

// OOJS 1
class Shape {
    name;
    sides;
    sideLength;
    constructor(name, sides, sideLength) {
        this.name = name;
        this.sides = sides;
        this.sideLength = sideLength;
    }

    calcPerimeter() {
        console.log(this.sides * this.sideLength);
    }
}

class Square extends Shape {
    constructor(sideLength) {
        // 按照Shape构造函数的参数顺序传递对应值
        super('Square', 4, sideLength);
        // 此处无需重复赋值name和sides，super已完成初始化
        // this.name = 'Square';
        // this.sides = 4;
    }

    calcArea() {
        console.log(Math.pow(this.sideLength, 2));
    }
}

const newSquare = new Square(4);
console.log(newSquare.sideLength); // 现在会输出4

你也可以给Shape的构造函数设置默认参数来增强容错性，但最直接的方式是确保super()传递的参数与父类构造函数的定义完全匹配。

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