本篇文章将为你介绍javascript中继承的几种实现方式,希望在看完本篇文章后,各位对javascript的继承有一定的了解!
JavaScript中继承的几种实现方式
继承
想要实现继承,首先就得有个父类(构造函数)来提供属性和方法。
function Father(name){ this.name=name //父类构造函数中的属性}Father.prototype.age='40' //父类原型中的属性
登录后复制
1、借用构造函数继承
立即学习“Java免费学习笔记(深入)”;
var Son=function(){ Father.call(this,...arguments) this.age=10}var son=new Son('小明')console.log(son) //{name: "小明", age: 10}
登录后复制
此时Son函数只是通过call方法在子级构造函数中调用父级构造函数
也就是说只继承了父类构造函数的属性,没有继承父类原型的属性。
此时可以通过instanceof方法进行判断
console.log(son instanceof Father) //false
登录后复制
2、通过原型链继承
var Son=function(name){ this.sonName=name}Son.prototype=new Father()var xiaoming=new Son('小明')console.log(xiaoming) //{sonName:'小明'}console.log(xiaoming.__proto__==Son.prototype) //trueconsole.log(xiaoming.__proto__.__proto__==Father.prototype) //trueconsole.log(xiaoming.age) //40 通过原型链查找
登录后复制
Son继承了Father构造函数中的name属性以及原型中的age属性,
Son的原型对象小明继承了Son构造函数中的sonName属性、Father构造函数中的name属性以及原型中的age属性,但是只能传值给Son,不能传值给Father。
3、组合继承(组合原型链继承和借用构造函数继承)
var Son=function(){ Father.call(this,...arguments)}Son.prototype=new Father()var son=new Son('小明')console.log(son) //{name:'小明'}console.log(son.age) //40
登录后复制
结合1、2两种继承方法,解决了无法继承原型属性、方法以及不能传参的问题。实际上子类上会拥有父类的两份属性,只是子类的属性覆盖了父类的属性(Father.call(),new Father())
4、拷贝继承
通过for…in,把父类对象和原型对象上可枚举的属性和方法循环赋值到Son的原型上
function Son(name){ var father=new Father() for(let i in father){ console.log(father[i]) Son.prototype[i]=father[i] } Son.prototype.name=name}var son=new Son('leo')console.log(son)
登录后复制
这种方法无法获取父类不可枚举的方法,同时因为要拷贝父类的属性和方法,内存占用比较高,效率较低。
5、原型式继承
采用原型式继承并不需要定义一个类,传入参数obj,生成一个继承obj对象的对象。类似于复制一个对象,用函数进行包装。但是它不是类式继承,而是原型式基础,缺少了类的概念。
function ObjectCreate(obj){ //这个方法的原理就是Object.create() function F(){} F.prototype=obj return new F()}var Son=new Father('son');var son=ObjectCreate(Son)var objson=Object.create(Son);console.log(son.name) //sonconsole.log(objson.name) //sonconsole.log(son.__proto__==Son) //true
登录后复制
6、寄生式继承
创建一个仅仅用于封装继承过程的函数,然后在内部以某种方式增强对象,最后返回对象
function ObjectCreate(obj){ function F(){} F.prototype=obj return new F()}var Son=new Father();function subObject(obj){ var sub=ObjectCreate(obj) sub.name='son' return sub}var son=subObject(Son)console.log(son.name) //son
登录后复制
7、寄生组合式继承
结合寄生式继承和组合式继承,完美实现不带两份超类属性的继承方式,但是太过繁杂,感觉还不如组合式继承。
function ObjectCreate(obj){ function F(){} F.prototype=obj return new F() }var middle=ObjectCreate(Father.prototype) //middle的原型继承了父类函数的原型function Son(){ Father.call(this,...arguments)}Son.prototype=middle; middle.construtor=Son; //修复实例 var son=new Son('son');console.log(son) //{name:'son'}
登录后复制
本文来自 js教程 栏目,欢迎学习!
以上就是JavaScript中继承的几种实现方式的详细内容,更多请关注【创想鸟】其它相关文章!
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。
发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2761886.html