TypeScript继承中super访问属性返回undefined问题咨询

核心原因 #

TypeScript的类继承完全基于JavaScript的原型继承机制，super在实例方法中的作用是访问父类原型上的属性/方法，而不是父类的实例属性。

结合你的代码分析执行过程 #

1. 创建Customer实例时，new Customer("Pradeep", "Kumar")先调用子类构造函数，里面的super(fn, ln)触发父类Person的构造函数。
2. 父类构造函数里的this.firstName = fn和this.lastName = ln，这里的this指向的是当前正在创建的Customer实例——也就是说，这两个属性是直接挂载在实例对象本身上的，并没有放到Person的原型里。
3. 当你在displayDetails里用super.firstName时，相当于去Person.prototype上查找firstName，但这个原型上根本没有这个属性，所以返回undefined。
4. 换成this.firstName时，是直接从当前实例对象上读取属性，自然能拿到正确的值。

和C#/Java的区别 #

C#、Java是基于类的继承模型，父类的实例属性会被子类继承，base/super可以直接访问父类定义的属性。但TypeScript/JavaScript的原型继承和这个逻辑完全不同，实例属性统一存在于当前实例上，super只负责访问父类原型的成员。

修正后的代码 #

把super换成this即可：

class Person {
    public firstName: string;
    public lastName: string;

    constructor(fn: string, ln: string) {
        this.firstName = fn;
        this.lastName = ln;
    }
}

class Customer extends Person {
    constructor(fn: string, ln: string) {
        super(fn, ln);
    }

    displayDetails() {
        console.log(`First Name :${this.firstName}\tLast Name :${this.lastName}`);
    }
}

let c = new Customer("Pradeep", "Kumar");
c.displayDetails(); // 输出: First Name :Pradeep	Last Name :Kumar

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