js实现继承的5种方式

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 是没有继承的,不过可以曲线救国,利用构造函数.原型等方法实现继承的功能. var o=new Object(); 其实用构造函数实例化一个对象,就是继承,这里可以使用Object中的所有属 ...

  2. JS创建对象、继承原型、ES6中class继承

    面向对象编程:java中对象的两个基本概念:1.类:类是对象的模板,比如说Leader 这个是泛称领导,并不特指谁.2:实例:实例是根据类创建的对象,根据类Leader可以创建出很多实例:liyi,y ...

  3. js最好的继承机制:用对象冒充继承构造函数的属性,用原型prototype继承对象的方法。

    js最好的继承机制:用对象冒充继承构造函数的属性,用原型prototype继承对象的方法. function ClassA(sColor) { this.color = sColor; } Class ...

  4. js模拟实现继承功能

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  5. js中实现继承的几种方式

    首先我们了解,js中的继承是主要是由原型链实现的.那么什么是原型链呢? 由于每个实例中都有一个指向原型对象的指针,如果一个对象的原型对象,是另一个构造函数的实例,这个对象的原型对象就会指向另一个对象的 ...

  6. js怎么实现继承?

    3. js怎么实现继承? 1. 使用原型prototype 这个问题其实之前总结过了……但是面试时候有点忘……主要思想是记得的,但是不会写,还是基础太不牢靠,写的太少了.一开始因为不知道怎么能继承父类 ...

  7. [js]js原型链继承小结

    这是之前总结的, 发现有很多的毛病,就是重点不突出,重新翻看的时候还是得耗费很长时间去理解这玩意. js中的继承 js中什么是类 1,类是函数数据类型 2.每个类有一个自带prototype属性 pr ...

  8. js一种继承机制:用对象冒充继承构造函数的属性,用原型prototype继承对象的方法。

    js一种继承机制:用对象冒充继承构造函数的属性,用原型prototype继承对象的方法. function ClassA(sColor) { this.color = sColor; } ClassA ...

  9. 【学习笔记】六:面向对象的程序设计——理解JS中的对象属性、创建对象、JS中的继承

    ES中没有类的概念,这也使其对象和其他语言中的对象有所不同,ES中定义对象为:“无序属性的集合,其属性包含基本值.对象或者函数”.现在常用的创建单个对象的方法为对象字面量形式.在常见多个对象时,使用工 ...

  10. JS中的继承(上)

    JS中的继承(上) 学过java或者c#之类语言的同学,应该会对js的继承感到很困惑--不要问我怎么知道的,js的继承主要是基于原型(prototype)的,对js的原型感兴趣的同学,可以了解一下我之 ...

随机推荐

  1. FFmpeg基础知识之————H264编码profile & level控制

    H.264有四种画质级别,分别是baseline, extended, main, high: 1.Baseline Profile:基本画质.支持I/P 帧,只支持无交错(Progressive)和 ...

  2. hdu 5269 ZYB loves Xor I 分治 || Trie

    题目大意: 长度为\(n\)的数组A.求对于所有数对\((i,j)(i \in [1,n],j \in [1,n])\),\(lowbit(A_i xor A_j)\)之和.答案对998244353取 ...

  3. rsync 介绍和参数说明

    Rsync 介绍: 我们经常需要在不同目录或者服务器之间做文件同步和更新,Linux提供了很多内置命令可以使用比如scp等等,但是今天我们介绍一个更加强大的工具rsync.rsync 命令是一个远程同 ...

  4. docker 容器内服务自启动

    centos6/7 有区别先说6 centos6: 方式一:rc.local + 容器内的启动脚本 1.chkconfig docker on #docker开机自启动2.[root@master y ...

  5. Poj 2411 Mondriaan's Dream(压缩矩阵DP)

    一.Description Squares and rectangles fascinated the famous Dutch painter Piet Mondriaan. One night, ...

  6. windows服务和进程的区别和联系

    Windows Service 是主要用于服务器环境而长期运行的应用程序, 这类程序不需要有用户界面或者任何模拟输出. 任何的用户消息通常都是记录在Windows 事件日志里.Windows Serv ...

  7. 关于系统中:/dev/mem

    1)参考:https://blog.csdn.net/lsn946803746/article/details/52948036   博主:lsn946803746 2)参考:https://blog ...

  8. uboot和内核分区的修改

    随着内核的更新,内核越来越大,uboot给nand的kernel分区默认是2M的 device nand0 <nandflash0>, # parts = 4  #: name       ...

  9. DotNetBar 第三方控件使用

    1.BalloonTip(气泡提醒) 效果: 代码: balloonTip1.SetBalloonCaption(txtusername, "提示");            ba ...

  10. structs2---OGNL表达式

    技术分析之OGNL表达式概述(了解) 1. OGNL是Object Graphic Navigation Language(对象图导航语言)的缩写 * 所谓对象图,即以任意一个对象为根,通过OGNL可 ...