JavaScript中关联构造函数并原型继承后，如何访问继承属性？

嘿，看来你踩了原型继承里一个很常见的新手坑！我来帮你拆解清楚问题出在哪，以及怎么解决。

问题根源 #

你写的sample1.prototype = sample2;是把构造函数sample2本身赋值给了sample1的原型，但sample2里的this.age = 21是在调用new sample2()时，才会给新创建的实例对象添加age属性——sample2这个函数对象本身并没有age属性，所以你的test实例自然找不到它。

简单说：你把“构造函数”当成了“构造函数的实例”来用，原型链上根本没有age这个属性。

正确的解决方案 #

方案1：用构造函数实例作为原型 #

把sample1的原型指向sample2的实例，这样test的原型链上就会包含带有age属性的sample2实例：

function sample1() { this.uname = "Andrew"; }
function sample2() { this.age = 21; }

// 核心修改：让sample1的原型是sample2的实例
sample1.prototype = new sample2();
// 可选但推荐：修正constructor指向（避免后续判断实例构造函数时出错）
sample1.prototype.constructor = sample1;

let test = new sample1();
console.log(test.uname); // 输出 "Andrew"
console.log(test.age); // 输出 21

此时test的原型链是：test → sample2实例 → sample2.prototype → Object.prototype，sample2实例上存在age属性，所以test能正常访问。

方案2：用ES6 Class语法（更直观） #

如果你用的是现代浏览器环境，推荐用Class语法糖来实现继承，逻辑更清晰，不容易出错：

class sample2 {
  constructor() {
    this.age = 21;
  }
}

class sample1 extends sample2 {
  constructor() {
    super(); // 必须调用super()初始化父类构造函数，才能访问this
    this.uname = "Andrew";
  }
}

let test = new sample1();
console.log(test.uname); // 输出 "Andrew"
console.log(test.age); // 输出 21

extends本质还是基于原型链实现的，但语法更贴近面向对象的直觉，super()会帮你调用父类的构造函数，从而给实例添加上age属性。

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