zoukankan      html  css  js  c++  java
  • (转)js实现继承的5种方式

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

    Js代码  收藏代码
    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,使它指向传入函数的具体对象

    Js代码  收藏代码
    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.   
    13.     this.saySomeThing=function()  
    14.     {  
    15.         console.log(this.fname);  
    16.         this.sayAge();  
    17.     }  
    18.    this.getName=function()  
    19.    {  
    20.        return firstname;  
    21.    }  
    22.   
    23. }  
    24. var child=new Child("张");  
    25. Parent.call(child,child.getName());  
    26. child.saySomeThing();  

     

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

    Js代码  收藏代码
    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.   
    13.     this.saySomeThing=function()  
    14.     {  
    15.         console.log(this.fname);  
    16.         this.sayAge();  
    17.     }  
    18.     this.getName=function()  
    19.     {  
    20.         return firstname;  
    21.     }  
    22.   
    23. }  
    24. var child=new Child("张");  
    25. Parent.apply(child,[child.getName()]);  
    26. child.saySomeThing();  

     

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

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

     

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

    Js代码  收藏代码
      1. function Parent()  
      2. {  
      3.   
      4.     this.sayAge=function()  
      5.     {  
      6.         console.log(this.age);  
      7.     }  
      8. }  
      9.   
      10. Parent.prototype.sayParent=function()  
      11. {  
      12.    alert("this is parentmethod!!!");  
      13. }  
      14.   
      15. function Child(firstname)  
      16. {  
      17.     Parent.call(this);  
      18.     this.fname=firstname;  
      19.     this.age=40;  
      20.     this.saySomeThing=function()  
      21.     {  
      22.         console.log(this.fname);  
      23.         this.sayAge();  
      24.     }  
      25. }  
      26.   
      27. Child.prototype=new  Parent();  
      28. var child=new Child("张");  
      29. child.saySomeThing();  
      30. child.sayParent();  
  • 相关阅读:
    FLEX图像工具类-图像变形
    flex中list或Combox中的子项上移下移操作
    flex中socket的使用
    Flex2款简单FLV播放器很经典
    Flex中Css参考示例
    Flex中CursorManager的应用
    关于FLEX的安全沙箱问题
    Flex实现多文件上传之一:前台部分
    Flex与JS通信
    metasploit 常用指令
  • 原文地址:https://www.cnblogs.com/christal-11/p/5872589.html
Copyright © 2011-2022 走看看