深入理解JavaScript原型链：__proto__与prototype的关系
本文详细解析JavaScript原型链的实现原理，重点阐述__proto__与prototype的区别与联系。通过拆解new运算符的执行步骤及对象属性查找机制，结合Person类继承示例，揭示原型链在JavaScript面向对象编程中的核心作用。
本文深入探讨了JavaScript中原型链的核心机制，旨在帮助开发者清晰理解其工作原理。
JavaScript原型链基础
一、JavaScript原型链基础
ECMAScript规范定义了原型链，并将其作为实现继承的主要手段。其核心思想是利用原型对象，使一个引用类型能够继承另一个类型的属性和方法。在JavaScript中，通过[[wp:a数字]]属性来追踪对象的原型链。当访问一个对象的属性时，引擎会沿着原型链向上查找，直到找到该属性或到达链的末端。
例如，考虑以下代码场景：
扩展Object类，添加Clone和Extend方法
/*扩展Object类，添加Clone，JS实现克隆的方法*/
Object.prototype.Clone = function(){
var objClone;
if (this.constructor == Object){
objClone = new this.constructor();
}else{
objClone = new this.constructor(this.valueOf());
}
for(var key in this){
if ( objClone[key] != this[key] ){
if ( typeof(this[key]) == 'object' ){
objClone[key] = this[key].Clone();
}else{
objClone[key] = this[key];
}
}
}
objClone.toString = this.toString;
objClone.valueOf = this.valueOf;
return objClone;
}
/*扩展Object类，添加Extend方法来实现JS继承, 目标对象将拥有源对象的所有属性和方法*/
Object.prototype.Extend = function (objDestination, objSource) {
for (var key in objSource) {
if (objSource.hasOwnProperty(key) && objDestination[key] === undefined) {
objDestination[key] = objSource[key];
}
}
return objDestination;
}
定义Person类
/*定义一个Person类*/
function Person(_name,_age){
this.name = _name;
this.age = _age;
}
在JavaScript中，Object是所有类的基类。因此，Person类自然继承了Object的所有public属性和方法，包括我们手动添加的Clone和Extend方法。
可以通过以下代码验证Person类确实继承了Object类：
document.write("<pre>");
var p = new Person("孤傲苍狼",24);//创建一个人，名字是孤傲苍狼
var cloneP = p.Clone();//p调用在Object类中定义的Clone方法来克隆自己，如果能得到一个cloneP，那就证明了Person类确实是继承了Object类，所以就拥有了Clone
document.writeln("p是使用Person类以构造函数的方式创建出来的对象，p.name = "+p.name+"，p.age = "+p.age);
document.writeln("cloneP是p调用Clone方法克隆出来的对象，cloneP.name = "+cloneP.name+"，cloneP.age = "+cloneP.age);
document.writeln("cloneP对象和p对象是两个相互独立的对象，这两个对象的内存地址肯定是不相等，p == cloneP的结果是："+(p == cloneP));
cloneP.name="白虎神皇";//修改cloneP的名字
document.writeln("cloneP的name被修改了，cloneP.name = "+cloneP.name);
document.writeln("cloneP的name修改了，但是不影响到p，p.name = "+p.name);
document.write("</pre>");
运行结果：
那么，Person类是如何继承Object类的呢？它采用的是原型（prototype）继承方式：
/*定义一个Person类*/
function Person(_name,_age){
this.name = _name;
this.age = _age;
}
Person.prototype = new Object();//让Person类继承Object类
根据JavaScript的规定，所有类都隐式继承自Object类。因此，即使不显式编写[[wp:a数字]]，JavaScript引擎也可能在内部自动处理，或者采用[[wp:a数字]]的方式让Person继承Object。[[wp:a数字]]实际上是将Object对象作为Person的原型，这相当于将Object的属性和方法“复制”到了Person上。
new运算符的工作机制
二、new运算符的工作机制
我们先分析以下代码：
代码如下:
var p = new Person("孤傲苍狼",24);//创建一个人，名字是孤傲苍狼这段代码看似简单，但new运算符背后执行了三个关键步骤：
1. var p={}; 初始化一个空对象p。
2. p.__proto__=Person.prototype;，将对象p的[[wp:a数字]]属性指向Person.prototype。
3. Person.call(p,"孤傲苍狼",24);，调用构造函数Person来初始化p。
关键在于第二步，我们通过以下代码进行验证：
var p = new Person("孤傲苍狼",24);//创建一个人，名字是孤傲苍狼
alert("p.__proto__ === Person.prototype的结果是："+(p.__proto__ === Person.prototype));
在火狐下的运行结果：
这段代码会返回true。说明我们步骤2的正确。
注意：[[wp:a数字]]这个属性只有在firefox或者chrome浏览器中才是公开允许访问的，因此，其他基于IE内核的浏览器是不会返回true的。
那么[[wp:a数字]]是什么？在这里简单地说下。每个对象都会在其内部初始化一个属性，就是[[wp:a数字]]，当我们访问一个对象的属性时，如果这个对象内部不存在这个属性，那么他就会去[[wp:a数字]]里找这个属性，这个[[wp:a数字]]又会有自己的[[wp:a数字]]，于是就这样一直找下去，也就是我们平时所说的原型链的概念。
按照标准，[[wp:a数字]]是不对外公开的，也就是说是个私有属性，在IE下是无法访问[[wp:a数字]]属性的，但是Firefox的引擎将他暴露了出来成为了一个公有的属性，我们可以对外访问和设置。
原型链查找与复杂继承示例
好，概念说清了，让我们看一下下面这些代码：
<script type="text/javascript">
var Person = function () { };
Person.prototype.Say = function () {
alert("Person say");
}
var p = new Person();
p.Say();
</script>
这段代码很简单，我们看下为什么p可以访问Person的Say。
首先
代码如下:
var p=new Person();可以得出
代码如下:
p.__proto__=Person.prototype那么当我们调用p.Say()时，首先p中没有Say这个属性， 于是，他就需要到他的[[wp:a数字]]中去找，也就是Person.prototype，而我们在上面定义了
Person.prototype.Say=function(){
alert("Person say");
};
于是，就找到了这个方法。
接下来，让我们看个更复杂的。
<script type="text/javascript">
var Person = function () { };
Person.prototype.Say = function () {
alert("Person say");
}
Person.prototype.Salary = 50000;
var Programmer = function () { };
Programmer.prototype = new Person();//让程序员类从人这个类继承
Programmer.prototype.WriteCode = function () {
alert("programmer writes code");
};
Programmer.prototype.Salary = 500;
var p = new Programmer();
p.Say();
p.WriteCode();
alert(p.Salary);
</script>
我们来做这样的推导：
代码如下:
var p=new Programmer();可以得出
代码如下:
p.__proto__=Programmer.prototype;而在上面我们指定了
代码如下:
Programmer.prototype=new Person();我们来这样拆分，
var p1=new Person();
Programmer.prototype=p1;
那么:
p1.__proto__=Person.prototype;
Programmer.prototype.__proto__=Person.prototype;
由根据上面得到
代码如下:
p.__proto__=Programmer.prototype可以得到：
代码如下:
p.__proto__.__proto__=Person.prototype好，算清楚了之后我们来看上面的结果,p.Say()。由于p没有Say这个属性，于是去 p.__proto__，也就是Programmer.prototype，也就是p1中去找，由于p1中也没有Say，那就去 p.__proto__.__proto__，也就是Person.prototype中去找，于是就找到了Say方法。这也就是原型链的实现原理。
以下代码展示了JS引擎如何查找属性：
function getProperty(obj, prop) {
if (obj.hasOwnProperty(prop))
return obj[prop];
else if (obj.__proto__ !== null)
return getProperty(obj.__proto__, prop);//递归
else
return undefined;
}
范例：查找p对象的Say方法
<script type="text/javascript">
/*查找obj对象的prop属性*/
function getProperty(obj, prop) {
if (obj.hasOwnProperty(prop))
return obj[prop];
else if (obj.__proto__ !== null)
return getProperty(obj.__proto__, prop);//递归
else
return undefined;
}
var Person = function () { };//定义Person类
Person.prototype.Say = function () {
alert("Person say");
}
Person.prototype.Salary = 50000;
var Programmer = function () { };//定义Programmer类
//Programmer.prototype = new Person();//让程序员类从人这个类继承，写法一
Programmer.prototype = Person.prototype;//让程序员类从人这个类继承，写法二
Programmer.prototype.WriteCode = function () {
alert("programmer writes code");
};
Programmer.prototype.Salary = 500;
var p = new Programmer();
var SayFn = getProperty(p,"Say");//查找p对象的Say方法
SayFn.call(p);//调用找到的Say方法
</script>
在火狐下的运行结果：
其实prototype只是一个假象，他在实现原型链中只是起到了一个辅助作用，换句话说，他只是在new的时候有着一定的价值，而原型链的本质，其实在于[[wp:a数字]]。
希望本文所述对大家JavaScript程序设计有所帮助。
JS合并多个数组的三种方法：concat、spread与flat
2026-11-05 17:39:45
JavaScript怎么准确判断数据类型：typeof、instanceof与Object.prototype.toString
2026-11-05 17:09:21
JS中将数组和对象混合组装为JSON字符串
2026-11-05 16:41:42
JS运算符优先级与结合性的区别是什么？
2026-11-05 13:22:02
JS Map怎么只遍历Key或Value
2026-11-05 13:00:36