JS继承最简单的理解方式_还不赶快收藏一波在被窝慢慢看
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了JS继承最简单的理解方式_还不赶快收藏一波在被窝慢慢看，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3409字，纯文字阅读大概需要5分钟。
内容图文
我们可以简单的分为以下几种继承方式：
- 原型链继承
- 构造函数继承
- 组合继承
- 寄生组合继承/加强版寄生组合继承
- 类继承
以下 A代表父级 B代表子级
我们先看原型链继承
先上代码
function A(name,age){
this.name = name;
this.arr = [];
this.age = age;
this.sing = function(){
return '我会唱歌、我会跳舞。'
}
}
function B(run){
this.run = run
}
B.prototype = new A('zjq',18)
console.log(new B()._proto_ === A.construct)
let a = new B('123')
let b = new B('456')
a.arr.push('1')
console.log(b.arr) //['1']
B已经完全的集成到了A的属性和方法，但是有一个缺点就是当我们实例化两个B的时候，给第一个arr添加item，第二个实例化对象也会跟着变化。a和b的arr都新添了一个item。方法变成了共享，不是实例所私有的。（引用类型）
构造函数继承
上代码
function A(name,age){
this.name = name;
this.age = age;
this.arr =[];
this.sing = function(){
return '我会唱歌、我会跳舞。'
}
}
function B(run){
this.run = run
A.call(this,'zjq',this.run) //父级的属性和方法称为子级的私有属性和方法 子级可以向父级传参
}
let Bobj = new B('runing')
console.log(Bobj)
console.log(Bobj.sing())
let a = new B('123')
let b = new B('456')
a.arr.push('1')
console.log(b.arr) //[]
构造函数继承虽然可以使用A中的方法和属性，但是不是继承的关系过来的，它的_proto_上没有A的任何信息，它将A的属性和方法变成了自己的属性和方法。创建子类实例，可以向父类构造函数传参数。解决了方法变成了共享的问题，变成了实例所私有的。
组合继承
上代码
function A(name, age) {
this.name = name;
this.age = age;
this.arr=[]
}
A.prototype.sing = function () {
return '我会唱歌、我会跳舞。' + this.name + this.age
}
function B(run) {
this.run = run
A.call(this, 'zjq', this.run) //父级的属性和方法称为子级的私有属性和方法 子级可以向父级传参
}
B.prototype = new A()
let brr = new B('参数')
let a = new B('123')
let b = new B('456')
a.arr.push('1')
console.log(b.arr) //[]
console.log(brr)
console.log(brr.sing())
console.log(brr.age)
结合原型链继承和借用构造函数继承的优点 ，继承了A的属性和方法也可以向A传递自己的参数。解决了方法变成了共享的问题，变成了实例所私有的，但是A构造函数被调用了两次。
寄生组合继承
上代码
function A(name, age) {
this.name = name;
this.age = age;
this.arr = []
}
A.prototype.sing = function () {
return '我会唱歌、我会跳舞。' + this.name + this.age
}
function B(run) {
this.run = run
A.call(this, 'zjq', this.run)
}
B.prototype = A.prototype
// let b= new B('123')
// console.log(b)
B.prototype.sing = function () {
return 'xxx'
}
let a = new B('123')
let b = new B('456')
a.arr.push('1')
console.log(b.arr) //[]
console.log(new A().sing()) //变成了xxx 而不是 return '我会唱歌、我会跳舞。' + this.name + this.age
解决了方法变成了共享的问题，变成了实例所私有的，但是又有一个突出的问题，B可以改变原型链上的东西，A和B共享了原型链。
加强版寄生组合继承
function A(name, age) {
this.name = name;
this.age = age;
}
A.prototype.sing = function () {
return '我会唱歌、我会跳舞。' + this.name + this.age
}
function B(run) {
this.run = run
A.call(this, 'zjq', this.run)
}
function f(){}
f.prototype = A.prototype
B.prototype = new f()
let b= new B('123')
console.log(b)
B.prototype.sing = function(){
return 'xxx'
}
console.log(new A().sing()) //return '我会唱歌、我会跳舞。' + this.name + this.age
解决了共享原型链的问题。 完美收官。
类继承
上代码
class A {//父级构造函数
constructor(name) {
this.name = name;
}
sing() {
return this.name + 'xxx'
}
}
class B extends A { //子级继承父级
constructor(name,age) {
super(name) 调用实现父类的构造函数 并传递参数
this.age = age
}
}
let b = new B(12333,222) //实例化子级
console.log(b)
console.log(b.sing()) //return this.name + 'xxx'
以上内容有不对的还请大佬及时评论。
内容总结
以上是互联网集市为您收集整理的JS继承最简单的理解方式_还不赶快收藏一波在被窝慢慢看全部内容，希望文章能够帮你解决JS继承最简单的理解方式_还不赶快收藏一波在被窝慢慢看所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。