JavaScript_javascript スキルでクラスを実装する方法に関するディスカッション-jsチュートリアル-php.cn

JavaScript ではオブジェクトを作成する方法がたくさんあるため、オブジェクトの作成方法は非常に柔軟です。それでは、オブジェクトを作成する最も適切な方法はどれでしょうか?構築パターン、プロトタイプパターン、またはオブジェクトリテラルパターン?

しかし、これらのモードとは一体何なのでしょうか?

説明を始める前に、JavaScript の基礎知識をわかりやすくご紹介します。

JavaScript でオブジェクト指向プログラミングを実装することは可能ですか?

答えは可能です。JavaScript はオブジェクトを作成できるのです。このようなオブジェクトには、データとそのデータを操作できるメソッドを含めることができ、さらに他のオブジェクトを含めることもできます。クラスはありませんが、コンストラクターはあります。クラス継承メカニズムはありませんが、プロトタイプを通じて継承を実現できます。

これで、オブジェクトを作成し、JavaScript でオブジェクトベースのプログラミングを実装するために必要なコンポーネントを理解できたようです。

JavaScript にはプライベート変数があることは誰もが知っています。「var」キーワードで定義された変数は、関数本体内でのみアクセスでき、関数の外部からはアクセスできません。では、「var」キーワードを使用して変数を定義しないとどうなるでしょうか?この問題については、今は詳しく説明しません。「this」からアクセスできます。この問題については、別の機会に詳しく説明します。

ここで前の質問に戻ります。オブジェクトを作成する最も適切な方法はどれですか?
すでに知っていることを使用して、人物オブジェクトを作成して試してみましょう。

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

 
var person = { 
firstName : 'John' 、
lastName : 'Cody'、
fullName : ''、
message : ''、

createFullName : function () { 
fullName = this.firstName ' ' this.lastName; 

changeMes​​sage : function (msg) { 
this.message = msg; 

getMessage : function () 🎜>this .createFullName(); 
return this.message ' ' fullName; 
} 
} 

person.firstName = 'Eli'; ' 
person.changeMes​​sage('welcome'); 
var message = Person.getMessage() // イーライフラワーズへようこそ 

 
これはオブジェクトの本来の意図モード (リテラル パターン)。これは、私たちが通常オブジェクトを作成する方法に非常に似ています。プライベート/ラップされたメンバーを気にする必要がなく、このオブジェクトのインスタンスが作成されないことがわかっている場合。それなら、この方法はあなたにぴったりです。パブリックメンバーは、プライベートメンバーができるすべてのことを行うことができますよね?ただし、これはクラスではなくオブジェクトであるため、インスタンス化や継承はできません。 

別のことを試してみましょう: 

コードをコピーします

コードは次のとおりです: var person = { firstName : 'John', lastName : 'Cody',

fullName : '',

message : '',

createFullName : function ( ) {
fullName = this.firstName ' ' this.lastName>},

changeMessage : function (msg) {
this.message =
},

getMessage : function () {
this.createFullName();
return this.message ' fullName
}
}

person.firstName = ' Eli ';
person.lastName = 'Fflowers'
person.changeMessage('welcome');
var message = Person.getMessage(); // イーライフラワーズを歓迎します
alert(message);

構築パターン(Constructor Pattern)の例です。では、これはクラスですか、それともオブジェクトですか?おそらく両方でしょう。リクエストを行うときにこれを Person オブジェクトとして使用できます。結局のところ、それは単なる関数です。ただし、「new」キーワードを使用して新しいインスタンスを作成することは可能です。

このメソッドを使用するときは、次の点を常に覚えておく必要があります。

1. この関数が呼び出されるたびに、「this」と呼ばれる特別な変数が存在します。世界中で利用可能です。グローバルスコープは、関数自体のスコープによって異なります。

2. この関数のインスタンスが「new」キーワードによって作成されるたびに、「this」変数は関数自体を指し、この「new」操作は関数内のコードの実行に影響します。体。これも施工パターンです。

3. 「this」変数にアタッチされた変数はパブリックプロパティになり、「var」キーワードで定義された変数はプライベートプロパティになります。

4. "this" にアタッチされた関数は、"this" にアタッチされたすべてのプライベート変数と関数および変数にアクセスできます。

5. プライベート関数は他のプライベート変数やプライベート関数にアクセスできます。

6. プライベート関数は、「this」にアタッチされている変数や関数に直接アクセスできません。これを行うには、プライベート変数「_that」を作成し、それに値「this」を割り当てます。

7. プライベート変数と関数は、他のプライベート関数や「this」にアタッチされている他の関数で使用できます。これは JavaScript の範囲内で完全に可能です。

8. 変数: グローバルスコープを取得するために「var」キーワードを使用したり、「this」変数に付加したりすることはありません。たとえば、カスタム関数のスコープの場合です。もう一度、スコープとクラスタリングを理解する必要があります。

これで、私たちが望んでいることのほとんどが達成されましたが、場合によっては、2 つの入力変数「this」と「that」が人々に混乱を引き起こしやすいことがあります。特に純粋な私的所有権を常に主張してきた人にとっては、混乱しやすいです。

少し変更して試してみましょう。

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

 
var Person = function () { 

//private 
var firstName = 'Cody'; 
var fullName = ''; >
var createFullName = function () { 
fullName = firstName ' ' lastName; 

//public setters 
var setMessage = function (msg) { 
message = msg; 
} 

var setFirstName = function (fName) { 
firstName = fName; 
} 

var setLastName = function (lName) { 
lastName = lName; 
} 

var getMessage = function () { 
createFullName(); 
return message ' fullName; 

//関数を公開するpublic 
return { 
setFirstName: setFirstName, 
setLastName: setLastName, 
setMessage: setMessage, 
getMessage: getMessage 
}; 🎜>var person1 = 新しい人(); 
人1.setLastName('花'); 
人1.setMessage('ようこそ'); message = person1 .getMessage(); // ようこそ Eli Flowers 
alert(message); 

 
これは明らかにパターンです。クリスチャン・ハイルマンに感謝します。このパターンを使用する方法は、リクエストの「ゲッター」と「セッター」をプロパティとして使用することです。私たちの多くは、従来の Java プログラミングからこの図を見つけており、その実装が複雑ではないことは明らかです。これは、クラスがインターフェイスから継承する場合と同様の状況です。 

このモデルのほとんどの側面はうまく実装されていますが、非常に小さな問題が 1 つだけあります。クラスのインスタンスが作成されるたび。新しく作成されたオブジェクトは、その変数と関数のコピーを取得します。さて、変数のコピーには問題はありませんが、各オブジェクトのデータはオブジェクト自体に属していると考えられます。では、メンバー関数はどうなるでしょうか。彼らはただデータを操作しているだけです。では、なぜコピーする必要があるのでしょうか? 

これがプロトタイプの利点です。すべての場合において、すべてがプロトタイプとして作成され、相互に共有できます。必要なのは、プロトタイプに基づいてパブリック関数を作成することだけです。 




コードをコピー

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

 
var person = function () { 

//private 
var welcomeMessage = 'ようこそ'; 
var fullName = ''; 
var firstName = ''; 
var lastName = ""; 
var createFullName = function () { 
person.prototype.setFirstName('asdsad'); 
fullName = firstName ' ' lastName; 
}; 

//constructor 
var Person = function () { }; //毎回作成されます 

//public 
person.prototype = { 
getFullName: function () { 
createFullName(); 
return welcomeMessage ' ' fullName; 
}, 
setFirstName: function (fName) { 
firstName = fName; 
}, 
setLastName: function (lName) { 
lastName = lName; 
}, 
ChangeMes​​sage: function (mesg) { 
welcomeMessage = mesg; 
} 
} 

return new person(); // 人; //新しい人(); 
}; 


var person1 = 新しい人(); 
person1.setFirstName ('エリ'); 
person1.setLastName('花'); 
person1.ChangeMes​​sage('welcome'); 
var message = person1.getFullName(); // asdsad フラワーズを歓迎します 
alert(message); 

原型モードに存在する 1 つの問題は、私有量および私有関数を確認できないことです。この問題のため、我们才会介绍闭包および開始终組織好作成中に存在する代コードが、

さらに、問題は、サンプルが作成されるたびに、原型のコードを含むすべてのコードが一度に実行されることです。私たちの一部の人にとっては、これは単なる効率の問題です。残念なことに、これは、最初の例の作成時にのみ実行され、その後の他のすべての例では検査操作のみが実行される可能性があります。問題は、一度作成された関数だけを使用して、一時的なパケットを作成するだけなので、このような効果が得られることです。

など、さらにもう 1 つの問題があります。

は、私有関数と私有関数が必ず必要になるものですか?突然変更された、または内部の他のプログラムによって変更された、またはその他の操作が行われた可能性があります。したがって、誰かがコードの乱雑さを意図した場合、真に私有であるか実現されていないに関わらず、また、グループ内の他のコードが追加されるか削除されるかに関わらず、使用可能である。

他のプログラムが使用するもう 1 つのテクニックは、私が意図するすべてのコードに、下の行 "_" を使用する、厳密な名前を使用することです。

代打

代打次のように: (関数() { var Person = function () {

this._fullName = '';

this.firstName = ''; ""; 
_that = this; 

this._createFullName = function () { 
this.ChangeMes​​sage('Namaste'); 
this._fullName = this.firstName ' ' this.苗字; 
}; 
} 

//コード最適化のための共有関数 
person.prototype = { 
constructor: Person, 
getFullName: function () { 
this._createFullName(); 
return this.welcomeMessage ' ' this._fullName; 
}, 
ChangeMes​​sage: function (mesg) { 
this.welcomeMessage = mesg; 
} 
} 

this.person = 人; 
})(); 

var person1 = 新しい人(); 
person1.firstName = 'エリ'; 
person1.lastName = '花'; 
person1.ChangeMes​​sage('ようこそ'); 
var message = person1.getFullName(); // ナマステ イーライフラワーズ 
alert(message); 


私は「プライベート」などについて考えるべきではないと言っているのではありません。あなたはコードの設計者なので、コードを管理する方法と何が最も効果的かを知っています。ニーズに応じて、1 つのデザイン パターンを使用することも、複数のデザイン パターンを組み合わせて使用​​することもできます。 

どのデザイン パターンを採用する場合でも、常に最小限の作業を行うこと、グローバル スコープでクロージャーを実装しないこと、メモリ リークを最小限に抑えること、コードを最適化すること、コードを適切に整理することを忘れないでください。したがって、スコープ、クロージャ、および「this」の動作についてできる限り学ぶようにしてください。 

最後に、プログラミングを楽しんでください! 

翻訳後の感想 

JavaScriptはよく使うのですが、コピーしてそのまま使えそうな印象です。私は最近 extjs を使用しましたが、そのクラス フレームワークは非常に使いやすいです。この記事から、JavaScript でクラスを実装するさまざまな方法についても理解できます。また、記事の最後では、クラスでのプライベート メンバーの実装について説明します。