zoukankan      html  css  js  c++  java
  • 细谈Javascript继承随记

       说到javascript继承,从后台转到前端开发的jser,一般的开发习惯是那种后台面向对象式开发

    像这种后台的面向对象编程,在前端JS开发中,也有类似的概念,就是JS继承方法中的类式继承。

       首先我们定义一个父类,

       

      var Person=function(name){
          this._name=name;
      }
    
      Person.prototype.getName=function(){
          return this._name;
      } 
    

      像在后台面向对象中的继承一样,我们再定义一个子类来继承上面的父类

    var Author=function(name,books){
        Person.call(this,name);
        this._books=books;
    }
    
    Author.prototype=new Person();
    Author.prototype.constructor=Author;
    Author.prototype.getBooks=function(){
        return this._books;
    }
    

      上面的继承是利用javascript原型来继承父类的方法,属性是调用父类的构造,传入子类的实例对象来实现的,由于原型赋了父类对象的值,所以此时子类的原型

    构造对象就变成了父类,所以此时需要重新设置子类原型的constructor,这样方便instance of 调用的时候,返回的是子类的对象。

    其实上面子类继承父类的时候,做了些额外的操作,这些操作可以定义一个通用的方法来实现,见下面的代码。

    var extend=function(subclas,superclass){
      
        var F=function(){};
        F.prototype=superclass.prototype;
       subclass.prototype=new F;
       subclass.prototype.constructor=subclass;// 此处修改构造为自己
    
       subclass._superclass=superclass.prototype;
    
       if (superclass.prototype.constructor===Object.prototype.constructor){
            superclass.prototype.constructor=superclass;
      }
    
    }
    

      通过上面通用extend方法,可以修改一下子类对父类继承的实现,见下面的代码。

     var Author=function(name,books){
    
         //此处调用自己的父类属性来调用,减少偶合
        Author._supeclass.constructor.call(this,name);
        this._books=books;
    }
    
     extend(Author,Person);
    
    Author.prototype.getBooks=function(){
       
       //此处可以通用父类属性来调用父类的方法
       var name=Author._superclass.getName.call(this);
       console.log(name+this.books);
    }
    

      现在我们来写了调用的例子来看我们的成果。

    var au=new Author('xu','book1,book2');
    
    au.getBooks();
    //打印出 xu book1,book2
    

      以上只是自己在学习js面向对象中类式继承中的一些体会,尽供参考。

  • 相关阅读:
    如何还原Microsoft Office Word 2003默认的Normal.dot模板文件
    如何解决VMware Workstation 10.0.0 build-1295980马赛克现象
    通过更改注册表信息来恢复Microsoft Office 2003默认设置
    在运行Eclipse时明确指定要使用的Java VM
    修改Eclipse启动图像
    Get IPv4 Address 1.0
    hosts appender 2.0
    Extract String From Text 1.0
    String Replace 1.0
    360 Extension for Chrome Download 1.0
  • 原文地址:https://www.cnblogs.com/xuwenmin888/p/2987778.html
Copyright © 2011-2022 走看看