js 继承 柔光的暖阳◎ 2024-04-18 16:57 38阅读 0赞 ###### 注意点: ###### > 1. 原型链上的属性会被多个对象共享 > 2. 为某一个类添加静态方法,直接`构造函数名称.函数名=function(){}`,调用时直接通过`构造函数名称.函数名()`调用 ##### 1. 原型继承:`子类.prototype = new 父类()` ##### > 特点:① 实例既属于本身,又属于父类。② 不能在子类构造方法中写继承语句 ③ 既可以继承原型链上的属性和方法也可以继承父类构造函数的属性和方法。④ 所有实例的属性取值都是相同,即所有实例共享数据 。⑤ 实例化时不可给父类传参 > 优点:所有实例共享数据。 > 缺点:不能在继承前给子类原型的属性赋值,会被继承覆盖掉。 function Animal(name,sex){ this.name = name||"名字"; this.sex = sex||"性别" this.eat = function () { return this.name+"爱吃东西"; } } function Cat(name,sex){ this.name = name; this.sex = sex; } Cat.prototype.name="乔治";//会被底下的继承覆盖掉 Cat.prototype = new Animal(); Cat.prototype.sleep = function(){ console.log(this.name+"爱睡觉")//谁调用,this就指代谁 } var cat = new Cat("小花","女"); var cat1 = new Cat("小黑黑","男"); console.log(cat1.__proto__==Cat.prototype);//true console.log(cat.__proto__); Cat.prototype.sleep();//输出:名字爱睡觉 cat1.sleep();//小黑黑爱睡觉 console.log(cat instanceof Cat);//true console.log(cat instanceof Animal)//true ##### 2. 构造继承:将父类方法和属性转换为子类的属性和方法,而不是子类的原型的属性和方法。用apply和call方法,将当前对象this传给父类构造函数,apply的参数:(this,\[\]);call的参数:(this,); ##### > 特点: > > 1. 可实现多继承,实例可向构造函数传参。实例只属于本身,不属于父类。实例间数据不共享。 > 2. 该方法只能继承父类构造函数里的属性和方法,但是不能继承原型链上的属性和方法。 function Animal(name,sex){ this.name = name||"名字"; this.sex = sex||"性别" this.eat = function () { return this.name+"爱吃东西"; } } function AnimalType(type){ this.type=type||"类别" } function Cat(name,sex,type){ Animal.call(this,name,sex); AnimalType.apply(this,[type]) } var cat = new Cat("小花","女","猫"); var cat2 = new Cat("小黑黑","不男不女","猫"); cat2.__proto__.sleep= function () { //当给一个实例的__proto__加属性和方法时,会共享(实例.__proto__==类.prototype) console.log(this.name+"爱睡觉") } console.log(cat2 instanceof Cat)//true console.log(cat instanceof Animal)//false ![在这里插入图片描述][20190909212708401.png] ##### 3. 组合继承:原型+构造 ##### function AnimalType(type){ this.type=type||"类别" } function Cat(type){ AnimalType.apply(this,[type]); } Cat.prototype = new Animal("小花","男"); var cat = new Cat("猫1"); var cat1 = new Cat("猫2") console.log(cat) console.log(cat1) console.log(cat instanceof Animal);//true console.log(cat instanceof AnimalType);//false ![在这里插入图片描述][20190909213225339.png] ##### 4. 原型式继承:将一个已存在的对象赋值给子类的prototype,并返回子类对象。 ##### > 特点:① 未创建构造函数,让一个对象与另一个对象保持类似 ② 与原型模式一样,包含引用类型的属性值会共享 function object(o){ function F(){ } F.prototype = o; return new F(); } //例子 var Animal = { name:"cat", friend:["aaron","cassic"] } var cat=object(Animal); var cat1 = object(Animal); console.log(cat); console.log(cat1); cat.name="sss"; cat.friend.push("aseaff");//当使用push方法时操作的为Cat的prototype中的friend。当直接赋值时,操作的为Cat类自身的属性 console.log(cat) ![在这里插入图片描述][20190909215144475.png] [20190909212708401.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/f26a59fcea97471ca01b1e6dfa68034b.png [20190909213225339.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/0f14ec03398a446e973ef6e42caec5a7.png [20190909215144475.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/f9ab1e6e7f5a4240ae27f67903cbab9c.png
相关 js 继承 注意点: > 1. 原型链上的属性会被多个对象共享 > 2. 为某一个类添加静态方法,直接`构造函数名称.函数名=function(){}`,调用时直接通过`构造... 柔光的暖阳◎/ 2024年04月18日 16:57/ 0 赞/ 39 阅读
相关 JS继承 1.原型链继承 2.借用构造函数继承(经典继承) 3.组合继承 4.原型式继承 5.寄生式继承 6.寄生组合式继承 既然要实现继承,那么首先我们得有一个父 ゞ 浴缸里的玫瑰/ 2022年12月05日 00:50/ 0 赞/ 143 阅读
相关 js 继承 $(document).ready(initPage); function initPage() { extend(C - 日理万妓/ 2022年07月21日 02:20/ 0 赞/ 172 阅读
相关 js--继承 每个类有3部分, 第一部分是构造函数内的,供实例化对象复制用的 第二部分是构造函数外的,直接通过点语法添加,这是供类使用的,实例化对象访问不到 第三部分是类的原型中 ╰半夏微凉°/ 2022年07月11日 01:47/ 0 赞/ 173 阅读
相关 js继承 1、prototype方式 var BaseClass = function () \{ this.name = "3zfp"; ゞ 浴缸里的玫瑰/ 2022年06月09日 04:08/ 0 赞/ 153 阅读
相关 js继承:一网打尽js继承 转载:原地址:[https://mp.weixin.qq.com/s/NkxW367Znl5Hb47\_vv8Eeg][https_mp.weixin.qq.com_s_Nkx 刺骨的言语ヽ痛彻心扉/ 2022年03月12日 07:24/ 0 赞/ 216 阅读
相关 js继承 var animal=function(name){ //构造函数 this.name=name; this.sayhe 拼搏现实的明天。/ 2021年12月22日 02:43/ 0 赞/ 237 阅读
相关 js-----继承 1:创建的三种方式 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub 曾经终败给现在/ 2021年09月20日 06:56/ 0 赞/ 334 阅读
相关 js继承 为何要继承 希望子类对象拥有父类的属性和方法 构造函数的继承 call写在子类构造函数中,将父构造函数中this指向由window指向子对象,并且执行父构造函数中 傷城~/ 2021年09月03日 06:53/ 0 赞/ 377 阅读
还没有评论,来说两句吧...