jsのサブクラスは親を継承する

4759 ワード

多くの場合、私たちが書いたjs操作には多くの共通の場所があり、毎回コピーされ、コードの多重性が悪い.なぜjavaのように、共通の操作、属性を抽出して親とし、子を継承して加工を続け、親に影響を与えないのか.
次にjsのクラスの3つの継承の書き方を紹介します
コピー継承:(汎用型でnewがある場合でもなくてもよい)

継承属性用親のcallメソッド

    .call(this,  1,  2,....);

継承方法for in

  extend(     ,     );
  
  //for in     jq         
  function extend(obj1, obj2){
    for(var attr in obj2){
          obj1[attr] = obj2[attr];
    }
  }

まずこの簡単な例を見て、jsの継承を理解します:

  
  
    
      
      myTest
    
    
      
        function CreatePerson(name,sex){
          this.name = name;
          this.sex = sex;
        }//     ，       
        CreatePerson.prototype.showName = function(){
          alert(this.name);
        }//             
        var p1 = new CreatePerson('  ', 'boy');//           
        p1.showName();//  
  
        //                  call
        function CreateStar(name, sex,job){
            CreatePerson.call(this,name,sex);
            this.job = job;
        }
  
        //         (       ，       ，     ，         )
        // CreateStar.prototype=CreatePerson.prototype;
  
        extend(CreateStar.prototype,CreatePerson.prototype);
  
  //for in     jq         
        function extend(obj1, obj2){
            for(var attr in obj2){
              obj1[attr] = obj2[attr];
            }
        }
  
        var p2 = new CreateStar('xiaolki','girl','papa');
        p2.showName();
        p1.showName();

以下にjsドラッグdivの動作の継承を示す

親がdiv 1をドラッグする操作、および親

 function Drag(id) {  //  
     this.obj = document.getElementById(id);//       dom  
     this.disX = 0;
     this.disY = 0;
 }
 Drag.prototype.init = function () {

     var This = this;

     //         
     this.obj.onmousedown = function (ev) {
         var ev = ev || window.event;
         This.fnDown(ev);
         
         //         
         document.onmousemove = function (ev) {
             var ev = ev || window.event;
             This.fnMove(ev);
         };
         
         //         
         document.onmouseup = function () {
             This.fnUp();
         };
         return false;
     };

 };

 //      
 Drag.prototype.fnDown = function (ev) {
     this.disX = ev.clientX - this.obj.offsetLeft;
     this.disY = ev.clientY - this.obj.offsetTop;
 };

 //      
 Drag.prototype.fnMove = function (ev) {
     this.obj.style.left = ev.clientX - this.disX + 'px';
     this.obj.style.top = ev.clientY - this.disY + 'px';
 };

 //      
 Drag.prototype.fnUp = function () {
     document.onmousemove = null;
     document.onmouseup = null;
 };

を書く

子クラス継承親

 function ChildDrag(id) {   //  
     Drag.call(this, id);//       
 }

 //       
 extend(ChildDrag.prototype, Drag.prototype);

 //             
 ChildDrag.prototype.fnMove = function (ev) {

     var L = ev.clientX - this.disX;
     var T = ev.clientY - this.disY;

     if (L < 0) {
         L = 0;
     }
     else if (L > document.documentElement.clientWidth - this.obj.offsetWidth) {
         L = document.documentElement.clientWidth - this.obj.offsetWidth;
     }

     this.obj.style.left = L + 'px';
     this.obj.style.top = T + 'px';
 };

 //for in         
 function extend(obj1, obj2) {
     for (var attr in obj2) {
         obj1[attr] = obj2[attr];
     }
 }

類似継承:(newコンストラクション関数)
JSはクラスの概念がなく、JSにおけるコンストラクション関数を見たクラスである
属性とメソッドを継承する場合は、別々に継承します.





     


function Aaa(){   //  
    this.name = [1,2,3];
}

Aaa.prototype.showName = function(){
    alert( this.name );
};

function Bbb(){   //  
    Aaa.call(this);
}

var F = function(){};
F.prototype = Aaa.prototype;//             ，     
Bbb.prototype = new F();//            
Bbb.prototype.constructor = Bbb; //          ，           

var b1 = new Bbb();
//b1.showName();
//alert( b1.name );
//alert( b1.constructor );
b1.name.push(4);

var b2 = new Bbb();

alert( b2.name );

プロトタイプ継承:(newオブジェクトなし)




    
         
    

        var a = {
            name: '  '
        };

        var b = cloneObj(a);

        b.name = '  ';

        //alert( b.name );
        alert(a.name);

        function cloneObj(obj) {

            var F = function () {
            };

            F.prototype = obj;

            return new F();

        }

python > datetime > msecを取得する > msec = int(round(time.time() * 1000)) % 1000

hdu 4414杭州ネット試合