JS中继承的那些方法

所谓继承？

继承就是子类继承父类的属性和方法，目的可以让子类的实例能够使用父类的属性和方法
类指的就是构造函数

 

1.原型链继承

基本思想：借助原型可以基于已有的对象创建新对象，同时还不必因此创建自定义类型；让一个引用类型继承另一个引用类型的属性和方法。

//创建父类和原型方法
function Cat(uname){
    this.uname =uname;
}
Cat.prototype.run=function(){
    console.log('跑跑跑！')
}

// 子类
function Sanhua(age){
    this.age =age;
}
//实现继承，把父类实例放到子类原型上
Sanhua.prototype = new Cat('三花')
// 原型链
// Sanhua.prototype.constructor = Sanhua 
Sanhua.prototype.run=function(){
    console.log('我是三花！')
}
//创建实例
let sanhua = new Sanhua('1')
console.log(b)

2.call继承（借用构造函数继承）

基本思想：在子类构造函数中把父类构造函数当作普通函数执行，并且通过call方法把父类构造函数中的this替换成子类的实例（this），这样相当于给子类实例上设置了私有的属性和方法。

//创建父类
function Cat(uname) {
    this.uname = uname;
    this.run = function(){
                console.log('跑跑跑')
            }
}

// 子类
function Sanhua(age,uname) {
    this.age = age;
    Cat.call(this,uname)
}
//创建实例
let sanhua = new Sanhua('1','三花')
console.log(sanhua)

3.组合继承

基本思想：用使用原型链的方式来实现对原型属性和方法的继承，而通过借用构造函数来实现对实例属性的继承。

        //创建父类
        function Cat(uname) {
            this.uname = uname;
            this.run = function () {
                console.log('跑跑跑')
            }
        }
        Cat.prototype.wait = function () {
            console.log('等待！')
        }
        // 子类
        function Sanhua(age, uname) {
            this.age = age;
            Cat.call(this, uname)//对象冒充 只能继承构造函数的属性和方法
        }
        Sanhua.prototype = new Cat() //原型链
        //创建实例
        let sanhua = new Sanhua('1', '三花')
        console.log(sanhua)
        sanhua.wait()

4.原型式继承

基本思想：是借助原型可以基于已有的对象创建新对象，同时还不必因此创建自定义类型。

function obj(o){   //传递一个字面量函数
            function F(){}  //创建一个构造函数
            F.prototype = o;  //把字面量函数赋值给构造函数的原型
            return new F()  //最后返回出实例化的构造函数
        }

        let box = {
            name:'小明',
            age:20,
            family:['爸爸','妈妈']
        }

        let newBox = obj(box)
        console.log(newBox.name)   // 小明
        newBox.family.push('妹妹')
        console.log(newBox.family)  //['爸爸','妈妈'，'妹妹']

5.寄生式继承

基本思想：寄生式继承的思路与寄生构造函数和工厂模式类似，即创建一个仅用于封装继承过程的函数，该 函数在内部以某种方式来增强对象，最后再像真地是它做了所有工作一样返回对象。

function obj(o) {   //传递一个字面量函数
            function F() {}  //创建一个构造函数
            F.prototype = o;  //把字面量函数赋值给构造函数的原型
            return new F()  //最后返回出实例化的构造函数
        }

        function create(o) {
            let clone = obj(o);  //通过调用函数创建一个对象
            clone.sayHi = function () {  //以某种方式来增强这个对象
                console.log(123)
            }
            return clone; //返回这个对象
        }
        let person = {
            name: '小明',
            family: ['爸爸', '妈妈']
        };
        let another = create(person)
        another.sayHi();  //  123

6.ES6中的Class类继承

1.ES6中新增了一个定义类的方法这样就不用我们手动的创建构造函数了
2.ES6 class继承通过extends来实现继承
3.语法：class 子类 extends父类
4.在constructor中要使用super（）
特点：

• 1.父类私有的属性和方法会变成子类私有的属性和方法
• 2.父类公有属性和方法会变成子类公有的属性和方法

  class Dad {
              constructor(uname){
                  this.uname = uname
              }
              say = function(){
                  console.log('叫爸爸！')
              }
          }
          // 子类继承父类
          class Son extends Dad{
              constructor(uname,age){
                  super(uname)
                  this.age = age
              }
          }
  
          let xiaoming = new Son('小明','18')
          console.log(xiaoming)  //uname: '小明', age: '18', say: ƒ
          xiaoming.say() // 叫爸爸！