JS继承相关
2021-07-18 本文已影响0人
小米和豆豆
//仅供学习参考
1. 原型继承
/**
* @description: 原型继承
*/
console.log('原型继承----继承所有----::不能传参-----引用类型实例共享--------------------')
function Parent(){
this.name='父级属性'
this.say=()=>{
console.log('我是父级的say方法')
}
this.arr=[1,2]
}
Parent.prototype.run=()=>{
console.log('父级:我会跑')
}
function Child(){
this.name="子集属性"
}
Child.prototype=new Parent();
let ch1=new Child()
let ch1_1=new Child()
ch1.arr.push(11)
console.log(ch1)
console.log(ch1_1)
2. 利用构造函数继承
/**
* @description: 利用构造函数继承;
*/
console.log('利用构造函数继承--可传参---避免引用类型实例共享------::实例是子集的实例,没有父级原型的方法---------------------')
function Parent2(op){
//改变了this
this.name=op.name
this.say=()=>{
console.log('我是父级的say方法')
}
}
Parent2.prototype.run=()=>{
console.log('父级:我会跑')
}
function Child2(name){
this.name=name
Parent2.call(this,{name:this.name})
}
let ch2=new Child2('子集2')
console.log(ch2)
3. 组合继承
/**
* @description: 组合继承;
*/
console.log('组合继承--------集合1,2优点--------::调用了两次父类构造函数---------------------')
function Parent3(op){
//改变了this
this.name=op
this.say=()=>{
console.log('我是父级的say方法')
}
}
Parent3.prototype.run=()=>{
console.log('父级:我会跑')
}
function Child3(name){
this.name=name
Parent3.call(this,name)
}
Child3.prototype= new Parent3()
let ch3= new Child3('子集3')
console.log(ch3)
4. 原型式继承
/**
* @description: 原型式继承
*/
console.log('原型式继承---------和1类似-----------引用类型实例共享----------------------')
let Parent4={
name:'父级属性',
age:12,
arr:[1,2],
say:()=>{
console.log('我是父级的say方法')
}
}
function create(o){
function fn(){}
fn.prototype=o
return new fn()
}
let ch4=create(Parent4);
let ch4_1=create(Parent4);
ch4.arr.push(15);
console.log(ch4)
console.log(ch4_1)
5. 寄生继承
/**
* @description: 寄生继承
*/
console.log('寄生继承------原型式继承基础加个外壳-----------------------------')
let Parent5={
name:'父级属性',
age:12,
arr:[1,2],
say:()=>{
console.log('我是父级的say方法')
}
}
function create5(o){
function fn(){}
fn.prototype=o
return new fn()
}
function create_5 (o){
let obj=create5(o);
obj.run=function(){
console.log('扩展实例方法')
}
return obj
}
let ch5=create_5(Parent5);
let ch5_1=create_5(Parent5);
ch5.arr.push(15);
console.log(ch5);
console.log(ch5_1);
6. 寄生组合式继承
/**
* @description: 寄生组合式继承
*/
console.log('寄生组合式继承--------修复了组合继承的问题-------------------------------------------------------')
function Parent6(name){
this.name=name
this.say=()=>{
console.log('我是父级的say方法')
}
}
Parent6.prototype.run=()=>{
console.log('父级:我会跑')
}
function Child6(name){
Parent6.call(this,name)
}
function create6(o){
let fu=function(){}
fu.prototype=o
return new fu()
}
function create_6 (child,parent){
let obj=create6(parent.prototype);
obj.cunstructor=child;
child.prototype=obj;
}
create_6(Child6,Parent6);
let ch6=new Child6('ddd')
console.log(ch6)