JavaScript----再利用可能なコードを作成します.


1.1、プロトタイプ継承
    JavaScriptオブジェクトの作成と継承には、プロトタイプ継承と呼ばれる特別なパターンが使われています.この方法の原理は,オブジェクトの構造関数を他のオブジェクトから継承することができ,プロトタイプオブジェクトを作成すると,他のすべての新しいオブジェクトがこのプロトタイプオブジェクトに基づいて構築できるということである.
    全体のプロセスはプロトタイプ属性によって達成される(これは各関数に固有の属性であり、構造関数として使用される関数にも自然にこの属性がある).プロトタイプ継承の設計は、複数継承よりも単一継承に適用されます.プロトタイプ自体は他のプロトタイプやコンストラクションから属性を継承することはなく、属性はすべて実際のオブジェクトから継承されます.例

<script>
// Person          
function Person(name){
	this.name = name;
}
// Person         
Person.prototype.getName = function(){
	return this.name;
};
//    User       
function User(name, password){
	//  ,            /  ,    ,
	//           
	//         name    ,   java super(name);
	//this.name = name;  
	Person.call(this, name);//         
	this.password = password;
}
//User      Person     
User.prototype = new Person();
//        User   
User.prototype.getPassword = function(){
	return this.password;
};
var user = new User("  ", "123");
alert(user.name);
alert(user.getName());
alert(user.password);
alert(user.getPassword());
</script>
    上記の例の中で最も重要な行はUser.prototype=new Person();これはいったいどういう意味ですか?UserはUserオブジェクトの構造関数の参照です.new Person()はPersonコンストラクターを使用して新しいPersonオブジェクトを作成し、そしてUserコンストラクタのプロトタイプをこの操作の結果にセットした.つまり、あなたがnew User()をするたびに、新しいUserオブジェクトがPersonオブジェクトを持つすべての方法は、new Person()を操作して得られるようになる.
1.2、クラス継承
    JavaScriptではアナログ式継承の3つの関数:

<script>
//       ,              prototype 
//              Function.prototype  ,
//                  。               。
//    this 。              ,
//          this 。          。
Function.prototype.method = function(name, func){
	this.prototype[name] = func;
	return this;
};

//  (     )  ,               ,
//                  
//inherits   ,                。
//                  ,           。
Function.method('inherits', function(parent){
	//              
	var depth = 0;
	//        
	var proto = this.prototype = new prent();

	//        'uber' "  "  ,
	//                   
	this.method('uber', function uber(name){
		var func;	//      
		var ret;	//      
		var v = parent.prototype;	//    prototype

		//         'uber'    
		if(depth){
			//     depth,      prototype
			for(var i = d; i > 0; i += 1){
				v = v.constructor.prototype;
			}

			//  prototype     
			func = v[name];
		//     'uber'        
		} else {
			// prototype        
			func = proto[name];

			//          prototype
			if(func == this[name]){
				//         prototype
				func = v[name];
			}
		}

		//                 
		depth += 1;

		//           arguments     。
		//(              )
		ret = func.apply(this, Array.prototype.slice.apply(arguments, [1]));
		//      
		depth -= 1;
		//            
		return ret;
	});
	return this;
});

//             。    new parent()       
//swiss            。    ,    parent    
//             prototype  。
Function.method('swiss', function(parent){
	//          
	for(var i = 1; i < arguments.length; i += 1){
		//        
		var name = arguments[i];
		//      this   prototype 
		this.prototype[name] = parent.prototype[name];
	}
	return this;
});
</script>
    この三つの関数はいったい何を提供していますか?
    Function.prototype.method:関数を構造関数のプロトタイプに関連付ける簡単な方法を提供します.有効なのは,すべての構造関数自体が関数であるため,「method」という新しい方法が得られるからである.
    Function.prototype.inhers:この関数は簡単なオブジェクト継承を提供するために使用できます.コードは主に任意のオブジェクト方法でthis.uber('methodName'を呼び出す)を中心として、このuber方法で上書きする親オブジェクトの方法を実行します.これはJavaScript継承モデルの中では構築されていない部分です.
    Function.prototype.swiss:これは.method()関数の拡張版で、単一の親オブジェクトから複数の関数を取得するために使用できます.複数の親オブジェクトに使用すると、利用可能な複数のオブジェクトの継承が得られます.
クラスを使ってスタイルを継承するJavaScript関数の例:

<script>
//      Person      
function Person(name){
	this.name = name;
}
// Person          
Person.method('getName', function(){
	return this.name;
});
var per = new Person("  ");
alert(per.getName());

//       User      
function User(name, password){
	this.name = name;
	this.password = password;
}
// Person         
User.inherits(Person);
// User          
User.method('getPassword', function(){
	return this.password;
});
//  Person     getName  ,   uber         
User.method('getName', function(){
	return "     :" + this.uber('getName');
});
var user = new User("  ", "888888");
alert(user.getName());
alert(user.getPassword());
</script>
1.3ベースライブラリ
    Baseライブラリはより直感的なオブジェクトの継承方法を提供します.
    Baseを体験してみます.重要な点は開発に役立ちます.オブジェクトの作成、親オブジェクトの継承、親メソッドのカバーの例.

<script type="text/javascript" src="Base.js"></script>
<script type="text/javascript">
// Base               
//      Person 
var Person = Base.extend({
	//Person      
	constructor : function(name){
		this.name = name;
	},
	//Person        
	getName : function(){
		return this.name;
	}
});
//         Person  User 
var User = Person.extend({
	//  User      
	constructor : function(name, password){
		//                 
		this.base(name);
		this.password = password;
	},
	// User            
	getPassword : function(){
		return this.password;
	}
});

var user = new User("  ", "888888");
alert(user.getName());
alert(user.getPassword());
</script>
    Base.exted(...):この関数は、新しい基本的なコンストラクタオブジェクトを作成するために使用されます.この関数で受け入れられた唯一のパラメータは属性と値を含む単純なオブジェクトで、オブジェクト内のこれらの属性と値はすべて生成対象に追加され、そのプロトタイプ方法として使用されます.
    Person.exted(...):これはBase.exted()の文法スタイルの別のバージョンです.すべての構造関数が使用されています.exted()の方法はそれら自身のを獲得します.exted()の方法です.直接それらを継承することもできます.上記の例は元のPersonコンストラクタを直接継承する方法によりUserコンストラクタを作成したものである.
    this.base()最後に、このthis.base()方法は、重載された親の方法を呼び出すために使用される.これはCrockfordのクラスライブラリが提供するthis.uber関数とはかなり違っています.親の名前を指定する必要はありません.
1.4 Prottotypeライブラリ
    Pprototypeの補助関数は、クラスを作成し、簡単な継承を実現するために使用されます.

<script type="text/javascript">
//      'Class'     
var Class = {
	//       ,                
	create : function(){
		//             
		return function(){
			//           
			this.initialize.apply(this, arguments);
		};
	}
}
// Object            ,
//                    
Object.extend = function(destination, source){
	//          
	for(property in source){
		//             
		destination[property] = source[property];
	}
	
	//        
	return destination;
}

//             Person  
var Person = Class.create();

//         Person prototype 
Object.extend(Person.prototype, {
	//     Person        
	initialize : function(name){
		this.name = name;
	},
	//Person       
	getName : function(){
		return this.name;
	}
});

//             User  
var User = Class.create();
//User            
User.prototype = Object.extend(new Person(), {
	//             
	initialize : function(name, password){
		this.name = name;
		this.password = password;
	},
	//             
	getPassword : function(){
		return this.password;
	}
});

var user = new User("  ", "888888");
alert(user.getName());
alert(user.getPassword());
</script>