JavaScript でクラスを実装する方法を調べる

JavaScript でクラスを実装する方法について話し合います

JavaScript でオブジェクトを作成する方法はたくさんあるため、オブジェクトの作成方法は非常に柔軟です。それでは、オブジェクトを作成する最も適切な方法はどれでしょうか?構築

パターン、プロトタイプ パターン、それともオブジェクト リテラル パターン?

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

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

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

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

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

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

さて、前の質問に戻ります。オブジェクトを作成する最も適切な方法はどれですか?

すでに知っている知識を利用して、人物オブジェクトを作成して試してみましょう。

[javascript]

var person = {

firstName : 'John',

lastName : 'Cody',

fullName : '',

message : '',

createFullName : 関数（）{

使用して使用して使用して使用してOutを使用して使用して使用します。 'welcome');

var message = Person.getMessage(); // ようこそ、Eli Flowers

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

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

[javascript]

var Person = function() {

this.firstName = 'John'

this.lastName = 'Cody';

var fullName = ';' ' + _that.lastname

); メッセージ + ' ' + fullName }

}

var person1 = 新しい person1.firstName = ' Flowers の

person1.changeMes​​sage('welcome');

var message = person1.getMessage(); // イーライ フラワーズ

のインスタンスです。 (コンストラクター パターン)。では、これはクラスですか、それともオブジェクトですか?両方を考慮する必要があります。リクエスト時にオブジェクト人物として扱うことができます

使用します。結局のところ、それは単なる関数です。ただし、「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」が人々に混乱を引き起こしやすいことがあります。特に純粋な私的所有権を常に主張してきた人にとっては、混乱しやすいです。

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

[javascript]

varfunction（）{

//

var message = '';

var createFullName = function () {

fullName = firstName + ' ' + lastName; } //パブリックセッター

var setMessage = function (msg ) {

=

var setLastName = function (lName) {

lastName = lName; "

//公開された関数 public

return {

setFirstName: setFirstName,

setLastName: setLastName,

setMessage: setMessage、

。

var person1 = 新しい人();

person1.setLastName('花');

var メッセージ = person1.getMessage(); // ようこそ Eli Flowers

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

インターフェースを継承する場合と同様の状況です。

このモデルのほとんどの側面はうまく実装されていますが、非常に小さな問題が 1 つだけあります。クラスのインスタンスが作成されるたび。この新しく作成されたオブジェクトは、変数と関数のコピーを取得します

コピーします。さて、変数のコピーには問題はありませんが、各オブジェクトのデータはオブジェクト自体に属していると考えられます。では、メンバー関数はどうなるでしょうか。彼らはただデータを操作しているだけです

。では、なぜコピーする必要があるのでしょうか?

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

[javascript]

var person = function () {

//private

var welcomeMessage = 'welcome';

var firstName = '';

var lastName = "";

var createFullName = function () {

Person.prototype.setFirstName('asdsad');

fullName = firstName + ' ' + lastName };

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

//public

getFullName: function () {

createFullName(); welcomeMessage + を返す'' + fullname}、setfirstname：fname = fname; var person1 = 新しい person1.setFirstName('Eli');

person1.ChangeMes​​sage('welcome');

var message = person1.getFullName( ) ; // ようこそ asdsad Flowers

alert(message);

プロトタイプ パターンの問題は、プライベート変数とプライベート関数にアクセスできないことです。この問題のため、クロージャを導入し、常にクラスの作成 コードは、

グローバルに乱雑にならないように存在します。すべては Person クラスのスコープ内にあります。

もう 1 つの問題は、インスタンスが作成されるたびに、プロトタイプのバインドを含むすべてのコードが実行されることです。私たちの中には、単に効率の問題だと考える人もいます。

この問題に対処する 1 つの方法は、期待されるパブリック関数が利用できない場合にのみプロトタイプをバインドすることです。

これにより、最初のインスタンスが作成された場合にのみプロトタイプ バインド操作が実行され、その後は他のすべてのインスタンスのみがチェックされます。残念ながら、このクラスの効果を実現するにはクロージャを生成する新しい関数を作成することしかできないため、これでも上記の例で述べた問題を解決することはできません。この場合、少なくともメモリ使用量を

削減します。

待って、プライベート関数はプロトタイプ関数に直接アクセスできないという別の問題があります。

プライベート関数とプライベート変数が必要なのはなぜですか?クラスのカプセル化を実現し、クラスの属性や内部データが他の内部プログラムやその他の操作によって突然変更されたり変更されたりしないようにしたいと考えていることはわかります...

あなたコードを常に利用できるようにするために、JavaScript コードをバイナリにコンパイルすることはできないことを覚えておいてください。これはある程度煩わしいかもしれません。したがって、誰かがそのコードをいじりたい場合、あなたが本当に非公開であるかどうか、コードをチームの他のメンバーに渡すか販売するかに関係なく、コードをいじることができます。

民営化を実現すれば少しは役に立つかもしれません。

他のプログラマーが使用するもう 1 つのテクニックは、プライベートにしたいものの前にアンダースコア "_" を付けてプライベートであることを指定する、命名規則を使用することです。

[javascript]

(function() {

var person = function () {

this._fullName = '';  

this.welcomeMessage = '';  

this.firstName = '';  

this.lastName = "";  

_あれ = これ;  

this._createFullName = function () {

this.ChangeMes​​sage('ナマステ');  

this._fullName = this.firstName + ' ' + this.lastName;  

};  

}

//コード最適化のための共有関数

person.prototype = {

コンストラクター: 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);  

私たちは、これを「プライベート」またはそれに似た知識とは考えません。

必要に応じて、いずれかの設計モードを使用することも、複数の設計モードを組み合わせて使用​​することもできます。现闭包したがって、できるだけ多くの有効領域、ブロック、および「これ」の実行を理解しています。聞いてみると、JavaScript は頻繁に使用されており、その印象を直接コピーするのに非常に便利です。最近では、その種類のフレームワークである extjs を使用しています。この方法、および文章の最後では、この階級における私の実現状況が確認されています。