js是门灵活的语言,实现一种功能往往有多种做法,ECMAScript没有明确的继承机制,而是通过模仿实现的,根据js语言的本身的特性,js实现继承有以下通用的几种方式
1.使用对象冒充实现继承(该种实现方式可以实现多继承)
实现原理:让父类的构造函数成为子类的方法,然后调用该子类的方法,通过this关键字给所有的属性和方法赋值

  1. function Parent(firstname)
  2. {
  3. this.fname=firstname;
  4. this.age=40;
  5. this.sayAge=function()
  6. {
  7. console.log(this.age);
  8. }
  9. }
  10. function Child(firstname)
  11. {
  12. this.parent=Parent;
  13. this.parent(firstname);
  14. delete this.parent;
  15. this.saySomeThing=function()
  16. {
  17. console.log(this.fname);
  18. this.sayAge();
  19. }
  20. }
  21. var mychild=new  Child("李");
  22. mychild.saySomeThing();

2.采用call方法改变函数上下文实现继承(该种方式不能继承原型链,若想继承原型链,则采用5混合模式)
实现原理:改变函数内部的函数上下文this,使它指向传入函数的具体对象

  1. function Parent(firstname)
  2. {
  3. this.fname=firstname;
  4. this.age=40;
  5. this.sayAge=function()
  6. {
  7. console.log(this.age);
  8. }
  9. }
  10. function Child(firstname)
  11. {
  12. this.saySomeThing=function()
  13. {
  14. console.log(this.fname);
  15. this.sayAge();
  16. }
  17. this.getName=function()
  18. {
  19. return firstname;
  20. }
  21. }
  22. var child=new Child("张");
  23. Parent.call(child,child.getName());
  24. child.saySomeThing();

3.采用Apply方法改变函数上下文实现继承(该种方式不能继承原型链,若想继承原型链,则采用5混合模式)
实现原理:改变函数内部的函数上下文this,使它指向传入函数的具体对象

  1. function Parent(firstname)
  2. {
  3. this.fname=firstname;
  4. this.age=40;
  5. this.sayAge=function()
  6. {
  7. console.log(this.age);
  8. }
  9. }
  10. function Child(firstname)
  11. {
  12. this.saySomeThing=function()
  13. {
  14. console.log(this.fname);
  15. this.sayAge();
  16. }
  17. this.getName=function()
  18. {
  19. return firstname;
  20. }
  21. }
  22. var child=new Child("张");
  23. Parent.apply(child,[child.getName()]);
  24. child.saySomeThing();

4.采用原型链的方式实现继承
实现原理:使子类原型对象指向父类的实例以实现继承,即重写类的原型,弊端是不能直接实现多继承

  1. function Parent()
  2. {
  3. this.sayAge=function()
  4. {
  5. console.log(this.age);
  6. }
  7. }
  8. function Child(firstname)
  9. {
  10. this.fname=firstname;
  11. this.age=40;
  12. this.saySomeThing=function()
  13. {
  14. console.log(this.fname);
  15. this.sayAge();
  16. }
  17. }
  18. Child.prototype=new  Parent();
  19. var child=new Child("张");
  20. child.saySomeThing();

5.采用混合模式实现继承

  1. function Parent()
  2. {
  3. this.sayAge=function()
  4. {
  5. console.log(this.age);
  6. }
  7. }
  8. Parent.prototype.sayParent=function()
  9. {
  10. alert("this is parentmethod!!!");
  11. }
  12. function Child(firstname)
  13. {
  14. Parent.call(this);
  15. this.fname=firstname;
  16. this.age=40;
  17. this.saySomeThing=function()
  18. {
  19. console.log(this.fname);
  20. this.sayAge();
  21. }
  22. }
  23. Child.prototype=new  Parent();
  24. var child=new Child("张");
  25. child.saySomeThing();
  26. child.sayParent();

js实现继承的更多相关文章

  1. JS对象继承篇

    JS对象继承篇 ECMAScript只支持实现继承,而且其实现继承主要是依靠原型链来实现的 原型链 其基本思路是利用原型让一个引用类型继承另一个引用类型的属性和方法 function Person() ...

  2. js实现继承的5种方式 (笔记)

    js实现继承的5种方式 以下 均为 ES5 的写法: js是门灵活的语言,实现一种功能往往有多种做法,ECMAScript没有明确的继承机制,而是通过模仿实现的,根据js语言的本身的特性,js实现继承 ...

  3. js实现继承的方式总结

    js实现继承的5种方式 以下 均为 ES5 的写法: js是门灵活的语言,实现一种功能往往有多种做法,ECMAScript没有明确的继承机制,而是通过模仿实现的,根据js语言的本身的特性,js实现继承 ...

  4. 【09-23】js原型继承学习笔记

    js原型继承学习笔记 function funcA(){ this.a="prototype a"; } var b=new funcA(); b.a="object a ...

  5. js实现继承的两种方式

    这是面试时面试官会经常问到问题: js的继承方式大致可分为两种:对象冒充和原型方式: 一.先说对象冒充,又可分为3种:临时属性方式.call().apply(): 1.临时属性方式: 当构造对象son ...

  6. 浅谈JS的继承

    JS继承 继承是OO语言中最为人津津乐道的概念,许多OO语言都支持两种方式的继承:接口继承:实现继承. 接口继承:只继承方法签名. 实现继承:继承实际的方法. 由于ES里函数没有签名,所以在ES里面无 ...

  7. JS类继承常用方式发展史

    JS类继承常用方式发展史 涉及知识点 构造函数方式继承 1-继承单个对象 1.1 多步走初始版 1.2 多步走优化版 1.3 Object.create()方式 2-继承多个对象 2.1 遍历 Obj ...

  8. js实现继承的5种方式

    js是门灵活的语言,实现一种功能往往有多种做法,ECMAScript没有明确的继承机制,而是通过模仿实现的,根据js语言的本身的特性,js实现继承有以下通用的几种方式1.使用对象冒充实现继承(该种实现 ...

  9. JS原型继承与类的继承

    我们先看JS类的继承 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...

随机推荐

  1. 关于Web项目里的给表单验证控件添加结束时间不得小于开始时间的验证方法,日期转换和前台显示格式之间,还有JSON取日期数据格式转换成标准日期格式的问题

    项目里有些不同页面间的日期显示格式是不同的, 第一个问题: 比如我用日期控件WdatePicker.js导包后只需在input标签里加上onClick="WdatePicker()" ...

  2. 使用Redis分布式队列

    1.这是处理异常的类 public class MyExceptionAttribute:HandleErrorAttribute { //public static Queue<Excepti ...

  3. Spring MVC 学习资料

    引述要学习Spring框架的技术内幕,必须事先掌握一些基本的Java知识,正所谓“登高必自卑,涉远必自迩”.以下几项Java知识和Spring框架息息相关,不可不学(我将通过一个系列分别介绍这些Jav ...

  4. bitcask

    Bitcask模型是一种日志型kv模型.所谓日志型,是指它不直接支持随机写入,而是像日志一样支持追加操作.Bitcask模型将随机写入转化为顺序写入. 任意时刻,系统中只有一个数据文件支持写入,称为a ...

  5. Linq join

    MXS&Vincene  ─╄OvЁ  &0000022─╄OvЁ  MXS&Vincene MXS&Vincene  ─╄OvЁ:今天很残酷,明天更残酷,后天很美好, ...

  6. 关于input内容监听(change)

    js的话利用input的onchange事件 而jquery的话利用change()函数,代码如下: <!DOCTYPE html> <html> <head> & ...

  7. tomcat,Jboss,weblogic区别与比较

    一.tomcat Tomcat 服务器是一个免费的开放源代码的Web 应用服务器,它是Apache 软件基金会(Apache Software Foundation)的Jakarta 项目中的一个核心 ...

  8. Win10系统Start Menu上的图标莫名消失

    今天在工作过程中,突然有测试的同事给我报来一个问题.她是这么描述的“执行完XXX工具之后,在Start Menu找不到图标了.” 针对问题本身: 1,是执行完XXXX工具之后? 2,Start Men ...

  9. windows+caffe(二)——图片转换为levedb格式

    借鉴于langb2014的  http://blog.csdn.net/langb2014/article/details/50458520 与liukailun09的  http://blog.cs ...

  10. mysql查询优化器的提示(hit)

    如果对优化器选择的执行计划不满意,可以使用优化器提供的几个提示来控制最终的执行计划,关于每个提示的具体用法,建议直接阅读官方手册,一些提示和版本有直接关系,可以使用的一些提示如下: high_prio ...