js继承还不会?直接原理都给你安排!

混入式继承

混入式继承 : 就是遍历父对象成员添加给子对象
特    点 : 适用于一个对象

// 先声明一个父对象
let wjl = {
    house : {
        address : '北京',
        price : 88888888
    },
    car : {
        brand : '法拉利',
        price : '8000000'
    }
}

// 声明一个子对象
let wsc = {
    grils : ['xxx','yyy','sss']
}

//(1)
let niu = {
    son : ['xxx','yyy','sss']
}


// 然后 我们遍历这个父对象 赋值给子对象
for(let key in wjl) {
    wsc[key] = wjl[key]
}
console.log(wsc)

//(2)
for(let key in wjl) {
    niu[key] = wjl[key]
}
console.log(niu)

复制代码

这就是混入式继承 , 为什么适用一个继承对象 , 一旦多了,就会造成冗余

替换原型继承

替换原型继承 : 就是将父对象的对象作为子对象的原型
特     点 : 适用于多个子对象继承,但是会覆盖子对象默认的原型

 // 先声明一个父对象
let wjl = {
    house : {
        address : '北京',
        price : 88888888
    },
    car : {
        brand : '法拉利',
        price : '8000000'
    }
}


function Son(grils) {
    this.grils = grils
}

// 将父对象作为子对象的原型
Son.prototype = wjl

let wsc = new Son(['xxx','yyy','sss'])
let niu = new Son(['xx','洗脚','oo'])
console.log(wsc,niu)
复制代码

这里虽然成功了,但是如果我们子对象本身就有原型呢? 看下面的代码,旧的原型就会被替换

 // 先声明一个父对象
let wjl = {
    house : {
        address : '北京',
        price : 88888888
    },
    car : {
        brand : '法拉利',
        price : '8000000'
    }
}


function Son(grils) {
    this.grils = grils
}

// 旧
Son.prototype.eat=function () {
    console.log('你们吃午饭了吗?')
}

// 将父对象作为子对象的原型  // 新
Son.prototype = wjl

let wsc = new Son(['xxx','yyy','sss'])
let niu = new Son(['xx','洗脚','oo'])
console.log(wsc,niu)
复制代码

混合式继承

混合式继承 : 混入式继承 + 替换原型继承
特    点 : 可以实现多个子对象继承,并且不会覆盖子对象原来的原型

 // 先声明一个父对象
let wjl = {
    house : {
        address : '北京',
        price : 88888888
    },
    car : {
        brand : '法拉利',
        price : '8000000'
    }
}


function Son(grils) {
    this.grils = grils
}

// 旧
Son.prototype.eat=function () {
    console.log('你们吃午饭了吗?')
}

// 将父对象作为子对象的原型  // 新
for (let key in wji) {
   Son.prototype[key] = wjl[key]
}

let wsc = new Son(['xxx','yyy','sss'])
let niu = new Son(['xx','洗脚','oo'])
console.log(wsc,niu)
复制代码

但是混入式继承有一个小缺点,每次写的时候对象都不是一个名字,这样我们就可以对这个混合式继承进行一个封装,也就是对下面的这个代码

for (let key in wji) {
   Son.prototype[key] = wjl[key]
}
复制代码

我们想用混合式继承,直接调用下面这个函数就可以了

function extend(son,father) {
    for (let key in father) {
       son.prototype[key] = father[key]
    }
}
复制代码

class 关键字

1. 这个是ES6新加的 作用:
   声明一个类函数 : 其实就是构造函数
   类函数的好处 :
   (1)把 构造函数 和 原型 包在一个大括号里面,阅读性提高了
   (2)类函数必须使用new调用,不使用new直接报错,更加规范

2. class关键字的语法 :

    class 构造函数 {
       // 必须有一个函数叫做constructor
       constructor () {}
       
       // 原型中的成员
       eat(){}
   
   }  
复制代码

extends 关键字

1. 作用 : 继承
2. 原理 : 替换原型方式继承
3. 语法 : class 子构造函数 extends 父构造函数
4. 底层原理 Son.prototype._ _ proto _ _ = Father.prototype

class Son extends Fahter {
   // 这里写子构造函数的原型, 虽然是替换原型方式继承但是不会替换子构造函数原来的原型
    eat () {
        console.log('我爱吃饭')
    }
} 
复制代码

super 关键字

1. 作用: 子类调用父类的方法

2. 原理: 函数上下文调用

3. 语法: super只能用在extends中
   如果子类 也要写自己的构造函数 ,就必须调用 super() 调用父类的构造函数

   class Son extends Father {
       super (name,age)
       this.niu = niu
       
       //原型
        eat () {
        console.log('我爱吃饭')
        }
   }
   复制代码

---

好了,这边已经给大家介绍到这里,以上是我自己的理解,希望可以帮到大家, 欢迎留言我这边一定会第一时间给大家解答,喜欢的可以点赞收藏
🐣---->🦅         还需努力!大家一起进步!!!