继承是面试经常问的问题，甚至还会问如何手写继承，这里用两个例子快速教会大家，记得点赞收藏哦~

注：学习本文的前提是搞懂原型链哦~

函数式继承

首先声明一个构造函数来构造手机相关的参数

js 复制代码

 //手机
  function Phone(brand, price){
            this.brand = brand;
            this.price = price;
        }

        Phone.prototype.call = function(){
            console.log("我可以打电话");
        }
     const xiaomi=new Phone('小米',1999)
     console.log(xiaomi);
     xiaomi.call()

此时我们打开控制台，会得到：

如果此时我想再写一个智能手机的构造函数，可以继承上面函数的相关功能，并增加一些新的功能，应该这么写：

js 复制代码

     //智能手机
        function SmartPhone(brand, price, color, size){
            Phone.call(this, brand, price);//把需要继承的Phone函数拿过来调用，通过call改变this即可
            this.color = color;
            this.size = size;
        }

        //设置子级构造函数的原型
        SmartPhone.prototype = new Phone;//给该构造函数赋予需要继承的Phone身上的原型
        SmartPhone.prototype.constructor = SmartPhone;//让原型指回构造函数
        
           //增加子类的方法
        SmartPhone.prototype.photo = function(){
            console.log("我可以拍照")
        }

        SmartPhone.prototype.playGame = function(){
            console.log("我可以玩游戏");
        }

        const chuizi = new SmartPhone('锤子',2499,'黑色','5.5inch');

        console.log(chuizi);
        chuizi.call();
        chuizi.photo();
        chuizi.playGame()

写到这里，其实函数式继承就已经完成了，但是对原型链不熟悉的伙伴们肯定还是一头雾水，这里给大家对SmartPhone这个构造函数进行逐帧分析下：

分析

1） Phone.call(this, brand, price)

这句代码应该不用多说吧，就是把Phone这个函数拿来调用一下，把this换成自己的即可

2） SmartPhone.prototype = new Phone

这句代码的意思是，把Phone这个构造函数的一个实例对象赋予给SmartPhone的原型，因为SmartPhone的原型终归是一个对象，把neW Phone赋予给因为SmartPhone的原型后，SmartPhone的实例对象就是这样，这就直接把SmartPhone的原型给覆盖替换了，所以下边一定要用constructor指回来哦~

3） SmartPhone.prototype.constructor = SmartPhone

这句话的意思是，当你重写了SmartPhone的原型时，你一定要把原型中的constructor指回构造函数，不然这里就不能顺着原型链找到原型了，这里重在理解，给大家放一张图

类式继承

相比于函数式继承，类式继承就显得尤为简单，因为类就是构造函数的语法糖废话不多说，直接上案例，大家也可以看我的另一篇文章三分钟让你搞懂Class类 - 掘金 (juejin.cn)

js 复制代码

  class Phone{
            //构造方法
            constructor(brand, price){
                this.brand = brand;
                this.price = price;
            }
            //添加方法属性
            //记住，这个call是放在Phone的原型对象身上的，和构造函数中的
           // Phone.protoType.call={}等价
            call(){
                console.log("我可以打电话!!");
            }
        }

        class SmartPhone extends Phone {
            //构造方法
            constructor(brand, price, color, size){
                super(brand, price);// 等价于 Phone.call(this, brand, price)
                this.color = color;
                this.size = size;
            }

            photo(){
                console.log("拍照");
            }

            playGame(){
                console.log("玩游戏");
            }

            call(){
                console.log('我可以进行视频通话');
            }
        }

        const xiaomi = new SmartPhone('小米',799,'黑色','4.7inch');
        console.log(xiaomi);
        xiaomi.call();
        xiaomi.photo();
        xiaomi.playGame();

我们发现，类比函数式继承更简洁

类不需要往原型上写方法，会自动加在原型上

类如果想继承父类，调用super即可

类中会自动继承父类的属性和方法

今天的分享就到这里啦~

如何理解函数式继承和类式继承？

函数式继承

分析

类式继承