JS クラスのカプセル化と実装 code_js オブジェクト指向

1. js クラスを定義する
JS はオブジェクト指向言語ではなく、クラスのサポートを提供しないため、従来の言語のようにクラスを使用してクラスを定義することはできませんが、クロージャを使用できます。 js クラスを実装するための js のカプセル化メカニズム。

コードをコピーします。 コードは次のとおりです。 🎜>

function ShapeBase() {
this.show = function()
{
alert("ShapeBase show");
this. function(){
alert("ShapeBase init");
}
}


このクラスは show と init の 2 つのメソッドを定義していることに注意してください。 var はプライベート メソッドの定義に使用されるため、ここでは var の代わりに を使用して宣言します。

さらに、Prototype 属性を使用して Shape メソッドを定義することもできます。 🎜>コードをコピー


コードは次のとおりです:

ShapeBase.prototype.show=function() { alert("ShapeBase show " ); } ShapeBase.prototype.init=function()

{

alert("ShapeBase init");
}


上記の書き方




コードをコピーします

コードは次のとおりです。

ShapeBase.prototype={ show:function() { alert("ShapeBase show"); },

init:function() {

アラート("ShapeBase init");
}
};


これで、クラスが作成されました。テストするための JS を作成して、結果が同じかどうかを確認してみましょう。




コードをコピー

コードは次のとおりです:

関数テスト(src){ var s=new ShapeBase(); s.init() }

メソッドは C# と同じです。 まったく同じで、結果は予想どおりです。
ここまでは js クラスの作成方法を学習しましたが、これは単なるインスタンス メソッドです。 C#?
実際、js での静的メソッドの実装は非常に簡単です。実装方法は以下を参照してください:

コードをコピーします

//静的メソッド ShapeBase.StaticDraw = function() { alert("メソッド描画は静的です") >

2. JS クラスの抽象化と継承を実装する

同様に、クラス継承メカニズムは js ではサポートされていませんが、親クラスのメンバー メソッドをコピーすることでこれを実現できます。
クラスの継承と同様に、JavaScript には抽象クラスをサポートするメカニズムがありませんが、JavaScript 言語自体の性質を利用して独自の抽象クラスを実装できます。 js の仮想メソッドを見てみましょう。従来の言語では仮想メソッドを最初に定義する必要があり、仮想メソッドを含むクラスは抽象クラスであり、JavaScript では仮想メソッドと見なすことができません。
従来のオブジェクト指向とは異なり、ここでの仮想メソッドは宣言する必要がなく、直接使用され、クラスをインスタンス化することもできます。 🎜>最初にオブジェクトの extend メソッドを定義します。1 つは静的メソッドで、もう 1 つはインスタンス メソッドです。これら 2 つのメソッドは、継承されたプロトタイプのコピーを実装するために使用されます。

コードをコピー

コードは次のとおりです。


Object.extend = function(destination, source) {
for (source のプロパティ) {

destination[プロパティ] = ソース[プロパティ]; 戻り先; } Object.prototype.extend = function(object) { return Object.extend.apply(this, [this , object]); }

次に、継承されたクラス Rect を実装するために、ここではまず簡単なメソッドを使用して実装します。




コードをコピー


コードは次のとおりです。

function Rect() {
}
Rect.prototype = ShapeBase.prototype; //この文だけで済みます

//新しいメソッドを拡張しますRect.prototype.add=function() { alert("Rect add"); }
show メソッドが変更されると、ShapeBase の show も同じ関数を指すようになります。これは、
が上記で定義されている場合、プロトタイプの割り当てが単純に変更されるためである可能性があります。 :
Rect.prototype.show=function() {
alert("Rect show");
}
実行結果は次のようになります:
function test(){
var s=new ShapeBase( );
s.show(); //結果: Rect 表示
var r=new Rect(); // 結果: Rect 表示
r.add( );
}
次に、object.extend を使用して継承を実装し、ShapeBase を次のように変更します。 🎜>コードをコピー

コードは次のとおりです: ShapeBase.prototype={ show:function() { alert( "ShapeBase show");

},

initialize:function () {
this.oninit();
}
Rect クラスを実装します。




コードをコピーします

コードは次のとおりです。

Rect.prototype=(new ShapeBase ).extend({ //新しいメソッドを追加します add:function() { alert("Rect add"); }, //このメソッドを使用してショーをオーバーライドしますMethod show:function() {

alert("Rect show");

},
//仮想メソッドを実装
oninit:function() {
alert("Rect oninit");
}
} )


クラスが記述されたので、テストしてみましょう:




code

コードは次のとおりです。

function test(src){ ShapeBase.StaticDraw(); var s=new ShapeBase(); 🎜>s.show(); //alert( "ShapeBase show") var r=new Rect(); r.show(); //alert("Rect show") .add(); r.initialize( ); //alert("Rect oninit") }

また、特殊なオブジェクトを使用している記事をインターネットで見かけました。クラスを作成するためのコードは次のとおりです:




コードをコピーします


コードは次のとおりです:

//
//オブジェクト属性のコピー メソッド。PrototypeJS の extend や Ext の Ext.apply など、多くのライブラリで実装されています。
//
function extend(des, src ) {
if (!des)
des = {};
if (src) {
for (var i in src) {
des[i] = src[i]; 🎜>}
}
return des;
}
var CC = {}; //グローバル変数
//
//create はクラスの作成に使用されます
/ /
CC.create = function(スーパークラス, コンストラクター){
var clazz = (function() {
this.initialize.apply(this, argument);
}); /パラメータがない場合は、クラスを直接返します。
if(arguments.length == 0)
return clazz;
//親クラスがない場合、コンストラクターは純粋なオブジェクトである必要があります。今回は、プロパティを直接コピーして返します。
if(!superclass){
return clazz; ,
sprPropty = superclass.prototype ;
if(sprPropty){
//親クラスのメソッドにアクセスするために使用されます
clazz.superclass = sprPropty
extend(absObj, sprPropty); >//プロパティ コンストラクターを呼び出してプロパティを作成します。これが実装の鍵です。
extend(absObj,constructor(sprPropty));
//サブクラス インスタンスは、obj.superclass を通じて親クラスのプロパティに直接アクセスします。
// あまり多くの参照を発生させたくない場合は、ほとんどの場合不要であるため、この文をコメントアウトすることもできます。
clazz.constructor =constructor;
}
return clazz;
}
//
//動物クラスを作成します
//
var Animal = CC。 create(null, {
//Attributes
footprint: '- - - - - - =',
//クラス初期化メソッド、必須。このメソッドは、new を使用してクラスを生成するときに自動的に呼び出されます。上記の定義を参照してください。
initialize: function(options){
extend(this , options);
alert('Animal 初期化メソッドが呼び出されます。'); function(){
alert('Animal Eat メソッドが呼び出されます。');
},
move : function(){
alert('このように移動しています ' this.footprint ' 。 ');
}
});
//
// Duke クラスを作成します
//
var Duke = CC.create(Animal, function(superclass){
//ここで、このクラスの各インスタンスによって共有されるいくつかのクラス グローバル静的データを定義できます。
//派生クラス インスタンスを含むインスタンス クラスを計算します。 >function classUtilityFuncHere(){ }
//クラス固有の属性を返します。
return {
//初期化メソッドを書き換えます
//@override
initialize : function(options) {
alert('Initializing Duke class..');
//親クラスの初期化を呼び出します。このメソッドは他のライブラリよりも単純で、親クラスが何であるかは関係ありません。 call(this, options);
//サブクラスが実行したいことを実行します。
alert('Duke の初期化メソッドが呼び出されます。');
//クラスの静的属性を読み取るか、変更します
static_instance_counter ;
},
//Duke 自身の移動メソッドを書き換えます。
move : function(){
this.footprint = this.footprint 'zzzzzzzz'; move.call(this);
},
//eat メソッドを書き換えます。親クラスのメソッドが呼び出されないことに注意してください。つまり、親クラスの Eat : function() が上書きされます。 {
alert('Duke は食事をしています..');
},
//現在初期化されている Duke クラスのインスタンスの数を表示する新しい Say メソッドを追加します。
say : function(){
alert('Duke インスタンスの数は ' static_instance_counter);
}
});
var DukeChild = CC.create(Duke, function(superclass){ return {
move : function(){
this.footprint = this.footprint ' =';
superclass.move.call(this);
say : function( ){
alert(this.msg || '');
}
});
(function test() {
var Animal = new Animal() ;
animal.eat();
var duke();
dukeA.move(); >dukeA.say();
var duke();
dukeB.say(); = new DukeChild({msg : '私は公爵の子です。'});
dukeC.say()
}); >