深入解析JavaScript原型链与对象关系
本文详细解析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);
}
}
原型链可视化分析
图中的七个红色箭头分别对应七个console.log语句的输出结果。为了更直观地展示，我们使用图示进行说明，如图所示：
Object原型的特殊性
测试结果显示，Object.prototype和Student.prototype.__proto__所指向的Object并非同一个对象。这个Object正是前文提到的没有原型的Object，我们可以看到它并没有对应的prototype或__proto__属性：
完整原型链结构总结
根据上述图示，我们可以得出如下原型链结构：
由于个人语言表达能力有限，理解也较为浅显，因此文中使用了较多图示。如有错误之处，恳请指正，谢谢。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。
JS处理含Emoji或中文的字符串转数组乱码问题
2026-11-05 16:12:28
JS怎么使用展开运算符合并对象
2026-11-05 14:42:18
ES6+环境下判断JS对象为空的简洁写法
2026-11-05 12:12:23
怎么通过replacer函数自定义JS中JSON的格式化输出
2026-11-05 11:19:44
JS正则表达式基础：字面量与RegExp构造函数的区别及常用元字符
2026-11-05 11:16:58