js继承的几种方式
2019-08-14 10:11:56来源:博客园 阅读 ()
最近在面试的时候,遇到过两次问继承实现的几种方式,这里能我给大家列举了以下的这几种,给大家参考参考
方式一:借助构造函数实现继承
这里使用的原理就是在Child里面,把Parent的this指向改为是Child的this指向,从而实现继承
function Parent(name){ this.name=name; } Parent.prototype.saiHi=function(){ console.log("hello") } function Child(name,age,gender){ Parent.call(this,name) this.age=age; this.gender=gender; } let child=new Child("王磊",20,"男") console.log(child.name);// 王磊 child.sayHi(); // Uncaught TypeError:child.sayHi is not a function
缺点:只能解决属性的继承,使用属性的值不重复,但是父级类别的方法不能继承
方式二:借助原型链实现继承
第二种方式就是把Child的原型改为是Parent的实例,从而实现继承
function Parent(name,gender){ this.name=name; this.gender=gender; this.list=[1,2,3] } Parent.prototype.eat=function(){ console.log("晚餐时间到") } function Child(age){ this.age=age; } Child.prototype=new Parent("李白","男"); var child=new Child(20); var child2=new Child(30); child.eat(); console.log(child.list,child2.list);// [1,2,3] [1,2,3] child.list.push(4) console.log(child.list);// [1,2,3,4] console.log(child2.list);// [1,2,3,4]
缺点:因为Child的原型对象都是New Parent,所以实例化出来的对象的属性都是一样的,而且Parent上面的引用类型只要有一个实例对象修改了,其他也会跟着修改.因为他们原型对象都是共用的
方式三:组合型
方式三的话是结合了方式一和方式二来实现继承
function Person(school){ this.school=school; } Person.prototype.skill=function(){ console.log("学习"); } function Student(school,name,age,gender){ Parent.call(this,school); this.name=name; this.age=age; this.gender=gender; } Student.prototype=Person.prototype; let student=new Student("广铁一中","王菲菲",14,"女"); console.log(Student.prototype===Person.prototype) console.log(student.constructor)
缺点:父类的原型对象调用了两次,没有必要,而且student实例的构造函数是来自于Person
方式四:组合方式优化
function Parent(name,play){ this.name=name; this.play=play; } function Child(name,play,age){ Parent.call(this,name,play); this.age=age; } Child.prototype=Parent.prototype; let child=new Child("张三","玩",20); let child2=new Child("李四","吃",10) console.log(child,child2) console.log(child.prototype===child2.prototype); true console.log(child.constructor); // 构造函数指向的是Parent
缺点:child实例的构造函数来自于Parent
方式五: 组方式优化
只是这种方式的话,你必须得理解Object.create()方法的使用,他创建的对象是在原型上面的
function Parent(name,play){ this.name=name; this.play=play; } function Child(name,play,age){ Parent.call(this,name,play); this.age=age; } Child.prototype=Object.create(Parent.prototype);// 隔离了父类和子类的构造函数,父类的添加到了__proto__属性上 Child.prototype.constructor=Child let child=new Child("张三","玩",20); let child2=new Child("李四","吃",10) console.log(child.constructor)
原文链接:https://www.cnblogs.com/cythia/p/11175343.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:关于ES6的对象扩展运算符
下一篇:JavaScript垃圾回收机制
- jQuery异步提交表单的两种方式 2020-03-12
- 使用JS在浏览器中判断当前网络连接状态的几种方法 2020-03-12
- js调用刷新界面的几种方式 2020-03-05
- jquery遍历筛选数组的几种方法和遍历解析json对象 2020-02-29
- 深入理解JavaScript是如何实现继承的 2020-02-25
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash