温馨提示:想要更好的理解JS继承方式,须了解构造函数、原型对象、实例化对象、原型链等概念
第一种:原型链继承
利用原型链的特点进行继承
function Parent(){ this.name = 'web前端'; this.type = ['JS','HTML','CSS']; } Parent.prototype.Say=function(){ console.log(this.name); } function Son(){}; Son.prototype = new Parent(); son1 = new Son(); son1.Say();
以上例子解释:
①创建一个叫做Parent的构造函数,暂且称为父构造函数,里面有两个属性name、type
②通过Parent构造函数的属性(即原型对象)设置Say方法,此时,Parent有2个属性和1个方法
③创建一个叫做Son的构造函数,暂且称为子构造函数
④设置Son的属性(即原型对象)值为父构造函数Parent的实例对象,即子构造函数Son继承了父构造函数Parent,此时Son也有2个属性和1个方法
⑤对Son构造函数进行实例化,结果赋值给变量son1,即son1为实例化对象,同样拥有2个属性和1个方法
⑥输出son1的Say方法,结果为"web前端"
优点:可以实现继承
缺点:
①因为Son.prototype(即原型对象)继承了Parent实例化对象,这就导致了所有Son实例化对象都一样,都共享有原型对象的属性及方法。代码如下:
son1 = new Son(); son2 = new Son(); son1.type.push('VUE'); console.log(son1.type);//['JS','HTML','CSS','VUE'] console.log(son2.type);//['JS','HTML','CSS','VUE']
结果son1、son2都是['JS','HTML','CSS','VUE']
②Son构造函数实例化对象无法进行参数的传递
第二种:构造函数继承
通过构造函数call方法进行继承,直接来看代码:
function Parent(){ this.name = 'web前端'; this.type = ['JS','HTML','CSS']; } function Son(){ Parent.call(this); } son1 = new Son(); son1.type.push('VUE'); console.log(son1.type);//['JS','HTML','CSS','VUE'] son2 = new Son(); console.log(son2.type);//['JS','HTML','CSS']
以上例子解释:
①创建父级构造函数Parent,有name、type两个属性
②创建子级构造函数Son,函数内部通过call方法调用父级构造函数Parent,实现继承
③分别创建构造函数Son的两个实例化对象son1、son2,对son1的type属性新增元素,son2没有新增,结果不一样,说明实现了独立
优点:
①实现实例化对象的独立性;
②还可以给实例化对象添加参数
function Parent(name){ this.name = name; } function Son(name){ Parent.call(this,name); } son1 = new Son('JS'); console.log(son1);//JS son2 = new Son('HTML'); console.log(son2);//HTML
缺点:
①方法都在构造函数中定义,每次实例化对象都得创建一遍方法,基本无法实现函数复用
②call方法仅仅调用了父级构造函数的属性及方法,没有办法调用父级构造函数原型对象的方法
第三种:组合继承
利用原型链继承和构造函数继承的各自优势进行组合使用,还是看代码:
function Parent(name){ this.name = name; this.type = ['JS','HTML','CSS']; } Parent.prototype.Say=function(){ console.log(this.name); } function Son(name){ Parent.call(this,name); } Son.prototype = new Parent(); son1 = new Son('张三'); son2 = new Son('李四'); son1.type.push('VUE'); son2.type.push('PHP'); console.log(son1.type);//['JS','HTML','CSS','VUE'] console.log(son2.type);//['JS','HTML','CSS','PHP'] son1.Say();//张三 son2.Say();//李四
以上例子解释:
①创建一个叫做Parent的构造函数,里面有两个属性name、type
②通过Parent构造函数的属性(即原型对象)设置Say方法,此时,Parent有2个属性和1个方法
③创建子级构造函数Son,函数内部通过call方法调用父级构造函数Parent,实现继承
④子构造函数Son继承了父构造函数Parent,此时Son也有2个属性和1个方法
⑤分别创建构造函数Son的两个实例化对象son1、son2,传不同参数、给type属性新增不同元素、调用原型对象Say方法
优点:
①利用原型链继承,实现原型对象方法的继承
②利用构造函数继承,实现属性的继承,而且可以参数
组合函数基本满足了JS的继承,比较常用
缺点:
无论什么情况下,都会调用两次父级构造函数:一次是在创建子级原型的时候,另一次是在子级构造函数内部
第四种:原型式继承
创建一个函数,将参数作为一个对象的原型对象
function fun(obj) { function Son(){}; Son.prototype = obj; return new Son(); } var parent = { name:'张三' } var son1 = fun(parent); var son2 = fun(parent); console.log(son1.name);//张三 console.log(son2.name);//张三
以上例子解释:
①创建一个函数fun,内部定义一个构造函数Son
②将Son的原型对象设置为参数,参数是一个对象,完成继承
③将Son实例化后返回,即返回的是一个实例化对象
优缺点:跟原型链类似
第五种:寄生继承
在原型式继承的基础上,在函数内部丰富对象
function fun(obj) { function Son() { }; Son.prototype = obj; return new Son(); } function JiSheng(obj) { var clone = fun(obj); clone.Say = function () { console.log('我是新增的方法'); } return clone; } var parent = { name: '张三' } var parent1 = JiSheng(parent); var parent2 = JiSheng(parent); console.log(parent2.Say==parent1.Say);// false
以上例子解释:
①再原型式继承的基础上,封装一个JiSheng函数
②将fun函数返回的对象进行增强,新增Say方法,最后返回
③调用JiSheng函数两次,分别赋值给变量parent1、parent2
④对比parent1、parent2,结果为false,实现独立
优缺点:跟构造函数继承类似,调用一次函数就得创建一遍方法,无法实现函数复用,效率较低
这里补充一个知识点,ES5有一个新的方法Object.create(),这个方法相当于封装了原型式继承。这个方法可以接收两个参数:第一个是新对象的原型对象(可选的),第二个是新对象新增属性,所以上面代码还可以这样:
function JiSheng(obj) { var clone = Object.create(obj); clone.Say = function () { console.log('我是新增的方法'); } return clone; } var parent = { name: '张三' } var parent1 = JiSheng(parent); var parent2 = JiSheng(parent); console.log(parent2.Say==parent1.Say);// false
第六种:寄生组合继承
利用组合继承和寄生继承各自优势
组合继承方法我们已经说了,它的缺点是两次调用父级构造函数,一次是在创建子级原型的时候,另一次是在子级构造函数内部,那么我们只需要优化这个问题就行了,即减少一次调用父级构造函数,正好利用寄生继承的特性,继承父级构造函数的原型来创建子级原型。
function JiSheng(son,parent) { var clone = Object.create(parent.prototype);//创建对象 son.prototype = clone; //指定对象 clone.constructor = son; //增强对象 } function Parent(name){ this.name = name; this.type = ['JS','HTML','CSS']; } Parent.prototype.Say=function(){ console.log(this.name); } function Son(name){ Parent.call(this,name); } JiSheng(Son,Parent); son1 = new Son('张三'); son2 = new Son('李四'); son1.type.push('VUE'); son2.type.push('PHP'); console.log(son1.type);//['JS','HTML','CSS','VUE'] console.log(son2.type);//['JS','HTML','CSS','PHP'] son1.Say();//张三 son2.Say();//李四
以上例子解释:
①封装一个函数JiSheng,两个参数,参数1为子级构造函数,参数2为父级构造函数
②利用Object.create(),将父级构造函数原型克隆为副本clone
③将该副本作为子级构造函数的原型
④给该副本添加constructor属性,因为③中修改原型导致副本失去默认的属性
优缺点:
组合继承优点、寄生继承的有点,目前JS继承中使用的都是这个继承方法
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。