ホームページ  >  記事  >  ウェブフロントエンド  >  Javascriptでのクラス実装

Javascriptでのクラス実装

黄舟
黄舟オリジナル
2016-12-19 17:37:541139ブラウズ

JavaScript 自体はオブジェクト指向をサポートしておらず、アクセス制御文字も持たず、クラスを定義するためのキーワード class も持たず、継承のための extend やコロンもサポートせず、仮想関数をサポートする virtual もありません。ただし、JavaScript は柔軟な言語です。キーワード class のない Javascript がどのようにクラス定義を実装し、オブジェクトを作成するかを見てみましょう。

1: クラスを定義し、クラスのインスタンス オブジェクトを作成します
Javascript では、次のように関数を使用してクラスを定義します。

function Shape()
{
var x=1;
var y=2;
}

疑うかもしれませんね?これは決定的な機能ではないでしょうか?はい、これは定義関数です。Shape 関数を定義し、x と y を初期化します。しかし、別の見方をすると、これは x と y の 2 つの属性を持つ Shape クラスを定義することになり、初期値はそれぞれ 1 と 2 になります。ただし、その定義に使用するキーワードは次のとおりです。 class はクラスではなく関数です。

次に、次のように、Shape クラスのオブジェクト aShape を作成できます:

var aShape = new Shape();


2: パブリック プロパティとプライベート プロパティを定義します
aShape オブジェクトはすでに作成していますが、 try そのプロパティにアクセスすると、次のようなエラーが発生します:
aShape.x=1;

これは、var で定義されたプロパティがプライベートであることを示しています。 this キーワードを使用してパブリック属性
function Shape() を定義する必要があります
{
this.x=1;
this.y=2;
}

このようにして、Shape の属性にアクセスできます。として。
aShape.x=2;

上記のコードに基づいて要約すると、var を使用してクラスの PRivate 属性を定義し、this を使用してクラスの public 属性を定義します。

3: パブリックメソッドとプライベートメソッドを定義する

Javascript では、関数は Function クラスのインスタンスであり、Function は Object から間接的に継承されるため、関数も代入を使用して作成できます。もちろん、クラスの属性変数に関数を割り当てることもできます。この属性変数は実行可能な関数であるため、メソッドと呼ぶことができます。コードは次のとおりです:

function Shape()
{
var x=0;
var y=1;
this.draw=function()
{
//print;
};
}

私たちのコード上で描画が定義され、それに関数が割り当てられます。次に、OOP ではパブリック メソッドと呼ばれるこの関数を次のように呼び出すことができます。
aShape.draw(); var で定義されている場合、この描画は OOP ではプライベート メソッドと呼ばれます (

function Shape()

{
var x=0;
var y=1;
vardraw=function()
{
};
})。
この方法では、aShape.draw を使用してこの関数を呼び出すことはできません。


3: コンストラクター

JavaScript は OOP をサポートしていません。もちろんコンストラクターはありません。ただし、コンストラクターを自分でシミュレートし、オブジェクトの作成時に自動的に呼び出すことができます。コードは次のとおりです。 Shape()

{

var init = function()
{
//コンストラクター コード
};

init();
}

Shape の最後で、人工的に init 関数を呼び出し、 Shape オブジェクト はい、init は常に自動的に呼び出され、コンストラクターをシミュレートできます。


4: パラメーターを持つコンストラクター

コンストラクターにパラメーターを取得させるにはどうすればよいですか?実際には、

function Shape(ax,ay)
{
var x=0;

var y=0;

var など、関数のパラメータ リストに渡すパラメータを記述するだけです。 init = function()
);


5: 静的プロパティと静的メソッド
JavaScript で静的プロパティと静的メソッドを定義するにはどうすればよいですか?以下に示すように

function Shape(ax,ay)
{
var x=0;

var y=0;

var init = function()

};


init();
}

Shape.count= 0;//静的属性の数を定義します。この属性はオブジェクトではなくクラスに属します。

Shape.staticMethod=function(){};//静的メソッドを定義します

静的プロパティとメソッドでは、次のようにクラス名を使用してアクセスできます
alert ( aShape.count );
aShape.staticMethod();
注: これまでのところ、静的プロパティとメソッドはパブリックではありません。静的プロパティとメソッドをプライベートにする方法を知ってください~

6: メソッドでこのクラスのパブリック プロパティとプライベート プロパティにアクセスします

クラス メソッドで独自のプロパティにアクセスします。JavaScript にはパブリック プロパティとプライベート プロパティがあります。属性が異なります。次のコードを参照してください。
function Shape(ax,ay)
{
var x=0;
var y=0;
this.gx=0;
this.gy=0;
var init = function()
this.
this.gy=ay;
};

init();
}

Seven: これについてのメモ
著者の経験によると、クラス内の this は常にポイントするわけではありませんオブジェクト自体にその理由は、JavaScript が OOP 言語ではなく、関数とクラスが関数で定義されているためであり、当然、いくつかの小さな問題が発生します。

このポインターがエラーを指す状況は通常、イベントがトリガーされたときにオブジェクトのメンバー関数が呼び出されるようにする必要がありますが、渡されたこのポインターはbe これは独自のオブジェクトではなくなりました。もちろん、これをメンバー関数で呼び出すと確実にエラーが発生します。

解決策は、クラス定義の最初にこれをプライベート属性に保存することです。将来、この属性を使用してこれを置き換えることができます。この方法でこのポインターを使用することは私にとって非常に安全であり、非常に心配がありません~
この問題を解決するためにコードを変更しましょう。パート 6 のコードを比較すると、
function Shape(ax,ay)
{
var _this=this; //これを保存し、将来これを置き換えるには _this を使用することを確実に理解できるようになります。 this Dizzy
var x=0;
var y=0;
_this.gx=0;
_this.gy=0;
var init = function()
{
x=ax;// プライベート属性にアクセスし、直接書き込みます変数名を使用するだけです
y=ay;
_this.gx=ax;//パブリック プロパティにアクセスするには、this.
_this.gy=ay;
};

init();
}


上記では、JavaScript でクラスを定義する方法、クラスのオブジェクトを作成する方法、パブリックおよびプライベートのプロパティとメソッドを作成する方法、静的プロパティとメソッドを作成する方法、コンストラクターをシミュレートする方法について説明し、エラーが発生しやすいことについて説明しました。

以上が Javascript での OOP 実装についての説明であり、一般に Javascript はクラスの定義に使用され、オブジェクトの作成には上記のコードで十分です。もちろん、mootools またはプロトタイプを使用してクラスを定義し、オブジェクトを作成することもできます。私は mootools フレームワークを使用しましたが、これはより完全な Javascript クラス シミュレーションを備えており、クラスの継承をサポートしているので、興味のある方は試してみてください。もちろん、フレームワークを使用する場合は、関連する js ヘッダー ファイルを Web ページに含める必要があります。そのため、読者がフレームワークを使用せずにクラスを作成できることを願っています。この方法で、コードがより効率的になり、また、クラスを作成することもできます。見てください、簡単なクラスを作成するのは面倒ではありません ~

Javascript の次のバージョンでは、OOP のサポートが追加される予定です。その時までに、クラス キーワード、パブリックおよびプライベートのアクセス制御文字 ~ 継承が拡張される予定です。次世代の Javascript に興味がある場合は、まず ActionScript 3.0 を試してみるとよいでしょう。これは、Adobe が Macromedia を買収した後の傑作ですが、JavaScript と同様に ECMAScript に属します。 AS3 は ECMAScript のバージョン 4 の実装です。 ActionScript 3.0 を学ぶには、Sun Ying 先生の『ActionScript 3 Road to the Palace』を強くお勧めします。この本は、特にオブジェクト指向の部分が非常にわかりやすく、読んだ後は生き生きとしています。 、とても良い気分です。ECMAScript の新しいバージョンを賞賛しながら、OOP プログラミングのアイデアを深く学び続ける大きなモチベーションにもなりました。興味のある読者は読んでみてください~

上記は でのクラス実装の内容です。 Javascript、その他の関連コンテンツ PHP 中国語 Web サイト (www.php.cn) にご注意ください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。