一文大白话讲清楚js中的继承（一）原型链继承+构造函数继承+组合式继承

最新推荐文章于 2025-11-28 17:48:54 发布

原创最新推荐文章于 2025-11-28 17:48:54 发布 · 481 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言 #原型链继承 #构造函数继承 #组合式继承

那些年写来写去的前端手写专栏收录该内容

20 篇文章

订阅专栏

一文大白话讲清楚js中的继承（一）原型链继承+构造函数继承+组合式继承

关于继承和原型链这个问题我在很多文章里面讲过了，如果有不懂js原型链的，请先看看相关的文章，比如这篇一文大白话讲清楚javascript继承，包括原型链继承，构造函数继承，组合式继承，原型式继承，寄生式继承和寄生组合继承
总而言之，继承的本质是让子拥有父的所有属性，包括父的祖先属性
那很简单么，无非就两种方法，一种是子原型直接指向父实例，这样父所有属性和父的祖先属性我就都有了
另一种就是在子构造函数里面直接执行父构造函数，那同样能实现
但是二者有什么去区别呢，别着急，我们先来一步步实现，再比对

原型链继承

就是我们说的第一种，直接吧子原型指向父实例

function Person(){
	this.name='tom'
}
Person.prototype.sayName=function(){
	console.log(`name is ${this.name}`)
}

function Student(){
	this.score=80
}
Student.prototype=new Person()
Student.prototype.constructor=Student
let stu=new Student()
console.log(stu)
console.log(stu.name)
console.log(stu.score)
stu.sayName()
console.log(stu.__proto__)
// Person { score: 80 }
// tom
// 80
// name is tom
// Person { name: 'tom' }

我们打印stu为{ score: 80 }，里面并没有name属性，但是我们打印console.log(stu.name)还是打印出来了tom，为什么，因为虽然stu里面有name，但是stu的原型是Person的实例，而这个实例里面是有name的，所以向上查找原型链的时候找到了，就打印了name
也就是说tom其实是这么打印出来的console.log(stu.proto.name),我们测试一下

function Person(){
	this.name='tom'
}
Person.prototype.sayName=function(){
	console.log(`name is ${this.name}`)
}

function Student(){
	this.score=80
}
Student.prototype=new Person()
Student.prototype.constructor=Student
let stu=new Student()
console.log(stu)
console.log(stu.name)
console.log(stu.__proto__.name)
console.log(stu.score)
stu.sayName()
console.log(stu.__proto__)
// Person { score: 80 }
// tom
// tom
// 80
// name is tom
// Person { name: 'tom' }

会发现打印了两个tom，说明我们的推测是正确的
这就是原型链继承，但是这个继承有什么问题呢，在这呢，我们是先把Student的原型指向Person的实例，然后再实例化Student，这就导致所有的Student实例共享一个Person的实例
上代码

function Person(){
	this.name='tom'
	this.score={
		math:80
	}
}

function Student(){
}
Student.prototype=new Person()
Student.prototype.constructor=Student
let stu1=new Student()
let stu2=new Student()
stu1.name='newTom'
stu1.score.math=90
console.log(stu1.name)
console.log(stu2.name)
console.log(stu1.score.math)
console.log(stu2.score.math)
// newTom
// tom
// 90
// 90

发现没，因为stu1和stu2共享了父实例，所以对于父实例的引用类型就会造成数据污染，一改全改
还有个问题，什么问题呢，假设我们的父构造函数是通过参数来给属性赋值的，我们上代码

function Person(name){
	this.name=name
}
function Student(){}

Student.prototype=new Person('tom')
Student.prototype.constructor=Student
let stu=new Student()
console.log(stu.name)

看出来没，因为要先把父实例赋值给子原型，所以父实例化的时候就必须把参数给到，也就是说我们在实例化子构造函数的时候再给付构造函数传值，必须提前传，这就很不友好，因为我们的高频操作肯定是实例化子构造函数，其他操作做一个封装，但是因为这个限制，封装就很不好实现
所以这个是个大问题，
还有一个问题，啥问题，这里Student只继承了一个Person，如果还有其他的构造函数要继承呢，怎么继承呢，再赋值给prototype么，那肯定不行，把上一个就覆盖了，所以理论上只能继承一个
没问题，这就是原型链继承的三大问题所在
1. 父类的引用类型属性会被子类实例共享
1. 无法实现多继承
1. 无法在实例化子类的时候向父类传递参数

构造函数继承

第二中继承，在构造函数里面执行构造函数，可以理解为借用构造函数，进一步可以理解为把两个构造函数合并为一个进行实例化
怎么理解呢，两个构造函数，一个A，一个B，现在想在实例化B的时候把A也实例化了，怎么做呢，很简单，在A的构造函数里面执行B的构造函数就可以了，但是这样虽然两个构造函数都执行了，但是执行出来的两个结果没有关联起来

function Person(){}
function Student(){
	Person()
}
let stu=new Student()

这里虽然两个构造函数都执行了，但是没有关联起来，也就是说stu里面还是没有Person的属性
怎么让他不仅执行还能关联起来呢，聪明的你又想到了call/apply
是的，我们只需要让Person执行的时候this指向当前对象就OK了

function Person(){}
function Student(){
	Person.call(this)
}
let stu=new Student()

酱紫就对上号了，new Student的时候，Student和Person的this指向是同一个，这不最后实例化的就是一个么，这样stu就包含了两个构造函数的属性
完整来个代码

function Person(name){
	this.name=name
	this.score={
		math:80
	}
}
function Student(name){
	Person.call(this,name)
	this.age=12
}

let stu=new Student('tom')
console.log(stu)
// Student { name: 'tom', score: { math: 80 }, age: 12 }

你看，这时候stu是不是Person和Student的属性都有了，而且实例化Student的时候可以直接给Person传参了，不用提前给参了，挺好
但别高兴地太早，我们是在子类里面直接调用父类的构造函数，而不是像原型链继承一样，把子类的原型指向父类的实例，这就导致，子类实例的原型链上没有父类的原型链，也就意味着，父类原型链上的所有东西，子类实例访问不到
二话不说，上代码验证

function Person(name){
	this.name=name
	this.score={
		math:80
	}
}
//父类原型链上的方法
Person.prototype.sayName=function(){
	console.log(`name is ${this.name}`)
}
function Student(name){
	Person.call(this,name)
	this.age=12
}

let stu=new Student('tom')
console.log(stu)
stu.sayName()//stu.sayName is not a function
console.log(stu.__proto__)//{}

看到了吧，stu的原型链上确实丢失了父类原型链，所以访问不到父类原型链上的方法
但是，祸福相依，虽然我丢失了父类原型，但是发现没有，每次new Student，Person都会重新执行一次，说明什么，说明所有子类实例不在共享父类的属性，而是各自肚子拥有

function Person(name){
	this.name=name
	this.score={
		math:80
	}
}

function Student(name){
	Person.call(this,name)
	this.age=12
}

let stu1=new Student('tom1')
let stu2=new Student('tom2')
stu1.score.math=59
console.log(stu1)
console.log(stu2)
// Student { name: 'tom1', score: { math: 59 }, age: 12 }
// Student { name: 'tom2', score: { math: 80 }, age: 12 }

看到了吧，这会stu1和stu2互不影响了
所以总结
优点
1. 子类实例化的时候可以向父类传递参数了
1. 子类实例不在共享父类的属性
缺点
1. 子类实例无法继承父类原型上的方法
1. 每个子类实例都有父类方法的副本
到这，你是不是有点想法了
原型链的缺点是不可以传递参数，且共享了属性，但是继承了父类原型上的方法，这不正好跟构造函数对应上了吗
于是你是不是在想，能不能把两个结合一下，优势互补一下，岂不妙哉
是的，你很棒，这就叫组合继承，原型链继承+构造函数继承

组合式继承

知道了原型链继承和构造函数继承，组合式继承就很好搞么，把两个融合在一起，也就是不仅执行构造函数，而且挂载原型
话不多说，上代码

function Person(name){
	this.name=name
	this.score={
		math:80
	}
}
Person.prototype.sayName=function(){
	console.log(`name is ${this.name}`)
}

function Student(name){
	Person.call(this,name)
	this.age=12
}
Student.prototype=new Person()
Student.prototype.constructor=Student

let stu1=new Student('tom1')
let stu2=new Student('tom2')

console.log(stu1)
console.log(stu2)

stu1.sayName()
stu2.sayName()

stu1.score.math=12

console.log(stu1)
console.log(stu2)
// Student { name: 'tom1', score: { math: 80 }, age: 12 }
// Student { name: 'tom2', score: { math: 80 }, age: 12 }
// name is tom1
// name is tom2
// Student { name: 'tom1', score: { math: 12 }, age: 12 }
// Student { name: 'tom2', score: { math: 80 }, age: 12 }

观察打印结果，你看几乎很完美的解决了我们需要的问题，
1. 实例化子类的时候可以向父类传递参数
1. 子类实例不再共享父类的引用类型
1. 子类实例继承了父类原型的方法
够完美了吧，很完美，但是瑕疵也还是有的，在哪里呢，眼尖的童鞋发现了，Person这个构造函数会执行两次，分别是挂载原型时候的new Person和子类里面调用Person.call
这个瑕疵大么，说大不大，但是肯定会有性能开销，这个是一定的
这三个算是一组
下篇文章讲另外一组，原型式继承+寄生式继承+寄生组合式继承