【JavaScript 进阶教程】非 extends 的组合继承_不用extend如何实现继承(1)

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

---

文章目录：

一：call() 的作用与使用

1.1 使用 call() 来调用函数

1.2 使用 call() 来改变 this 的指向

二：利用构造函数继承父属性

2.1 实现过程

2.1 实现过程分析

三：利用原型对象继承父方法

3.1 继承父方法的错误演示

问题原因

3.2 继承父方法的正确做法

3.2 继承父方法的注意事项

---

一：call() 的作用与使用

在开始讲解组合继承前我们先来了解一下 call() 方法，call() 方法可以改变 this 的指向，也可以调用函数等等，最主要的还是其改变指向的作用

语法格式	call( 目标this指向，参数1，参数2 …)

---

1.1 使用 call() 来调用函数

call() 可以拿来直接用来调用函数

     <script>
        function eat(){
            console.log('我在吃午饭');
        }
        eat.call()
     </script>

---

1.2 使用 call() 来改变 this 的指向

call() 的第一个参数为你要改变的 this 的指向，这里的 this 指的是 call 的调用者，此处函数调用不指定的话即指向 window，指定让其指向新创建的对象 obj，只需要让其第一个参数为 obj 对象即可，所以结果应该是第一个为 window，第二个为 obj 对象

     <script>
        function eat(){
            console.log(this);
        }
        var obj={
            'name':'小明',
            'age':18
        }  
        eat.call()
        eat.call(obj)
     </script>

---

二：利用构造函数继承父属性

我们已经知道组合继承是由构造函数和原型对象一起来实现的，其中构造函数实现的是属性的继承，原型对象实现的是方法的继承，这版块就走进利用父构造函数完成属性的继承

2.1 实现过程

其实现非常容易，只需要在子构造函数中，使用 call 调用父构造函数（将其当做普通函数调用），其中在 call 方法中更改父构造函数中的 this 指向，由于 call 方法是在子构造函数中调用的，所以此处当做参数的 this 代表父构造函数中的 this 指向子构造函数的实例化对象，并传参进去，所以相当于给子构造函数的实例化对象添加了属性并赋值

     <script>
        //声明父构造函数
        function Father(uname,uage,utel,sex){
            this.uname=uname;
            this.uage=uage;
            this.utel=utel;
            this.sex=sex;
        }
        //声明子构造函数，但是想继承父类的uname，uage，utel等等属性的赋值操作
        function Son(uname,uage,utel,sex){
            Father.call(this,uname,uage,utel,sex)
        }
        var son1=new Son('张三',19,12345,'男')
        console.log(son1);
     </script>

---

2.1 实现过程分析

• 首先在子构造函数中使用 call 调用了父构造函数，并传参给 call 的参数，其中第一个参数为 this 指向的改变，其余为带入的属性值参数
• 我们知道构造函数中的 this 指向其实例化对象，所以本身父构造函数的 this 应该指向父构造函数的实例化对象，而此处 call 方法调用在子构造函数中，所以参数的指向更改为指向子构造函数的实例化对象
• 此处子构造函数的实例化对象就是 son1，所以父构造函数中的 this 指向的均是 son1,
• 所以就给 son1 添加并赋值了 uname，uage 等等属性

---

三：利用原型对象继承父方法

组合继承的最后一版块，利用原型对象来继承方法，此处我们说明的是存放在构造函数的原型对象里的公共方法的继承

3.1 继承父方法的错误演示

错误的继承就是直接将父亲的原型对象赋值给子的原型对象，这样确实也可行，但是如果给子原型对象添加子类特有的方法，那父原型对象也会加上这个方法

     <script>
        //声明父构造函数
        function Father(uname,uage){
            this.uname=uname;
            this.uage=uage;
        }
        Father.prototype.money=function(){
            console.log('我有很多钱');
        }
        //声明子构造函数
        Son.prototype=Father.prototype;
        function Son(uname,uage){
            Father.call(this,uname,uage)
        }
        var father1=new Father('爸爸',40)
        var son1=new Son('儿子',19)
        console.log(father1);
        console.log(son1);
     </script>

我们可以发现父子的原型对象中确实都有了这个方法，证明确实这个办法是行得通的

但是其也有问题存在，当我们想给子原型对象单独添加其特有的方法时，就会出问题

• 上述问题给子原型对象添加特有方法的错误示例：

     <script>
        //声明父构造函数
        function Father(uname,uage){
            this.uname=uname;
            this.uage=uage;


![img](https://img-blog.csdnimg.cn/img_convert/b8e0ad093309346f1bf93b262479260e.png)
![img](https://img-blog.csdnimg.cn/img_convert/49adb2b73315d7914b5df74deaae915f.png)
![img](https://img-blog.csdnimg.cn/img_convert/e228f13219af43ee25587beb1f3a2c03.png)

**既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！**

**由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新**

**[需要这份系统化资料的朋友，可以戳这里获取](https://bbs.csdn.net/forums/4f45ff00ff254613a03fab5e56a57acb)**

elaK-1715351149763)]
[外链图片转存中...(img-xWPjIpsd-1715351149763)]

**既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！**

**由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新**

**[需要这份系统化资料的朋友，可以戳这里获取](https://bbs.csdn.net/forums/4f45ff00ff254613a03fab5e56a57acb)**