js继承 傷城~ 2021-09-03 06:53 426阅读 0赞 ## 为何要继承 ## 希望子类对象拥有父类的属性和方法 ### 构造函数的继承 ### call写在子类构造函数中,将父构造函数中this指向由window指向子对象,并且执行父构造函数中的代码,(其实就相当于将父构造函数中的代码复制一份到子类构造函数中,将整个看做是子类构造器中的内容),所以改变了this指向,也继承了父类构造函数中的代码 function People(){ this.legs = 2; } function Man(){ People.call(this); this.run = 3; } let m1 = new Man(); 复制代码 ![f324a7d98e1a523d36bbd6481a8cf5bc.png][] call方法和apply方法的区别:从第二个参数起,call直接将这些参数依次传递给父构造函数,apply将这些参数放入数组中在传递给父构造函数。 function People(name,legs){ this.name = name; this.legs = legs; } function Man(name,legs){ People.call(this,name,legs); //People.apply(this,[name,legs]); this.run = 3; } let m1 = new Man('yr', 2); 复制代码 ![4fd3fe6712a784280a51949797221240.png][] **注意:** call和apply继承的只是构造函数中的属性和方法,通过原型prototype给父类添加的是无法继承的。 ### 原型继承1:子类prototype直接引用父类prototype ### function People(name,legs){ this.name = name; this.legs = legs; } People.prototype.showName = function(){ console.log(this.name) } function Man(){ this.run = 3; } Man.prototype = People.prototype; Man.prototype.showLegs= function(){ console.log(this.legs) } let m1 = new Man('yr', 2); 复制代码 这种原型继承有个问题:就是直接将子类的prototype指向父类的prototype,这时他们两个使用的用一个内存地址,我们在子类Man的prototype上添加的showLegs也会添加在父类People的prototype上,显然这种方式是不合适的。 ![2056044ade157901247ea71e9f5a82ee.png][] ### 原型继承2:拷贝继承 ### function People(name,legs){ this.name = name; this.legs = legs; } People.prototype.showName = function(){ console.log(this.name) } function Man(name,legs){ People.call(this,name,legs) this.run = 3; } Man.prototype.showName= function(){ console.log(this.legs) } Man.prototype = { ...People.prototype, ...Man.prototype } let m1 = new Man('yr',18); let m2 = new Man('lyl',20); 复制代码 拷贝继承,使用扩展运算符将父类原型与子类原型合并,属性相同时,子类为准 (扩展运算符属性相同时,后面的覆盖前面的) ![97bbfcb54c29f093c81a852b87d97022.png][] ### 原型继承3:继承父类实例化对象 ### function People(name,legs){ this.name = 'yr'; this.legs = 2; } People.prototype.showName = function(){ console.log(this.name) } function Man(){ this.run = 3; } Man.prototype = new People(); Man.prototype.showLegs= function(){ console.log(this.legs) } let m1 = new Man(); 复制代码 ![6d1e2d0875f0c49d222739b94ce944a1.png][] 这种子类继承了父类构造函数实例化对象,可以获得父类构造函数和原型上的属性和方法。但是存在一个问题,如果父类构造函数中包含引用类型值(数组,对象那类),就会出现以下问题 People的每个实例都有names属性,Man.prototype = new People();就相当于Man.prototype成为了People的一个实例,就像是创建了Man.prototype.names,那么通过Man创建出来的实例都会共享这个属性。 function People(name,legs){ this.names = ['yr','lyl']; this.legs = 2; } People.prototype.showName = function(){ console.log(this.name) } function Man(){ this.run = 3; } Man.prototype = new People(); Man.prototype.showLegs= function(){ console.log(this.legs) } let m1 = new Man(); m1.names.push = 'xn'; let m2 = new Man(); 复制代码 ![1d895aab1ceda36d5e9c066bc918ab58.png][] 此时我们需要的m2是不应该有新添加的xn,并且这种继承不能像父类构造函数传参 ### 组合式继承 ### 通过call或者apply继承构造函数,prototype继承父级的prototype function People(name,legs){ this.names = name; this.legs = legs; } People.prototype.showName = function(){ console.log(this.name) } function Man(name,legs){ People.call(this,name,legs) this.run = 3; } Man.prototype = new People(); Man.prototype.constructor = Man; Man.prototype.showLegs= function(){ console.log(this.legs) } let m1 = new Man('yr',18); let m2 = new Man('lyl',20); 复制代码 ![ef5712651a3fa7e8f0576dc95df51ea3.png][] 组合式继承的原型链是 ![1b391b5c827f12e8c2f610a9459af44c.png][] ### 总结 ### 当子类的prototype继承父类实例化对象时,原型链才发生真正的变化。 [f324a7d98e1a523d36bbd6481a8cf5bc.png]: /images/20210813/da808b3e4f1e4f84ba3f0703ab6df50f.png [4fd3fe6712a784280a51949797221240.png]: /images/20210813/867875f46f8b4a62ba539f7ff77170ef.png [2056044ade157901247ea71e9f5a82ee.png]: /images/20210813/f346fc20b0164f6894a861a4edd691d4.png [97bbfcb54c29f093c81a852b87d97022.png]: /images/20210813/6f03e8da6fa84105a3e884585b76e5cf.png [6d1e2d0875f0c49d222739b94ce944a1.png]: /images/20210813/cda78b28e68e462d90a679c8ff04268d.png [1d895aab1ceda36d5e9c066bc918ab58.png]: /images/20210813/12903bee7d154c1fada6e34f56ac9688.png [ef5712651a3fa7e8f0576dc95df51ea3.png]: /images/20210813/8a593a3405f5488793ad288038550071.png [1b391b5c827f12e8c2f610a9459af44c.png]: /images/20210813/aa9cf718911240a19ebd0d0f84a60e41.png
相关 js继承 js继承的几种方式 1原型链继承 原型链继承是比较常见的继承方式之一,其中涉及的构造函数、原型和实例,三者之间存在着一定的关系,即每一个构造函数都有一个原型对象,原 素颜马尾好姑娘i/ 2023年01月09日 12:42/ 0 赞/ 16 阅读
相关 JS继承 1.原型链继承 2.借用构造函数继承(经典继承) 3.组合继承 4.原型式继承 5.寄生式继承 6.寄生组合式继承 既然要实现继承,那么首先我们得有一个父 ゞ 浴缸里的玫瑰/ 2022年12月05日 00:50/ 0 赞/ 186 阅读
相关 js 继承 $(document).ready(initPage); function initPage() { extend(C - 日理万妓/ 2022年07月21日 02:20/ 0 赞/ 207 阅读
相关 js--继承 每个类有3部分, 第一部分是构造函数内的,供实例化对象复制用的 第二部分是构造函数外的,直接通过点语法添加,这是供类使用的,实例化对象访问不到 第三部分是类的原型中 ╰半夏微凉°/ 2022年07月11日 01:47/ 0 赞/ 210 阅读
相关 js继承 1、prototype方式 var BaseClass = function () \{ this.name = "3zfp"; ゞ 浴缸里的玫瑰/ 2022年06月09日 04:08/ 0 赞/ 190 阅读
相关 js继承:一网打尽js继承 转载:原地址:[https://mp.weixin.qq.com/s/NkxW367Znl5Hb47\_vv8Eeg][https_mp.weixin.qq.com_s_Nkx 刺骨的言语ヽ痛彻心扉/ 2022年03月12日 07:24/ 0 赞/ 268 阅读
相关 js继承 var animal=function(name){ //构造函数 this.name=name; this.sayhe 拼搏现实的明天。/ 2021年12月22日 02:43/ 0 赞/ 282 阅读
相关 js-----继承 1:创建的三种方式 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub 曾经终败给现在/ 2021年09月20日 06:56/ 0 赞/ 378 阅读
相关 js继承 为何要继承 希望子类对象拥有父类的属性和方法 构造函数的继承 call写在子类构造函数中,将父构造函数中this指向由window指向子对象,并且执行父构造函数中 傷城~/ 2021年09月03日 06:53/ 0 赞/ 427 阅读
还没有评论,来说两句吧...