当前位置：首页 > 全部内容 > 正文

深入解析JavaScript原型继承：从基础到深拷贝方案

作者：函数茶馆

时间：2026-10-28

浏览：312

本文深入探讨JavaScript的原型继承机制，解析原型链的形成原理。通过对比基本模式、借用构造函数、圣杯模式及作者提出的深拷贝方案，分析各实现方式的优缺点。重点解决共享原型导致的对象属性污染问题，提供完整的继承实现代码与注意事项。

文章目录

JavaScript原型继承概述

严格来说，JavaScript并非传统的面向对象语言，缺乏标准的继承机制。但它提供了一种基于原型的继承方式，通过利用内置的原型属性来实现对象间的继承关系。

原型与原型链

原型与原型链机制

在讨论原型继承之前，有必要先厘清原型和原型链的概念，因为它们是实现原型继承的基础。在JavaScript中，每个函数都拥有一个指向其原型的prototype属性。由该函数实例化的对象则拥有__proto__属性，指向该函数的原型。由于原型本身也是对象，它同样拥有__proto__属性指向更上层的原型，如此层层递进，直至Object对象的原型，从而构成原型链。

JavaScript原型继承概述

所有函数本质上都是由Function构造函数创建的对象，因此每个函数也拥有__proto__属性，指向Function函数的原型。需要明确的是，真正构成原型链的是每个实例对象的__proto__属性，而非函数的prototype属性，这一点至关重要。

原型继承

基本原型继承模式

基本模式

代码如下:

var Parent = function(){
this.name = 'parent' ;
} ;
Parent.prototype.getName = function(){
return this.name ;
} ;
Parent.prototype.obj = {a : 1} ;
var Child = function(){
 this.name = 'child' ;
} ;
Child.prototype = new Parent() ;
var parent = new Parent() ;
var child = new Child() ;
console.log(parent.getName()) ; //parent
console.log(child.getName()) ; //child

这是实现原型继承最简单的方法，即将父类的实例直接赋值给子类的prototype属性。这样，子类的实例即可访问父类以及父类构造函数prototype中的属性。这种继承方式的原型结构如下图所示：

JavaScript原型继承概述

该方法的优点在于实现简单，无需特殊操作；但缺点同样明显。如果子类需要执行与父类构造函数相同的初始化逻辑，则必须在子类构造函数中重复编写父类的初始化代码：

代码如下:

var Parent = function(name){
this.name = name || 'parent' ;
} ;
Parent.prototype.getName = function(){
return this.name ;
} ;
Parent.prototype.obj = {a : 1} ;
var Child = function(name){
 this.name = name || 'child' ;
} ;
Child.prototype = new Parent() ;
var parent = new Parent('myParent') ;
var child = new Child('myChild') ;
console.log(parent.getName()) ; //myParent
console.log(child.getName()) ; //myChild

上述情况仅涉及初始化name属性，若初始化逻辑日益复杂，这种方式将变得极不方便。因此，出现了改进方案。

借用构造函数模式

借用构造函数

代码如下:

var Parent = function(name){
this.name = name || 'parent' ;
} ;
Parent.prototype.getName = function(){
return this.name ;
} ;
Parent.prototype.obj = {a : 1} ;
var Child = function(name){
 Parent.apply(this,arguments) ;
} ;
Child.prototype = new Parent() ;
var parent = new Parent('myParent') ;
var child = new Child('myChild') ;
console.log(parent.getName()) ; //myParent
console.log(child.getName()) ; //myChild

该方法通过在子类构造函数中使用apply调用父类构造函数，从而执行相同的初始化工作。无论父类包含多少初始化逻辑，子类均可执行。然而，此实现存在一个问题：父类构造函数被执行了两次，一次在子类构造函数内部，另一次在赋值子类原型时。这种冗余操作需要进一步优化：

代码如下:

var Parent = function(name){
this.name = name || 'parent' ;
} ;
Parent.prototype.getName = function(){
return this.name ;
} ;
Parent.prototype.obj = {a : 1} ;
var Child = function(name){
 Parent.apply(this,arguments) ;
} ;
Child.prototype = Parent.prototype ;
var parent = new Parent('myParent') ;
var child = new Child('myChild') ;
console.log(parent.getName()) ; //myParent
console.log(child.getName()) ; //myChild

如此，我们只需在子类构造函数中执行一次父类构造函数，同时继承父类原型中的属性。这符合原型的初衷，即将可复用内容置于原型中，而继承的正是这些可复用内容。该方式的原型结构如下：

JavaScript原型继承概述

圣杯模式与原型隔离

临时构造函数模式(圣杯模式)

上述借用构造函数模式的改进版仍存在隐患。它将父类原型直接赋值给子类原型，导致对子类原型的修改会同时影响父类原型，进而影响父类对象，这通常不是期望的结果。为解决此问题，引入了临时构造函数模式。

代码如下:

var Parent = function(name){
this.name = name || 'parent' ;
} ;
Parent.prototype.getName = function(){
return this.name ;
} ;
Parent.prototype.obj = {a : 1} ;
var Child = function(name){
 Parent.apply(this,arguments) ;
} ;
var F = new Function(){} ;
F.prototype = Parent.prototype ;
Child.prototype = new F() ;
var parent = new Parent('myParent') ;
var child = new Child('myChild') ;
console.log(parent.getName()) ; //myParent
console.log(child.getName()) ; //myChild

该方法的原型继承结构如下：

JavaScript原型继承概述

可以看出，通过在父类原型和子类原型之间引入临时构造函数F，切断了子类原型与父类原型的直接联系。这样，当修改子类原型时，不会影响父类原型。

深拷贝继承方案

我的方法

《Javascript模式》一书在介绍圣杯模式后便结束，但上述方法均存在一个不易察觉的问题。注意我在Parent的prototype属性中定义了一个obj对象字面量属性，但一直未使用。基于圣杯模式，我们考察以下情况：

代码如下:

var Parent = function(name){
this.name = name || 'parent' ;
} ;
Parent.prototype.getName = function(){
return this.name ;
} ;
Parent.prototype.obj = {a : 1} ;
var Child = function(name){
 Parent.apply(this,arguments) ;
} ;
var F = new Function(){} ;
F.prototype = Parent.prototype ;
Child.prototype = new F() ;
var parent = new Parent('myParent') ;
var child = new Child('myChild') ;
console.log(child.obj.a) ; //1
console.log(parent.obj.a) ; //1
child.obj.a = 2 ;
console.log(child.obj.a) ; //2
console.log(parent.obj.a) ; //2

在上述情况中，当修改child对象的obj.a时，父类原型中的obj.a也会被修改，这与共享原型的问题类似。原因在于，访问child.obj.a时，会沿原型链查找至父类的prototype，找到obj属性后对其a属性进行修改。再看另一种情况：

代码如下:

var Parent = function(name){
this.name = name || 'parent' ;
} ;
Parent.prototype.getName = function(){
return this.name ;
} ;
Parent.prototype.obj = {a : 1} ;
var Child = function(name){
 Parent.apply(this,arguments) ;
} ;
var F = new Function(){} ;
F.prototype = Parent.prototype ;
Child.prototype = new F() ;
var parent = new Parent('myParent') ;
var child = new Child('myChild') ;
console.log(child.obj.a) ; //1
console.log(parent.obj.a) ; //1
child.obj.a = 2 ;
console.log(child.obj.a) ; //2
console.log(parent.obj.a) ; //2

这里存在一个关键问题：当对象访问原型中的属性时，该属性对对象而言是只读的。也就是说，child对象可以读取obj对象，但无法修改原型中obj对象的引用。因此，当child修改obj时，并不会影响原型中的obj对象，它只是在自身对象上添加了一个obj属性，覆盖了父类原型中的obj属性。然而，当child修改obj.a时，它先读取了原型中obj的引用，此时child.obj和Parent.prototype.obj指向同一对象，因此child对obj.a的修改会影响Parent.prototype.obj.a的值，进而影响父类对象。AngularJS中关于$scope嵌套的继承方式即模仿JavaScript的原型继承实现。根据上述描述，只要子类对象访问到的原型与父类原型是同一对象，就会出现上述情况。因此，我们可以对父类原型进行拷贝后再赋值给子类原型，这样当子类修改原型属性时，仅修改父类原型的副本，不影响父类原型。具体实现如下：

代码如下:

var deepClone = function(source,target){
source = source || {} ;
var toStr = Object.prototype.toString ,
arrStr = '[object array]' ;
for(var i in source){
if(source.hasOwnProperty(i)){
var item = source[i] ;
if(typeof item === 'object'){
target[i] = (toStr.apply(item).toLowerCase() === arrStr) : [] ? {} ;
deepClone(item,target[i]) ;
}else{
deepClone(item,target[i]) ;
            }
        }
    }
return target ;
} ;
var Parent = function(name){
this.name = name || 'parent' ;
} ;
Parent.prototype.getName = function(){
return this.name ;
} ;
Parent.prototype.obj = {a : '1'} ;
var Child = function(name){
 Parent.apply(this,arguments) ;
} ;
Child.prototype = deepClone(Parent.prototype) ;
var child = new Child('child') ;
var parent = new Parent('parent') ;
console.log(child.obj.a) ; //1
console.log(parent.obj.a) ; //1
child.obj.a = '2' ;
console.log(child.obj.a) ; //2
console.log(parent.obj.a) ; //1

综合上述所有考虑，JavaScript继承的具体实现如下，此处仅考虑Child和Parent均为函数的情况：

代码如下:

var deepClone = function(source,target){
source = source || {} ;
var toStr = Object.prototype.toString ,
arrStr = '[object array]' ;
for(var i in source){
if(source.hasOwnProperty(i)){
var item = source[i] ;
if(typeof item === 'object'){
target[i] = (toStr.apply(item).toLowerCase() === arrStr) : [] ? {} ;
deepClone(item,target[i]) ;
}else{
deepClone(item,target[i]) ;
            }
        }
    }
return target ;
} ;
var extend = function(Parent,Child){
 Child = Child || function(){} ;
 if(Parent === undefined)
 return Child ;
 //借用父类构造函数
 Child = function(){
 Parent.apply(this,argument) ;
 } ;
 //通过深拷贝继承父类原型 
 Child.prototype = deepClone(Parent.prototype) ;
 //重置constructor属性
 Child.prototype.constructor = Child ;
} ;

总结

总结

综上所述，JavaScript实现继承的方式灵活多样，并无绝对最优解，需根据具体需求选择。关键在于理解JavaScript继承的原理，即原型和原型链机制。只要透彻理解这些概念，即可灵活实现各种继承需求。

实用工具推荐

电子包浆

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

使用 ›
图片压缩

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

使用 ›
作者最新文章

JS split切割后出现空字符串怎么过滤

在 React 或 Vue 项目中封装使用 JS 节流防抖

JavaScript中怎么将带小数的字符串转为整数？

怎么用JavaScript策略模式重构电商促销计算逻辑？

JS使用constructor判断数据类型可靠吗

相关文章
热门文章
更多
CSS text-transform与JS修改首字母大写的适用场景区别
JS中constructor属性判断数组存在哪些风险
JS正则替换中$1捕获组引用与字符串重组技巧
全栈开发中JavaScript与Java怎么协作？前后端技术栈配合解析
Node.js后端生成高强度随机字符串的方法
怎么在本地运行JavaScript脚本：Node.js下载安装与环境配置教程
JS正则表达式基础：字面量与RegExp构造函数的区别及常用元字符
JS 解压出现乱码或报错怎么解决？
JavaScript常见SyntaxError语法错误排查与修复方法
JS动态构建复杂嵌套JSON对象的方法