JavaScript原型链面试题解析:实例属性与原型属性的优先级

作者:闭包旅人

时间:2026-10-30

浏览:641

本文深入解析一道关于JavaScript原型链的经典面试题。通过对比构造函数A、B、C的不同实现,详细阐述了实例属性与原型属性在属性查找机制中的优先级关系。重点分析了当构造函数未传参、传参但未赋值、以及条件赋值时,this.a与prototype.a的覆盖逻辑,最终得出输出值分别为1、undefined和2的结论。

文章目录

JavaScript原型链面试题解析

本文针对一道涉及JavaScript原型机制的面试题进行详细剖析。

题目代码如下:

代码实现与输出结果分析


function A(){
}
function B(a){
  this.a = a;
}
function C(a){
  if(a){
this.a = a;
  }
}
A.prototype.a = 1;
B.prototype.a = 1;
C.prototype.a = 1;
 
console.log(new A().a);
console.log(new B().a);
console.log(new C(2).a);

具体分析与推导过程如下:

执行 console.log(new A().a) 时,new A() 创建了一个实例对象。由于构造函数 A 内部没有定义属性 a,该对象自身不存在 a 属性。根据原型链查找规则,引擎向上查找至 A.prototype,发现其属性 a 的值为 1,因此最终输出结果为 1。

执行 console.log(new B().a) 时,构造函数 B 接收参数 a 并在内部执行 this.a = a。然而,在 new B() 实例化时未传入任何参数,导致参数 a 的值为 undefined。此时,实例对象上存在属性 a,其值为 undefined。根据原型链查找机制,实例属性会遮蔽原型属性,因此直接返回实例上的 a,输出结果为 undefined。

执行 console.log(new C(2).a) 时,构造函数 C 接收参数 a,且传入的实参为 2。在函数执行过程中,if(a) 条件判断为真,执行 this.a = 2。这使得实例对象上生成了属性 a,其值为 2。同样依据实例属性优先于原型属性的原则,最终输出结果为 2。

综上所述,上述三段代码的输出值依次为:1、undefined、2。

以上即为关于 JavaScript 原型链面试题的详细解析,希望能为读者提供清晰的思路与帮助。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章