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. Java基础之扩展GUI——显示About对话框(Sketcher 2 displaying an About dialog)

    控制台程序. 最简单的对话框仅仅显示一些信息.为了说明这一点,可以为Sketcher添加Help菜单项和About菜单项,之后再显示About对话框来提供有关应用程序的信息. 要新建的对话框类从JDi ...

  2. java经典算法40题(21-40)

    [程序21]   题目:求1+2!+3!+...+20!的和   1.程序分析:此程序只是把累加变成了累乘.   public class Ex21 { static long sum = 0;  s ...

  3. matlab编译器和程序发布

    如何把编写好的matlab程序转换成c/c++语言,如何编译m文件为可执行程序,如何在没有matlab配置环境的机器上运行你编译出来的可执行程序? 一:matlab的编译器设置 执行命令:mbuild ...

  4. Python 进程

    安装Python的paramiko模块 步骤: 1:管理员方式打开cmd,切换到python安装路径的Scripts目录下: 2:执行命令: 1 pip3.5.exe install paramiko ...

  5. 怎么理解Android版本兼容???

    程序中设置了minSdkVersion和targetSdkVersion如下: <uses-sdk android:minSdkVersion="8" android:tar ...

  6. IIS配置注意点

    1.是否有权限 2.程序池是否为4.0集成 3.是否启用目录浏览模式:目录浏览==>启用(好像可以不用) 4.是否设置默认页面 5.其他的,百度. asp.net发布到IIS中出现错误:处理程序 ...

  7. biztalk重新发布

    前提:在vs2013中,项目属性:重新部署设置为true,重新启动主机实例:设置为true,或者在最后重新部署完以后手动重启主机实例 下面是具体的步骤: 1. 项目修改完重新生成.. 2. 转到biz ...

  8. 使用Log4Net完成异常日志处理

    1.在MVC的Modal文件夹建一个异常处理过滤器 public class MyExceptionAttribute:HandleErrorAttribute { public static Que ...

  9. viewdata向view传递匿名类,view该如何遍历?

    //方法中的代码var userInfoList = from p in db.UserInfo select new {UserID=p.ID, UserName = p.UName, UserPw ...

  10. 挂羊头卖狗肉蓄意欺骗读者——谭浩强《C程序设计(第四版)》中所谓的“按照C99”(二)

    挂羊头卖狗肉蓄意欺骗读者——谭浩强<C程序设计(第四版)>中所谓的“按照C99”(二) 在<谭C>p4:“本书的叙述以C99标准为依据”,下面从C89到C99的主要变化方面来看 ...