JS中继承的那些事

秒速五厘米 2022-10-27 12:08 36阅读 0赞

# JS 实现继承的几种方式 #

### 原型的指向 ###

首先我定义了一个Person自定义构造函数，并且在原型上添加了一个eat方法

定义了一个Student 函数，在原型上定义了一个sayHi方法

**然后我将 Student的原型指向 了一个 Person的实例对象**

接着实例化一个Student，接着分别在stu 实例上 尝试着调用 eat方法 和 sayHi 方法

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70 1][]

**stu实例对象**指向person的实例对象，所以你为student添加方法，必须在指向完再重新添加

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70 2][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70 3][]

**stu实例对象**指向person的实例对象，所以你为student添加方法，必须在指向完再重新添加

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70 4][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70 5][]

### **prototype 实现继承** ###

var person = function (name, age) {
                this.name = name
                this.age = age
            }
            person.prototype.eat = function (params) {
                console.log('eat')
            }
            var student = function (obj) {
            		this.obj = obj 
            }
            student.prototype.play = function (params) {
                console.log('play')
            }
    
            var stu1 = new student('china')
            stu1.prototype = new person('xixi',18)
            console.log(stu1)

> //用点的方式在对象上加方法  
> student.prototype.eat = function () \{\}

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70 6][]

>  //直接在对象上加方法，constructor会消失，所以要重新指一下  
>         student.prototype = \{  
>             sleep:function()\{  
>                 console.log('sleep')  
>             \}  
>         \}  
>         student.prototype.constructor = student  
>         var stu2 = new student('amer')  
>         console.log(stu2)

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70 7][]

所以需要重新指一下。

> student.prototype.constructor = student

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70 8][]

### 利用 call 借用构造函数继承 ###

缺点：引用类型的内存空间共享的

>         function person(name, age) \{  
>             this.name = name  
>             this.age = age  
>         \}  
>         person.prototype.eat = function (params) \{  
>             console.log('eat')  
>         \}  
>         function student (obj) \{  
>             this.obj = obj  
>         \}  
>                 student.prototype = new person('hehe',\[0,1\])  
>         var stu1 = new student('tt')  
>         stu1.name = 'jj'  
>         stu1.age.push(7)  
>         var stu2 = new student('kk')  
>         console.log(stu1)  
>         console.log(stu2)  
>         console.log(new person())

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70 9][]

### 组合继承 ###

**没有call和constructor重新指向**

> **        function teacher () \{  
>             this.work = \[0\]  
>         \}  
>         function xiaochang()\{  
>               
>             this.school = 'school'  
>         \}  
>         xiaochang.prototype = new teacher()  
>           
>         var tea1 = new xiaochang()  
>         tea1.work.push(9)  
>         var tea2 = new xiaochang()  
>         console.log(tea1)  
>         console.log(tea2)**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70 10][]

**call和constructor重新指向**

> ** function teacher () \{  
>             this.work = \[0\]  
>  \}  
>  function xiaochang()\{  
>             teacher.call(this)  
>             this.school = 'school'  
>  \}  
>   xiaochang.prototype = new teacher()  
>      xiaochang.prototype.constructor = xiaochang  
>   var tea1 = new xiaochang()  
>   tea1.work.push(9)  
>   var tea2 = new xiaochang()  
>   console.log(tea1)  
>   console.log(tea2)**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70 11][]

> function teacher (work) \{  
>             this.work = work  
>  \}  
>   function xiaochang(work,school)\{  
>             teacher.call(this,work)  
>             this.school = school  
>   \}  
>   xiaochang.prototype = new teacher()  
>   xiaochang.prototype.constructor = xiaochang  
>   var tea1 = new xiaochang(\[0\],'xiamen')  
>   tea1.work.push(9)  
>   var tea2 = new xiaochang(\[9\],'fujian')  
>   console.log(tea1)  
>   console.log(tea2)

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70 12][]

**直接继承prototype**

> **    function Person(name,age,sex)\{  
>         this.name=name;  
>         this.age=age;  
>         this.sex=sex;  
>     \}  
>     Person.prototype.sayHi=function()\{  
>         console.log("你好")  
>        
>    
>     function  Student(name,age,sex,score)\{  
>         //借用构造函数  
>         Person.call(this,name,age,sex)  
>         this.score=score  
>     \}  
>     Student.prototype = Person.prototype  
>     var stu = new Student("小黑",20,"男","100分")  
>     console.log(stu)**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70 13][]

### 原型式继承 ###

这里不得不提到的就是 ES5 里面的 Object.create 方法，这个方法接收两个参数：一是用作新对象原型的对象、二是为新对象定义额外属性的对象（可选参数）。

其实 Object.create 方法是可以为一些对象实现浅拷贝的。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70 14][]

![20210321102243951.png][]

### 寄生式继承 ###

对于普通对象的继承方式来说，寄生式继承相比于原型式继承，还是在父类基础上添加了更多的方法

>  function clone(original) \{  
>         let clone = Object.create(original);  
>             clone.getFriends = function() \{  
>                 //这里是this指clone    
>                 return this.friends;  
>             \};  
>             clone.getName = function() \{  
>                 //这里是this指clone    
>                 return this.name;  
>             \};  
>             return clone;  
>   \}

### 寄生组合式继承 ###

>         function person(name, age) \{  
>             this.name = name  
>             this.age = age  
>         \}  
>          
>         person.prototype.eat = function (params) \{  
>             console.log('eat')  
>         \}  
>         function clone (child,parents)\{  
>             //浅复制父类  
>             let clone = Object.create(parents);   
>             //clone的原型对象指向父类的原型对象，继承父类上的方法  
>             clone.prototype = parents.prototype  
>             //子类的原型对象的构造方法指向clone  
>             child.prototype.constructor = clone  
>         \}  
>         function clone2(child,parents) \{  
>             //浅复制父类的原型对象  
>             let clone = Object.create(parents.prototype)  
>             //clone的构造函数constructor指向子类  
>             clone.constructor = child  
>             //子类的prototype指向clone  
>             child.prototype = clone  
>         \}  
>         function student (name,age,obj) \{  
>             person.call(this,name,age)  
>             this.obj = obj  
>         \}  
>         function student1 (name,age,obj,work) \{  
>             person.call(this,name,age)  
>             this.obj = obj  
>             this.work = work  
>         \}  
>         clone(student,person)  
>         clone(student1,person)  
>         student.prototype.say = function () \{  
>             console.log('say')  
>         \}  
>         student1.prototype.sleep = function (params) \{  
>             console.log('sleep')  
>         \}  
>         var stud = new student('kk',\[0,1\],'hehe')  
>         console.log(stud)  
>         var studd = new student1('jj',78,'hh','teacher')  
>         console.log(studd)

### ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70 15][]ES6 的 extends 关键字实现逻辑 ###

因为浏览器的兼容性问题，如果遇到不支持 ES6 的浏览器，那么就得利用 babel 这个编译工具，将 ES6 的代码编译成 ES5，让一些不支持新语法的浏览器也能运行。

>         class person \{  
>             constructor(name, age)\{  
>                 this.name = name  
>                 this.age = age  
>             \}   
>             eat = function (params) \{  
>                 console.log('eat')  
>                 return this  
>             \}  
>         \}  
>          class student extends person\{  
>             constructor(name,age,obj) \{  
>                 super(name,age)  
>                 this.obj = obj  
>             \}  
>             say = function () \{  
>                 console.log('say')  
>             \}  
>         \}  
>         var stud = new student('kk',\[0,1\],'hehe')  
>         console.log(stud.eat())

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70 16][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70]: /images/20221024/5ce3d0f095eb4ad7bb48d2175262c536.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70 1]: /images/20221024/07fc780aaa344611987ea380985f762a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20210321101605974.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70 3]: /images/20221024/bec703387f164a9da0f96650ac0ed25e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70 4]: /images/20221024/5fb8623a420d4023adcd207cf2924c14.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70 5]: /images/20221024/ef822806492e44d2ad7cb7c6f24359d0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70 6]: /images/20221024/76c8a2ae5a194a048fc3e15490a893c2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70 7]: /images/20221024/1dadb6882d144a6386abd61d4285dfe4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70 8]: /images/20221024/19c51c95604b48139bee1189ae784221.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70 9]: /images/20221024/4a418b1f3fc44be09e0dac10c4f3ca8b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70 10]: /images/20221024/ccf8d2a8515041a7b76d378d2ea67104.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70 11]: /images/20221024/e605629218524ea6beb7016ea2315419.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70 12]: /images/20221024/4bcc7c4337884e0eb098b29b1131514f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70 13]: /images/20221024/3f9869a1f0d742c4aa35bfb3a5f0e89f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70 14]: /images/20221024/7b2c8c9855be48af9ed6700dcf6a7499.png
[20210321102243951.png]: /images/20221024/465486f052b740bc92047faccad1e844.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70 15]: /images/20221024/435e0f6d09184e30824506b3a65b903e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70 16]: /images/20221024/87a64795241c4853b9547562c69e3993.png