JavaScript----再利用可能なコードを作成します.
8240 ワード
1.1、プロトタイプ継承
JavaScriptオブジェクトの作成と継承には、プロトタイプ継承と呼ばれる特別なパターンが使われています.この方法の原理は,オブジェクトの構造関数を他のオブジェクトから継承することができ,プロトタイプオブジェクトを作成すると,他のすべての新しいオブジェクトがこのプロトタイプオブジェクトに基づいて構築できるということである.
全体のプロセスはプロトタイプ属性によって達成される(これは各関数に固有の属性であり、構造関数として使用される関数にも自然にこの属性がある).プロトタイプ継承の設計は、複数継承よりも単一継承に適用されます.プロトタイプ自体は他のプロトタイプやコンストラクションから属性を継承することはなく、属性はすべて実際のオブジェクトから継承されます.例
1.2、クラス継承
JavaScriptではアナログ式継承の3つの関数:
Function.prototype.method:関数を構造関数のプロトタイプに関連付ける簡単な方法を提供します.有効なのは,すべての構造関数自体が関数であるため,「method」という新しい方法が得られるからである.
Function.prototype.inhers:この関数は簡単なオブジェクト継承を提供するために使用できます.コードは主に任意のオブジェクト方法でthis.uber('methodName'を呼び出す)を中心として、このuber方法で上書きする親オブジェクトの方法を実行します.これはJavaScript継承モデルの中では構築されていない部分です.
Function.prototype.swiss:これは.method()関数の拡張版で、単一の親オブジェクトから複数の関数を取得するために使用できます.複数の親オブジェクトに使用すると、利用可能な複数のオブジェクトの継承が得られます.
クラスを使ってスタイルを継承するJavaScript関数の例:
Baseライブラリはより直感的なオブジェクトの継承方法を提供します.
Baseを体験してみます.重要な点は開発に役立ちます.オブジェクトの作成、親オブジェクトの継承、親メソッドのカバーの例.
Person.exted(...):これはBase.exted()の文法スタイルの別のバージョンです.すべての構造関数が使用されています.exted()の方法はそれら自身のを獲得します.exted()の方法です.直接それらを継承することもできます.上記の例は元のPersonコンストラクタを直接継承する方法によりUserコンストラクタを作成したものである.
this.base()最後に、このthis.base()方法は、重載された親の方法を呼び出すために使用される.これはCrockfordのクラスライブラリが提供するthis.uber関数とはかなり違っています.親の名前を指定する必要はありません.
1.4 Prottotypeライブラリ
Pprototypeの補助関数は、クラスを作成し、簡単な継承を実現するために使用されます.
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>