JavaScript－カスタムオブジェクト

7704 ワード
JavaScript プログラミング bean プロトタイプ
一,概要
    Java言語では、私たちは自分のクラスを定義し、これらの種類に基づいてオブジェクトを作成して使用することができます.Javascriptでは、自分のクラスを定義することもできます.例えば、User類、Hashtable類など.
 
  現在Javascriptには、Date、Aray、RegExp、String、Math、Numberなどの標準的なクラスが存在しています.これはプログラミングに多くの便利を提供しています.しかし、複雑なクライアント・プログラムにとっては、これらはまだ十分ではない.
 
  Javaと違って、Java 2が提供してくれる標準類は多くて、基本的には私達のプログラミング需要を満たしていますが、Javascriptが提供する標準類はとても少ないです.
 
二,基本概念
 
1,オブジェクトをカスタマイズします.   JSのオブジェクト拡張メカニズムにより、ユーザはJSオブジェクトをカスタマイズすることができ、これはJava言語と類似したところがある.    カスタムオブジェクトに対応するのは、例えば、Date、Aray、MathなどのJS標準オブジェクトです.
2,プロトタイプ
   JSでは、オブジェクト属性と方法を作成する方法であり、プロトタイプによりオブジェクトに新しい属性と方法を追加することができる.   prototypeによって、JS標準オブジェクトに新しい属性と方法を追加することができます.例えば、Stringオブジェクトに対して、新しい方法trim()を追加することができます.   厳密なプログラミング言語(例えばJava)とは異なり、動作中にJSオブジェクトに新しい属性を動的に追加することができます.
 
 
三、文法のルール
 
1,オブジェクトの作成方式
1)オブジェクト初期化器方式
 
  
  ：objectName = {property1:value1, property2:value2,…, propertyN:valueN}
 
propertyはオブジェクトの属性valueであり、値は文字列、数字またはオブジェクトの3つのうちの1つとすることができる.
 
  
var user={name:“user1”,age:18}；
var user={name:“user1”,job:{salary:3000,title:programmer}
 
 
このようにオブジェクトを初期化する方法、例えば:
 
  
    var user={name:“user1”,age:18,getName:function(){
                return this.name;
          }          
    }
 後は構造関数を中心に説明します.属性や方法の定義なども含めて、構造関数の方式について説明します.
 
 
2)コンストラクタ方式
構造関数を作成し、new方式でオブジェクトを作成します.構造パラメータは例えば、
 
  
function User(name,age){ 
          this.name=name;
          this.age=age;
          this.canFly=false;
    }
    var use=new User();
 
 
2、オブジェクトの属性を定義します.
 
1)JSでは、オブジェクトのために3つのタイプの属性を定義することができます.プライベート属性はJavaと同様に、オブジェクトの内部でのみ使用できます.インスタンス属性はオブジェクトのインスタンスによって参照しなければならず、クラス属性は直接にクラス名によって使用することができます.
 
2)プライベート属性の定義プライベート属性は、構造関数の内部でのみ定義され使用されます.文法形式:var propertyName=value;
たとえば:
  
function User(age){
           this.age=age;
           var isChild=age<12;
           this.isLittleChild=isChild;
    }
    var user=new User(15);
    alert(user.isLittleChild);//     
    alert(user.isChild);//  ：
 
3)例示的な属性定義には、2つの方法があります.prototype方式、文法フォーマット:functionName.prototype.propertyName=value this方式、文法形式:this.propertyName=value、後の例でthisが使用する位置の上にあるvalueは文字創造、数文字と対象となります.たとえば:
function User(){ }
User.prototype.name=“user1”;
User.prototype.age=18;
var user=new User();
alert(user.age);
—————————————–
function User(name,age,job){
         this.name=“user1”;
         this.age=18;
         this.job=job;
    }
    alert(user.age);
 
3)クラスの属性定義文法フォーマット:functionName.propertyName=value例えば:
  
function User(){ }
User.MAX_AGE=200;
User.MIN_AGE=0;
alert(User.MAX_AGE);
 JS標準オブジェクトのクラス属性を参照してください.
  
Number.MAX_VALUE //     

Math.PI //
 
 
4)属性の定義については、上記の比較的正規の方式以外に、非常に特別な定義方式があります.文法形式:obj[index]=value例:
     function User(name){
             this.name=name;
             this.age=18;
             this[1]=“ok”;
             this[200]=“year”;
     }
     var user=new User(“user1”);
     alert(user[1]);
      上記の例では、this[1]によってage属性を取得するのではなく、this[0]によってname属性を取得するのではなく、indexによって定義されたindex方式で参照しなければならず、index方式で定義されていないものは、通常の方法で参照しなければならないことに留意されたい.
3、オブジェクトの定義方法
1)JSでは、オブジェクトのために3つのタイプの方法を定義することができます.プライベート方法、実例方法、およびクラス方法は、Javaと同様です.プライベート方法は、オブジェクトの内部でのみ使用可能です.例示的な方法は、オブジェクトの実装後にクラス名で直接使用することができます.2)プライベート法のプライベート法を定義するためには、構造関数の内部で定義しなければならず、構造関数の中でしか使用できない.構文フォーマット:function methodName(arg 1,…,argN)｛｝例えば:
  
function User(name){
          this.name=name;
          function getNameLength(nameStr){
              return nameStr.length;
          }
          this.nameLength=getNameLength(this.name);    
    }
 
3)例示的な方法を定義して、現在も2つの方法を使用することができます.プロトタイプ方式は、構造関数の外で使用され、構文フォーマット:
functionName.prototype.methodName=method;
または
functionName.prototype.methodName=function(arg 1,…,argN){}
this方式は、コンストラクタ内部で使用され、構文書式:
this.methodName=method;
または
this.methodName=function(arg 1,…,argN){}
上記の文法的説明では、methodは外部に既に存在している方法であり、methodNameが定義する対象の方法であり、外部の一つの方法を対象に直接付与する方法を意味する.function(arg 1,…,argN){}で対象を定義する方法は開発者が身につけるべきです.
例の方法のいくつかの例を定義します.例1
  
function User(name){
       this.name=name;
       this.getName=getUserName;
       this.setName=setUserName;
}
function getUserName(){
       return this.name;
}
Function setUserName(name){
       this.name=name;
}
 
例示的な方法のいくつかの例を定義します.例2
 
  
function User(name){
       this.name=name;
       this.getName=function(){
               return this.name;
       };
       this.setName=function(newName){
               this.name=newName;
       };
}
 
 
例示的な方法のいくつかの例を定義します.例3
  
function User(name){
       this.name=name;
}
User.prototype.getName=getUserName;
User.prototype.setName=setUserName();
function getUserName(){
       return this.name;
}
Function setUserName(name){
       this.name=name;
}
 
例示的な方法のいくつかの例を定義します.例4
  
function User(name){
       this.name=name;
}
User.prototype.getName=function(){
       return this.name;
};
User.prototype.setName=function(newName){
       this.name=newName;
};
 
4)クラスの方法を定義する方法は、構造関数の外で定義する必要があり、構造関数名によって直接参照することができます.構文フォーマット:
functionName.methodName=methodod;
または
functionName.methodName=function(arg 1,…,argN){}
例:
  
function User(name){
            this.name=name;
    }
    User.getMaxAge=getUserMaxAge;
    function getUserMaxAge(){
           return 200;
    }
    または
  
    User.getMaxAge=function(){return 200;};
    alert(User.getMaxAge());
 
4、属性と方法の参照
1)視認性からいうと、プライベート属性と方法は対象の内部でのみ参照できます.実例的な属性および方法は、どこでも使用できますが、オブジェクトを介して参照されなければなりません.クラスの属性と方法は、どこでも使用できますが、オブジェクトのインスタンスを介して参照することはできません.2)対象層から言うと、Java beanの引用と似ています.深層的な引用が可能です.いくつかの方法:簡単な属性:obj.propertyNameオブジェクト属性:obj.innerObj.propertyNameインデックス属性:obj.propertyName[index]は、より深いレベルの参照については、上記と類似しています.3)定義の仕方から、indexによって定義された属性は、indexによってのみ参照できる.非indexによって定義された属性は、通常の方法で参照される必要があります.なお、対象の方法はindexでは定義できません.
5,属性と方法の動的な増加と削除1)は、すでに実用化されたオブジェクトに対して、その属性と方法を動的に追加し、削除することができます.動的にオブジェクトを追加する方法    Obj.newMethodName=methodまたは=function(arg 1,…,argN){}オブジェクト属性を動的に削除します.    delete obj.propertyNameダイナミックにオブジェクトを削除する方法    delete obj.methodName    2)例:
  
    function User(name){
             this.name=name;
             this.age=18;
    }
    var user=new User(“user1”);
    user.sister=“susan”;
    alert(user.sister);//    
    delete user.sister;
    alert(user.sister);//  ：        

    user.getMotherName=function(){return “mary”;}
    alert(user.getMotherName());//    
    delete user.getMotherName;
    alert(user.getMotherName());//  ：
 
 
javascript操作によくあるhtmlタグ