深入解析JavaScript原型链与对象关系

作者：拾光

时间：2026-10-30

本文详细解析JavaScript中的原型链机制，通过Student构造函数与xiaoming实例的交互，展示__proto__与prototype的关系。文章逐步推导从实例到构造函数，再到Object.prototype的完整继承路径，揭示对象属性查找与继承的核心原理。

文章目录

JavaScript原型链基础概念

在JavaScript中，每个对象都关联着另一个对象，这个被关联的对象被称为“原型”。所有对象都会从原型中继承属性和方法。值得注意的是，存在一个特殊的对象没有原型，即Object，具体细节将在后续图示中说明。

构造函数与实例化过程

为了便于理解，我们首先定义一个名为Student的函数：


function Student(name){
  this.name = name;
 this.hello = function(){
   alert(`Hello,${this.name}`);
 }
 }

该函数包含一个属性name和一个方法hello。在JavaScript中，可以使用new关键字来调用Student函数（如果不写new，它只是一个普通函数；如果写了new，它则作为构造函数），并返回一个原型指向Student.prototype的对象，示例如下：


 var xiaoming = new Student("xiaoming");
 alert(xiaoming.name); // xiaoming
 xiaoming.hello(); // Hello,xiaoming

原型链关系验证

为了验证上述设想是否正确，我们可以尝试比较xiaoming.prototype和Student.prototype是否相等。然而，xiaming对象本身并没有prototype属性，但可以通过__proto__属性进行查看。接下来，我们将利用这些属性来探究xiaoming、Student和Object之间的原型链关系：


document.onreadystatechange = function(){
 // interactive表示文档已被解析，但浏览器还在加载其中链接的资源
 if(document.readyState === "interactive"){
  var xiaoming = new Student("xiaoming");
  alert(xiaoming.name);
  xiaoming.hello();
  console.log("xiaoming.__proto__：");
  console.log(xiaoming.__proto__);
  console.log("Student.prototype：");
  console.log(Student.prototype);
  console.log("xiaoming.__proto__ === Student.prototype：" + xiaoming.__proto__ === Student.prototype);
  console.log("Student.prototype.constructor：" + Student.prototype.constructor);
  console.log("Student.prototype.prototype：" + Student.prototype.prototype);
  console.log("Student.prototype.__proto__：");
  console.log(Student.prototype.__proto__);
  console.log(Object.prototype);
  console.log("Student.prototype.__proto__ === Object.prototype：" + Student.prototype.__proto__ === Object.prototype);
 }
}

JavaScript原型链基础概念