js--继承 ╰半夏微凉° 2022-07-11 01:47 209阅读 0赞 每个类有3部分, 第一部分是构造函数内的,供实例化对象复制用的 第二部分是构造函数外的,直接通过点语法添加,这是供类使用的,实例化对象访问不到 第三部分是类的原型中,实例化对象可以通过其原型链间接访问到,也是供所有实例化对象共用的。 1.类式继承 //类式继承 //声明父类 function SuperClass(){ this.superValue=true; } //为父类添加共有方法 SuperClass.prototype.getSuperValue=function(){ return this.superValue; }; //声明子类 function SubClass(){ this.subValue=false; } //继承父类 SubClass.prototype=new SuperClass();//子类的原型为父类的实例 //为子类添加共有方法 SubClass.prototype.getSubValue=function(){ return this.subValue; }; 类的原型对象是为类的原型添加共有方法,但类不能直接访问这些属性和方法,必须通过原型prototype来访问。通过改变原型,新创建的对象不仅可以访问父类原型的属性和方法,也可以访问从父类构造函数中复制的属性和方法。 var instance=new SubClass(); console.log(instance.getSuperValue());//true console.log(instance.getSubValue());//false instanceof是通过判断对象的prototype链来来检测某个对象是否是某个类的实例,而不关心对象和类的自身结构。 console.log(instance instanceof SuperClass);//true console.log(instance instanceof SubClass);//true console.log(SubClass instance SuperClass);//false subclass继承superclass是通过将superclass的实例赋值给subclass的原型prototype,所以SubClass.prototype继承了superClass console.log(SubClass.prototype instanceof SuperClass);//true **类式继承的缺点:** (1)子类通过原型继承了父类,父类中的共有属性要是引用类型,就会在子类中被所有实例共用。因此一个子类的实例更改子类原型从父类构造函数中继承来的共有属性就会直接影响其他子类。 function SuperClass(){ this.books=['js','html','css']; } function SubClass(){ } SubClass.prototype=new SuperClass(); var instance1=new SubClass(); var instance2=new SubClass(); console.log(instance2.books);// js html css instance1.books.push('设计模式'); console.log(instance2.books);// js html css 设计模式 (2)子类实现的继承是靠其原型prototype对父类的实例化实现的,因此在创建父类的时候,是无法向父类传递参数的,因而在实例化父类的时候也无法对父类构造函数内的属性初始化 2.构造函数继承 //声明父类 function SuperClass(id){ //引用类型共有属性 this.books=['js','html','css']; //值类型共有属性 this.id=id; } //父类声明原型方法 SuperClass.prototype.showBooks=function(){ console.log(this.books); } //声明子类 function SubClass(id){ //继承父类 SuperClass.call(this,id); } //创建第一个子类的实例 var instance1=new SubClass(10); //创建第二个子类的实例 var instance2=new SubClass(11); instance1.books.push('设计模式'); console.log(instance1.books);//js html css 设计模式 console.log(instance1.id);//10 console.log(instance2.books);// js html css console.log(instance2.id)//11 isntance1.showBooks();//TypeError 由于更改了函数的作用环境,因此在子类中,对superclass调用这个方法就是将子类中的变量在父类中执行一遍,由于父类中是给this绑定属性的,因此子类自然也就继承了父类的共有属性。 由于继承时没有涉及原型prototype,所以父类原型的方法不会被继承。要想被子类继承必须放在构造函数中,这样创建出来的每个实例都会单独拥有一份而不能共用,这就违背了代码复用的原则。 3.组合继承 类式继承是通过子类的原型prototype对父类实例化实现的 构造函数式继承是通过在子类的构造函数作用环境中执行一次父类的构造函数来实现的 //声明父类 function SuperClass(name){ //值类型共有属性 this.name=name; //引用类型共有属性 this.books=['html','css','js']; } //父类原型共有方法 SuperClass.prototype.getName=function(){ console.log(this.name); }; //声明子类 function SubClass(name,time){ //构造函数式继承父类name属性 SuperClass.call(this,name); //子类中新增的共有属性 this.time=time; } //类式继承 SubClass.prototype=new SuperClass(); //子类原型方法 SubClass.prototype.getTime=function(){ console.log(this.name); }; 这样,子类的实例中更改父类继承下来的引用类型属性如books,根本不会影响其他实例,并且在子类实例化过程中又能将参数传递到父类的构造函数中name。 var instance1=new SubClass('js',2014); instance1.books.push('设计模式'); console.log(instance1.books); //html css js 设计模式 instance1.getName();//js isntance1.getTime();//2014 var instance2=new SubClass('css',2013); console.log(instance2.books);//html css js instance2.getName();//css instance2.getTime();//2013 4.原型式继承 //原型式继承 function inheritObject(o){ //声明一个过渡函数对象 function F(){ } //过渡对象的原型继承父对象 F.prototype=o; //返回过渡对象的一个实例,该实例的原型继承了父对象 return new F(); } 对类式继承的一个封装,由于F过渡类的构造函数中无内容,所以开销较小,使用起来也比较方便。跟类式继承一样,父类对象的book中的值类型属性被复制,引用类型的属性被共用 var book={ name:"js book", alikeBook:["css","html"] }; var newBook=inheritObject(book); newBook.name="ajax"; newBook.alikeBook.push("xml"); var otherBook=inheritObject(book); otherBook.name="flash"; otherBook.alikeBook.push("as book"); console.log(newBook.name);//ajax console.log(newBook.alikeBook);//css html xml console.log(otherBook.name);//flash console.log(otherBook.alikeBook);// css html xml as book console.log(book.name);//js book console.log(book.alikeBook); //css html xml as book 5.寄生式继承 //声明基对象 var book={ name:"js", alikeBook:["css","html"] }; function createBook(obj){ //通过原型继承方式创建新对象 var o=new inheritObject(obj); //拓展新对象 o.getName=function(){ console.log(name); }; //返回拓展后的新对象 return o; } 寄生式继承是对原型继承的第二次封装,并且在第二次封装的过程中对继承的对象进行了拓展,这样先创建的对象不仅仅有父类的属性和方法而且添加了新的属性和方法。 6.寄生组合式继承 function inheritPrototype(subClass,superClass){ //复制一份父类的原型副本保存在变量中 var p=inheritObject(superClass.prototype); //修正因为重写子类原型导致子类的constructor属性被修改 p.constructor=subClass; //设置子类的原型 subClass.prototype=p; }
相关 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 赞/ 189 阅读
相关 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 赞/ 377 阅读
相关 js继承 为何要继承 希望子类对象拥有父类的属性和方法 构造函数的继承 call写在子类构造函数中,将父构造函数中this指向由window指向子对象,并且执行父构造函数中 傷城~/ 2021年09月03日 06:53/ 0 赞/ 426 阅读
还没有评论,来说两句吧...